tailwindcss-stimulus-components icon indicating copy to clipboard operation
tailwindcss-stimulus-components copied to clipboard

Dropdown: fix accessibility fail

Open PatrykMis opened this issue 4 years ago • 1 comments

aria-haspopup and aria-expanded attributes must be set for button element or div with role="button" attribute instead of outer div with data-controller="dropdown".

Moreover:

  • The links container must have role="menu" defined.
  • Each element (link) in the list must have role="menuitem" defined.
  • It would be good to set aria-controls, like in the example linked below.

Here is perfectly working Navigation Menu Button Example in accessibility perspective.

Although web developer can manually add aria-controls logic, menu and menuitem rols manually, he/she is not able to easyly move aria-haspopup and aria-expanded attributes (which are set by predefined javascript) to the proper place.

PatrykMis avatar Nov 30 '21 20:11 PatrykMis

PRs welcome.

excid3 avatar Jan 15 '22 15:01 excid3