Skip to content

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

Description

@conflma

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions