fix(Combobox): improve screen reader experience for Select-Only combo…

…box w NVDA (#1988)
zendeskgarden · Dec 12, 2024 · f72c31f · f72c31f
1 parent abb6e98
commit f72c31f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/packages/dropdowns.next/src/elements/combobox/Combobox.spec.tsx b/packages/dropdowns.next/src/elements/combobox/Combobox.spec.tsx
@@ -510,6 +510,26 @@ describe('Combobox', () => {
       expect(input).toHaveAttribute('aria-expanded', 'false');
     });
 
+    it('sets the correct aria attributes on `ListBox` when expanded or collapsed', async () => {
+      const { getByTestId } = render(
+        <TestCombobox isAutocomplete>
+          <Option value="test" />
+        </TestCombobox>
+      );
+      const combobox = getByTestId('combobox');
+      const trigger = combobox.firstChild as HTMLElement;
+
+      await user.click(trigger);
+
+      const listbox = combobox.querySelector('[role="listbox"]') as HTMLElement;
+
+      expect(listbox).toHaveAttribute('aria-hidden', 'false');
+
+      await user.click(trigger);
+
+      expect(listbox).toHaveAttribute('aria-hidden', 'true');
+    });
+
     it('retains expansion on `OptGroup` click', async () => {
       const { getByTestId } = render(
         <TestCombobox isAutocomplete>

diff --git a/packages/dropdowns.next/src/elements/combobox/Listbox.tsx b/packages/dropdowns.next/src/elements/combobox/Listbox.tsx
@@ -130,6 +130,10 @@ export const Listbox = forwardRef<HTMLUListElement, IListboxProps>(
         ref={floatingRef}
       >
         <StyledListbox
+          aria-hidden={
+            // Hide from NVDA when collapsed to prevent incorrect / missing announcements caused by animation
+            !isExpanded
+          }
           isCompact={isCompact}
           maxHeight={maxHeight}
           minHeight={minHeight}