Fix: a11y, enabled clear indicator to be accessible via keyboard

.changeset/poor-walls-help.md

@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Optional props to enable clear indicator to be keyboard accessible

packages/react-select/src/Select.tsx

@@ -176,6 +176,8 @@ export interface Props<
   instanceId?: number | string;
   /** Is the select value clearable */
   isClearable?: boolean;
+  /** enabled clear indicator to accessible via keyboard and screen-reader */
+  enableAccessibleClearIndicator?: boolean;
   /** Is the select disabled */
   isDisabled: boolean;
   /** Is the select in a state of loading (async) */
@@ -734,7 +736,6 @@ export default class Select<
             `${instancePrefix}-option`
           )
         : [];
-
       const focusedValue = clearFocusValueOnUpdate
         ? getNextFocusedValue(state, selectValue)
         : null;
@@ -743,7 +744,6 @@ export default class Select<
         focusableOptionsWithIds,
         focusedOption
       );
-
       newMenuOptionsState = {
         selectValue,
         focusedOption,
@@ -764,7 +764,8 @@ export default class Select<
 
     let newAriaSelection = ariaSelection;
 
-    let hasKeptFocus = isFocused && prevWasFocused;
+    let hasKeptFocus =
+      isFocused && (prevWasFocused || ariaSelection?.action === 'clear');
 
     if (isFocused && !hasKeptFocus) {
       // If `value` or `defaultValue` props are not empty then announce them
@@ -1860,7 +1861,8 @@ export default class Select<
   renderClearIndicator() {
     const { ClearIndicator } = this.getComponents();
     const { commonProps } = this;
-    const { isDisabled, isLoading } = this.props;
+    const { isDisabled, isLoading, enableAccessibleClearIndicator } =
+      this.props;
     const { isFocused } = this.state;
 
     if (
@@ -1884,6 +1886,12 @@ export default class Select<
         {...commonProps}
         innerProps={innerProps}
         isFocused={isFocused}
+        enableAccessibleClearIndicator={enableAccessibleClearIndicator}
+        handleClearingValue={() => {
+          this.openAfterFocus = false;
+          this.focusInput();
+          this.clearValue();
+        }}
       />
     );
   }

packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap

@@ -146,13 +146,21 @@ exports[`defaults - snapshot 1`] = `
   transition: color 150ms;
   color: hsl(0, 0%, 80%);
   padding: 8px;
+  border: none;
+  background: none;
   box-sizing: border-box;
 }
 
 .emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
+.emotion-9:focus {
+  border-color: #2684FF;
+  outline: unset;
+  box-shadow: 0 0 0 2px #2684FF inset;
+}
+
 .emotion-10 {
   display: inline-block;
   fill: currentColor;

packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap

@@ -146,13 +146,21 @@ exports[`defaults - snapshot 1`] = `
   transition: color 150ms;
   color: hsl(0, 0%, 80%);
   padding: 8px;
+  border: none;
+  background: none;
   box-sizing: border-box;
 }
 
 .emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
+.emotion-9:focus {
+  border-color: #2684FF;
+  outline: unset;
+  box-shadow: 0 0 0 2px #2684FF inset;
+}
+
 .emotion-10 {
   display: inline-block;
   fill: currentColor;

packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap

@@ -146,13 +146,21 @@ exports[`defaults - snapshot 1`] = `
   transition: color 150ms;
   color: hsl(0, 0%, 80%);
   padding: 8px;
+  border: none;
+  background: none;
   box-sizing: border-box;
 }
 
 .emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
+.emotion-9:focus {
+  border-color: #2684FF;
+  outline: unset;
+  box-shadow: 0 0 0 2px #2684FF inset;
+}
+
 .emotion-10 {
   display: inline-block;
   fill: currentColor;

packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap

@@ -146,13 +146,21 @@ exports[`snapshot - defaults 1`] = `
   transition: color 150ms;
   color: hsl(0, 0%, 80%);
   padding: 8px;
+  border: none;
+  background: none;
   box-sizing: border-box;
 }
 
 .emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
+.emotion-9:focus {
+  border-color: #2684FF;
+  outline: unset;
+  box-shadow: 0 0 0 2px #2684FF inset;
+}
+
 .emotion-10 {
   display: inline-block;
   fill: currentColor;

packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap

@@ -146,13 +146,21 @@ exports[`defaults > snapshot 1`] = `
   transition: color 150ms;
   color: hsl(0, 0%, 80%);
   padding: 8px;
+  border: none;
+  background: none;
   box-sizing: border-box;
 }
 
 .emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
+.emotion-9:focus {
+  border-color: #2684FF;
+  outline: unset;
+  box-shadow: 0 0 0 2px #2684FF inset;
+}
+
 .emotion-10 {
   display: inline-block;
   fill: currentColor;

packages/react-select/src/components/LiveRegion.tsx

@@ -204,7 +204,6 @@ const LiveRegion = <
       <span id="aria-guidance">{ariaGuidance}</span>
     </Fragment>
   );
-
   return (
     <Fragment>
       {/* We use 'aria-describedby' linked to this component for the initial focus */}

packages/react-select/src/components/indicators.tsx

@@ -92,10 +92,18 @@ const baseCSS = <
         ':hover': {
           color: isFocused ? colors.neutral80 : colors.neutral40,
         },
+        border: 'none',
+        background: 'none',
+        ':focus': {
+          borderColor: !isFocused ? colors.primary : 'none',
+          outline: 'unset',
+          boxShadow: !isFocused ? `0 0 0 2px ${colors.primary} inset` : 'unset',
+        },
       }),
 });
 
 export const dropdownIndicatorCSS = baseCSS;
+
 export const DropdownIndicator = <
   Option,
   IsMulti extends boolean,
@@ -128,6 +136,10 @@ export interface ClearIndicatorProps<
   innerProps: JSX.IntrinsicElements['div'];
   /** The focused state of the select. */
   isFocused: boolean;
+  /** Handle clearing the value and focus*/
+  handleClearingValue: () => void;
+  /** Enabled clear indictor to be acessible via keyboard and screen-reader */
+  enableAccessibleClearIndicator?: boolean;
 }
 
 export const clearIndicatorCSS = baseCSS;
@@ -138,15 +150,37 @@ export const ClearIndicator = <
 >(
   props: ClearIndicatorProps<Option, IsMulti, Group>
 ) => {
-  const { children, innerProps } = props;
+  const {
+    children,
+    innerProps,
+    enableAccessibleClearIndicator,
+    handleClearingValue: onClearValue,
+  } = props;
+
+  const clearIndicatorStyle = getStyleProps(props, 'clearIndicator', {
+    indicator: true,
+    'clear-indicator': true,
+  });
+
+  if (enableAccessibleClearIndicator) {
+    return (
+      <div {...innerProps} aria-hidden={false}>
+        <button
+          aria-label="clear"
+          {...clearIndicatorStyle}
+          onClick={(e) => {
+            e.preventDefault();
+            onClearValue();
+          }}
+        >
+          {children || <CrossIcon />}
+        </button>
+      </div>
+    );
+  }
+
   return (
-    <div
-      {...getStyleProps(props, 'clearIndicator', {
-        indicator: true,
-        'clear-indicator': true,
-      })}
-      {...innerProps}
-    >
+    <div {...clearIndicatorStyle} {...innerProps}>
       {children || <CrossIcon />}
     </div>
   );