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

Select / highlight first item, that is not disabled when using arrow keys to open the menu #1593

Open
conflma opened this issue Apr 3, 2024 · 0 comments

Comments

@conflma
Copy link

conflma commented Apr 3, 2024

Problem

Whilst #1591 fixes the problem, that disabled items could be selected when opening the menu with the arrow keys (described in #1587 and #1295), it would be nice from a UX / a11y perspective to select the first item that is NOT disabled.

Currently, if either the first or the last item is disabled and the menu is triggered with ArrowUp / ArrowDown only the menu itself opens, but no highlighting / jumping into the menu itself happens.

Sandbox: https://codesandbox.io/p/sandbox/morning-morning-326kwz

This is especially confusing, when the last item in the menu is disabled and one presses ArrowUp. The menu opens, but the user is only able to see the items at the top of the menu.

Suggestions / Feature Requests

  • When pressing ArrowDown and the first item(s) in the menu is (are) disabled, traverse down the items until the first item that is not disabled is found and highlight / select it (aria-selected="true")
  • When pressing ArrowUp and the last item(s) in the menu is (are) disabled, traverse up the items until the fist item that is not disabled is found and highlight / select it (aria-selected="true")
  • When no item can be highlighted / selected (because all are disabled) just simple open up the menu.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants