[Accessibility]: Global <Menu>: Focus isn't moved to first item when menu is opened

[umpox]

Audit type

Keyboard navigation

User journey audit issue

No response

Problem description

We're having issues when opening menus where it isn't obvious where the focus is, and requires additional steps to select certain items.

For example, see how it isn't immediately obvious in our Menu component from Storybook:

Expected behavior

When opening a menu with a keyboard, the first item should always be focused.

See this example: https://w3c.github.io/aria-practices/examples/menu-button/menu-button-links.html

Additional details

Related issues:

• https://github.com/sourcegraph/sourcegraph/issues/35160
• https://github.com/sourcegraph/sourcegraph/issues/35119
• https://github.com/sourcegraph/sourcegraph/issues/35113

Assigning labels

• Please give this issue an estimate by applying a label like estimate/Xd, where X is the estimated number of days it will take to complete.
• If this issue is specific to a specific Sourcegraph product, please assign the appropriate team label to this issue.
• If this issue will require input from designers in order to complete, please assign the label needs-design.
• If you are confident that this issue should be fixed by GitStart, please assign the label gitstart.

Owner

This issue will be fixed by GitStart. I have assigned the label 'gitstart' and added the assignee 'gitstart-sourcegraph'.

[gitstart-app]

Here is the GitStart Ticket for this issue: https://app.gitstart.com/clients/sourcegraph/tickets/SG-36350

[umpox]

Re-opening this.

We have had to revert due to performance issues when using this change with our rendering logic (https://github.com/sourcegraph/sourcegraph/pull/38298)

Will keep this open and aim to address this problem further.

@gitstart-sourcegraph No need for any immediate action, we'll investigate this further first

[felixfbecker]

Relevant spec:

When a menu opens, keyboard focus is placed on the first menu item. To be keyboard accessible, you need to manage focus for all descendants: all menu items within the menu are focusable. The menu button which opens the menu and the menu items, rather than the menu itself, are the focusable elements.