Skip to content

Fix dropdown trigger accessibility state#228

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

Fix dropdown trigger accessibility state#228
web3blind wants to merge 1 commit into
suitenumerique:mainfrom
web3blind:web3blind/dropdown-menu-trigger-a11y

Conversation

@web3blind
Copy link
Copy Markdown

Summary

  • add aria-haspopup="menu" and aria-expanded to the dropdown trigger element
  • connect the trigger to the rendered menu with aria-controls while the menu is open
  • add a stable id to the menu element used by that relationship

Accessibility impact

This addresses one concrete part of #183: screen reader users can now hear that the trigger opens a menu and whether it is currently expanded. Keyboard and screen reader users get a clearer state announcement before moving into the menu.

Validation

  • corepack yarn eslint src/components/dropdown-menu/DropdownMenu.tsx --report-unused-disable-directives
  • corepack yarn build

Closes part of #183.

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