Skip to content

Improve dropdown menu accessibility state#229

Open
web3blind wants to merge 1 commit into
suitenumerique:mainfrom
web3blind:fix-dropdown-menu-a11y
Open

Improve dropdown menu accessibility state#229
web3blind wants to merge 1 commit into
suitenumerique:mainfrom
web3blind:fix-dropdown-menu-a11y

Conversation

@web3blind
Copy link
Copy Markdown

Summary

  • expose the dropdown popover relationship with aria-haspopup, aria-expanded, and aria-controls
  • give the menu a stable id connected to the trigger container while open
  • expose checked dropdown options with aria-checked
  • add a high-contrast focus outline for focused dropdown items

Accessibility impact

This addresses part of #183 by making the open/closed state and checked state available to assistive technologies, and by improving the visible keyboard focus indicator beyond the low-contrast hover/focus background.

Checks

  • yarn lint (passes with existing react-hooks warnings in preview components)
  • yarn build

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.

1 participant