fix: ClearIndicator accessibility improvements (#2222)

* fix: select input accessibility inprovements * chore: add changeset * chore: changeset update
commercetools · Jul 1, 2022 · 580ecd5 · 580ecd5 · vercel · Jul 1, 2022
1 parent 7e98481
commit 580ecd5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/tall-cooks-sneeze.md b/.changeset/tall-cooks-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/select-utils': patch
+---
+
+`<ClearIndicator>` component accessibility improvements
diff --git a/packages/components/inputs/select-input/src/select-input.spec.js b/packages/components/inputs/select-input/src/select-input.spec.js
@@ -324,7 +324,7 @@ describe('in multi mode', () => {
       const input = getByLabelText('Fruit');
       fireEvent.focus(input);
       const deleteButton = getByTitle('Clear');
-      fireEvent.mouseDown(deleteButton);
+      fireEvent.click(deleteButton);
       expect(onChange).toHaveBeenCalledWith({
         persist: expect.any(Function),
         target: {

diff --git a/packages/components/inputs/select-utils/src/clear-indicator/clear-indicator.tsx b/packages/components/inputs/select-utils/src/clear-indicator/clear-indicator.tsx
@@ -18,7 +18,7 @@ const ClearIndicator = (props: TClearIndicator) => {
   const intl = useIntl();
   const {
     getStyles,
-    innerProps: { ref, ...restInnerProps },
+    innerProps: { ref, onMouseDown, ...restInnerProps },
   } = props;
   return (
     <button
@@ -37,6 +37,10 @@ const ClearIndicator = (props: TClearIndicator) => {
       style={getStyles('clearIndicator', props) as CSSProperties}
       title={intl.formatMessage(messages.clearButtonLabel)}
       aria-label={intl.formatMessage(messages.clearButtonLabel)}
+      // overriding the default `aria-hidden` prop value to make the component accessible by keyboard - https://github.com/JedWatson/react-select/issues/4793
+      aria-hidden={false}
+      // only onMouseDown and onTouchEnd event handlers are passed by `react-select` to the component by default, which makes it not accessible by keyboard
+      onClick={onMouseDown}
     >
       <CloseIcon color="solid" size="medium" />
     </button>