search

makeup / makeup-js

Mono-repo for all vanilla JavaScript utility modules and headless ui
https://makeup.github.io/makeup-js
42 stars 10 forks source link

Menu: aria-disabled menu items should still be keyboard focusable #157

Open ianmcburnie opened 7 months ago

ianmcburnie commented 7 months ago

Every menuitem in a menu is focusable, whether or not it is disabled. Indicate a menuitem is disabled by setting aria-disabled="true" on the element with the role.

Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role

Oops, got this wrong. And I remember it being a bit of a pain to re-factor for this in the first place. Oh well!

saiponnada commented 2 weeks ago

The change should be made in the makeup-navigation-emitter. Initially, it appeared sensible to maintain the autoInit: "interactive" setting, used only by the menu, and adopt an alternative option to exclude aria-disabled elements.

However, upon further reading about aria-disabled, removing it entirely might be the best course of action. https://github.com/makeup/makeup-js/blob/master/packages/core/makeup-navigation-emitter/src/index.js#L13

When needing to disable native HTML form controls, developers will need to specify the disabled attribute, as it provides all of the generally expected features of disabling a control by default. However, there can be instances where elements need to be exposed as disabled, but are still available for users to find when navigating via the Tab key. Doing so can improve their discoverability as they will not be removed from the focus order of the web page, as aria-disabled does not change the focusability of such elements, nor will the elements be dimmed by default browser styling, making them easier to read.

Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled