Prevent double screenreader readout of value

zendeskgarden · Aug 3, 2023 · f277056 · f277056
1 parent 9a22533
commit f277056
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/packages/dropdowns.next/.size-snapshot.json b/packages/dropdowns.next/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 55834,
-    "minified": 40518,
-    "gzipped": 9261
+    "bundled": 55890,
+    "minified": 40577,
+    "gzipped": 9273
   },
   "index.esm.js": {
-    "bundled": 51185,
-    "minified": 36113,
-    "gzipped": 8685,
+    "bundled": 51241,
+    "minified": 36172,
+    "gzipped": 8697,
     "treeshaked": {
       "rollup": {
-        "code": 28431,
+        "code": 28490,
         "import_statements": 1064
       },
       "webpack": {
-        "code": 31304
+        "code": 31363
       }
     }
   }

diff --git a/packages/dropdowns.next/src/elements/combobox/Combobox.spec.tsx b/packages/dropdowns.next/src/elements/combobox/Combobox.spec.tsx
@@ -226,6 +226,8 @@ describe('Combobox', () => {
     expect(combobox).toHaveAttribute('tabIndex', '-1');
     expect(input).toHaveAttribute('readonly');
     expect(input).toHaveAttribute('hidden');
+    expect(input).toHaveAttribute('aria-hidden', 'true');
+    expect(input).toHaveStyleRule('display', 'none', { modifier: '&[aria-hidden="true"]' });
   });
 
   it('renders `isMultiselectable` as expected', () => {

diff --git a/packages/dropdowns.next/src/elements/combobox/Combobox.tsx b/packages/dropdowns.next/src/elements/combobox/Combobox.tsx
@@ -199,6 +199,7 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
       hidden: !(isEditable && hasFocus.current),
       isBare,
       isCompact,
+      isEditable,
       isMultiselectable,
       placeholder,
       ...(getInputProps({
@@ -227,7 +228,7 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
       <ComboboxContext.Provider value={contextValue}>
         <StyledCombobox
           isCompact={isCompact}
-          tabIndex={isEditable ? undefined : -1} // HACK: otherwise JAWS + NVDA can't read the label
+          tabIndex={-1} // HACK: otherwise screenreaders can't read the label
           {...props}
           ref={ref}
         >

diff --git a/packages/dropdowns.next/src/views/combobox/StyledInput.ts b/packages/dropdowns.next/src/views/combobox/StyledInput.ts
@@ -19,6 +19,7 @@ const COMPONENT_ID = 'dropdowns.combobox.input';
 interface IStyledInputProps extends ThemeProps<DefaultTheme> {
   isBare?: boolean;
   isCompact?: boolean;
+  isEditable?: boolean;
   isMultiselectable?: boolean;
 }
 
@@ -84,7 +85,11 @@ export const StyledInput = styled.input.attrs({
 
   &[hidden] {
     display: revert;
-    ${hideVisually()}
+    ${props => props.isEditable && hideVisually()}
+  }
+
+  &[aria-hidden='true'] {
+    display: none;
   }
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};