Skip to content

fix(picker): implement W3C listbox ARIA pattern for toolbar pickers#4807

Open
manichandra wants to merge 1 commit into
slab:mainfrom
manichandra:fix/picker-aria-listbox-keyboard-nav
Open

fix(picker): implement W3C listbox ARIA pattern for toolbar pickers#4807
manichandra wants to merge 1 commit into
slab:mainfrom
manichandra:fix/picker-aria-listbox-keyboard-nav

Conversation

@manichandra

Copy link
Copy Markdown
  • Add role="listbox" to picker options container
  • Add role="option" and aria-selected to picker items (replaces role="button")
  • Add aria-haspopup="listbox" and aria-label to picker label button
  • Manage aria-selected state transitions in selectItem()
  • Add ArrowDown/ArrowUp keyboard navigation from label button
  • Add ArrowDown/ArrowUp keyboard navigation between option items
  • Add aria-label from option text content to each item

Fixes #4439 - Screen readers can now announce the picker as a listbox, identify each item as a selectable option, and users can navigate options with arrow keys per the ARIA combobox/listbox pattern.

- Add role="listbox" to picker options container
- Add role="option" and aria-selected to picker items (replaces role="button")
- Add aria-haspopup="listbox" and aria-label to picker label button
- Manage aria-selected state transitions in selectItem()
- Add ArrowDown/ArrowUp keyboard navigation from label button
- Add ArrowDown/ArrowUp keyboard navigation between option items
- Add aria-label from option text content to each item

Fixes slab#4439 - Screen readers can now announce the picker as a listbox,
identify each item as a selectable option, and users can navigate
options with arrow keys per the ARIA combobox/listbox pattern.
@manichandra manichandra force-pushed the fix/picker-aria-listbox-keyboard-nav branch from 6e799fc to c13f539 Compare May 11, 2026 16:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Header Toolbar Accessibility and Keyboard Navigation

1 participant