Skip to content

Commit 0d1817e

Browse files
authored
fix(Combobox): improve screen reader experience for Select-Only combobox w NVDA (#1987)
1 parent a868259 commit 0d1817e

File tree

2 files changed

+24
-0
lines changed

2 files changed

+24
-0
lines changed

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

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

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

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,10 @@ export const Listbox = forwardRef<HTMLUListElement, IListboxProps>(
133133
$isCompact={isCompact}
134134
$maxHeight={maxHeight}
135135
$minHeight={minHeight}
136+
aria-hidden={
137+
// Hide from NVDA when collapsed to prevent incorrect / missing announcements caused by animation
138+
!isExpanded
139+
}
136140
onMouseDown={composeEventHandlers(onMouseDown, handleMouseDown)}
137141
style={{ height }}
138142
{...props}

0 commit comments

Comments
 (0)