Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ianmcburnie opened this issue Mar 21, 2024 · 1 comment
Open
Assignees

Comments

@ianmcburnie
Copy link
Member

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 saiponnada self-assigned this Oct 23, 2024
@saiponnada
Copy link
Contributor

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

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

No branches or pull requests

2 participants