tailwindcss-stimulus-components
tailwindcss-stimulus-components copied to clipboard
Dropdown: fix accessibility fail
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.
PRs welcome.