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

Allow arrow key navigation on aria-disabled elements #61

Merged
merged 5 commits into from
Oct 24, 2022

Conversation

khiga8
Copy link
Contributor

@khiga8 khiga8 commented Oct 21, 2022

Updates

This PR makes updates to ensure that aria-disabled menu items are arrow-key navigable.

We discovered that a menuitem with aria-disabled="true" cannot currently be accessed with arrow key navigation, and can only be accessed through tab navigation. Even with aria-disabled="true", the menu item should be reachable with arrow key navigation.

In the following video, I navigate through an example I've added to index.html with a menu item that includes aria-disabled="true". I am able to navigate through it using arrow key nav.

Screen.recording.of.navigating.aria-disabled.true.mov

Context

From our internal accessibility slack thread regarding disabled menu items:

If used, disabled controls must be user-addressable if they make up a set. Think items in menus, buttons on a toolbar, radios in a group, etc. If users hear, "1 of 10", they hit Down Arrow and are then told they've jumped over some items, that's more confusing and frustrating than encountering the disabled items.

Relevant links

@khiga8 khiga8 changed the title Allow arrow key navigation on aria-disabled and disabled elements Allow arrow key navigation on aria-disabled elements Oct 21, 2022
@khiga8 khiga8 force-pushed the kh-arrow-key-aria-disabled branch from 34a6b1a to 271d1d6 Compare October 24, 2022 13:36
@khiga8 khiga8 marked this pull request as ready for review October 24, 2022 13:36
@khiga8 khiga8 requested a review from a team as a code owner October 24, 2022 13:36
@primer-css
Copy link

👋 Hello and thanks for pinging us! This issue or PR has been added to our inbox and a Design Infrastructure first responder will review it soon.

  • 🎨 If this is a PR that includes a visual change, please make sure to add screenshots in the description or deploy this code to a lab machine with instructions for how to test.
  • If this is a PR that includes changes to an interaction, please include a video recording in the description.
  • ⚠️ If this is urgent, please visit us in #primer on Slack and tag the first responders listed in the channel topic.

@khiga8 khiga8 merged commit 4719f8c into main Oct 24, 2022
@khiga8 khiga8 deleted the kh-arrow-key-aria-disabled branch October 24, 2022 18:52
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.

3 participants