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__/Select.test.tsx

@@ -2488,7 +2488,6 @@ test('accessibility > A11yTexts can be provided through ariaLiveMessages prop',
     keyCode: 13,
     key: 'Enter',
   });
-
   expect(container.querySelector(liveRegionEventId)!.textContent).toMatch(
     'CUSTOM: option 0 is selected.'
   );
@@ -2926,48 +2925,81 @@ cases(
   }
 );
 
-test('clear select by clicking on clear button > should not call onMenuOpen', () => {
-  let onChangeSpy = jest.fn();
-  let props = { ...BASIC_PROPS, onChange: onChangeSpy };
-  let { container } = render(
-    <Select {...props} isMulti value={[OPTIONS[0]]} />
-  );
+cases(
+  'clear select by clicking on clear button > should not call onMenuOpen',
+  ({ props = BASIC_PROPS }) => {
+    let onChangeSpy = jest.fn();
+    let { container } = render(
+      <Select {...props} onChange={onChangeSpy} isMulti value={[OPTIONS[0]]} />
+    );
 
-  expect(container.querySelectorAll('.react-select__multi-value').length).toBe(
-    1
-  );
-  fireEvent.mouseDown(
-    container.querySelector('.react-select__clear-indicator')!,
-    { button: 0 }
-  );
-  expect(onChangeSpy).toBeCalledWith([], {
-    action: 'clear',
-    name: BASIC_PROPS.name,
-    removedValues: [{ label: '0', value: 'zero' }],
-  });
-});
+    expect(
+      container.querySelectorAll('.react-select__multi-value').length
+    ).toBe(1);
+    fireEvent.mouseDown(
+      container.querySelector('.react-select__clear-indicator')!,
+      { button: 0 }
+    );
+    expect(onChangeSpy).toBeCalledWith([], {
+      action: 'clear',
+      name: BASIC_PROPS.name,
+      removedValues: [{ label: '0', value: 'zero' }],
+    });
+  },
+  {
+    'mouse only clear indicator': {
+      props: {
+        ...BASIC_PROPS,
+        isClearable: true,
+      },
+    },
+    'clear indicator button': {
+      ...BASIC_PROPS,
+      isClearable: true,
+      enableAccessibleClearIndicator: true,
+    },
+  }
+);
 
-test('clearing select using clear button to not call onMenuOpen or onMenuClose', () => {
-  let onMenuCloseSpy = jest.fn();
-  let onMenuOpenSpy = jest.fn();
-  let props = {
-    ...BASIC_PROPS,
-    onMenuClose: onMenuCloseSpy,
-    onMenuOpen: onMenuOpenSpy,
-  };
-  let { container } = render(
-    <Select {...props} isMulti value={[OPTIONS[0]]} />
-  );
-  expect(container.querySelectorAll('.react-select__multi-value').length).toBe(
-    1
-  );
-  fireEvent.mouseDown(
-    container.querySelector('.react-select__clear-indicator')!,
-    { button: 0 }
-  );
-  expect(onMenuOpenSpy).not.toHaveBeenCalled();
-  expect(onMenuCloseSpy).not.toHaveBeenCalled();
-});
+cases(
+  'clearing select using clear button to not call onMenuOpen or onMenuClose',
+  ({ props = BASIC_PROPS }) => {
+    let onMenuCloseSpy = jest.fn();
+    let onMenuOpenSpy = jest.fn();
+
+    let { container } = render(
+      <Select
+        {...props}
+        onMenuClose={onMenuCloseSpy}
+        onMenuOpen={onMenuOpenSpy}
+        isMulti
+        value={[OPTIONS[0]]}
+      />
+    );
+    expect(
+      container.querySelectorAll('.react-select__multi-value').length
+    ).toBe(1);
+    fireEvent.mouseDown(
+      container.querySelector('.react-select__clear-indicator')!,
+      { button: 0 }
+    );
+    expect(onMenuOpenSpy).not.toHaveBeenCalled();
+    expect(onMenuCloseSpy).not.toHaveBeenCalled();
+  },
+  {
+    'mouse only clear indicator': {
+      props: {
+        ...BASIC_PROPS,
+        isClearable: true,
+      },
+    },
+    'clear indicator button': {
+      ...BASIC_PROPS,
+      isClearable: true,
+      enableAccessibleClearIndicator: true,
+    },
+  }
+);
 
 test('multi select >  calls onChange when option is selected and isSearchable is false', () => {
   let onChangeSpy = jest.fn();
@@ -3376,3 +3408,49 @@ cases(
     },
   }
 );
+
+test('enableAccessibleClearIndicator is false > render non-interactive clear indicator', () => {
+  let props = {
+    ...BASIC_PROPS,
+    value: OPTIONS[0],
+  };
+  let { container } = render(<Select {...props} isClearable />);
+  expect(
+    container.querySelector('div.react-select__clear-indicator')
+  ).toBeVisible();
+});
+
+test('enableAccessibleClearIndicator is true > clear indicator is focusable and clear value', () => {
+  let props = {
+    ...BASIC_PROPS,
+    value: OPTIONS[0],
+  };
+  let { container } = render(
+    <Select {...props} isClearable enableAccessibleClearIndicator />
+  );
+
+  const clearIndicator = container.querySelector(
+    'button.react-select__clear-indicator'
+  )!;
+  expect(clearIndicator).toBeVisible();
+
+  userEvent.click(container.querySelector('.react-select__input')!);
+  userEvent.tab();
+  expect(
+    container.querySelector('button.react-select__clear-indicator')!
+  ).toHaveFocus();
+
+  fireEvent.keyDown(
+    container.querySelector('button.react-select__clear-indicator')!,
+    {
+      key: 'Enter',
+      keyCode: 13,
+    }
+  );
+  expect(
+    container.querySelector('button.react-select__clear-indicator')
+  ).not.toBeInTheDocument();
+  expect(
+    container.querySelector('.react-select__single-value')!.textContent
+  ).toEqual('0');
+});

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 */}