Skip to content

Commit f72c31f

Browse files
authored
fix(Combobox): improve screen reader experience for Select-Only combobox w NVDA (#1988)
1 parent abb6e98 commit f72c31f

File tree

2 files changed

+24
-0
lines changed

2 files changed

+24
-0
lines changed

packages/dropdowns.next/src/elements/combobox/Combobox.spec.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -510,6 +510,26 @@ describe('Combobox', () => {
510510
expect(input).toHaveAttribute('aria-expanded', 'false');
511511
});
512512

513+
it('sets the correct aria attributes on `ListBox` when expanded or collapsed', async () => {
514+
const { getByTestId } = render(
515+
<TestCombobox isAutocomplete>
516+
<Option value="test" />
517+
</TestCombobox>
518+
);
519+
const combobox = getByTestId('combobox');
520+
const trigger = combobox.firstChild as HTMLElement;
521+
522+
await user.click(trigger);
523+
524+
const listbox = combobox.querySelector('[role="listbox"]') as HTMLElement;
525+
526+
expect(listbox).toHaveAttribute('aria-hidden', 'false');
527+
528+
await user.click(trigger);
529+
530+
expect(listbox).toHaveAttribute('aria-hidden', 'true');
531+
});
532+
513533
it('retains expansion on `OptGroup` click', async () => {
514534
const { getByTestId } = render(
515535
<TestCombobox isAutocomplete>

packages/dropdowns.next/src/elements/combobox/Listbox.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,10 @@ export const Listbox = forwardRef<HTMLUListElement, IListboxProps>(
130130
ref={floatingRef}
131131
>
132132
<StyledListbox
133+
aria-hidden={
134+
// Hide from NVDA when collapsed to prevent incorrect / missing announcements caused by animation
135+
!isExpanded
136+
}
133137
isCompact={isCompact}
134138
maxHeight={maxHeight}
135139
minHeight={minHeight}

0 commit comments

Comments
 (0)