[menu] Why doesn't Menu focus the first item when opened with a cursor?

[tom-sherman]

From the ARIA menu pattern docs:

When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item.

In Base UI this only happens when opening a menu with keyboard controls. Why is this?

I know many UIs and libraries implement it this way (eg. macos as a notable example, it also works this way in Radix) but I'm wondering if there are specific reasons from the Base UI team to implement it this way as there are valid arguments to say that focusing the first item is more accessible.

Related discussions

• [menu] button is focused when menu is opened #2143
• Dropdown with focus on first element on open radix-ui/primitives#2501
• Menu, and menubar examples do not match descriptions w3c/aria-practices#2206
• [menu] moving keyboard focus into submenus openui/open-ui#1439

[tom-sherman]

I found that while the doc doesn't qualify the behaviour is specific to keyboards, the ARIA example implementation does implement this behaviour for keyboard only https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/

[tom-sherman]

Going off of w3c/aria-practices#2206 it's clear that the current docs only describe keyboard interaction, and mouse interaction is left up to interpretation.

There are less strict requirements for mouse operation because focus setting is less crucial. I think this makes Base UI compliant with the ARIA guidance but I'm interested in hearing other perspectives!

[mj12albert]

macos as a notable example, it also works this way in Radix

It's possible that we did it for parity; React Aria's Menu also behaves the same way: https://react-aria.adobe.com/Menu

[colmtuite]

This came up here recently
#4816 (comment)

The reasons:

• Keyboard activation is a commitment to operate the menu. Pointer activation is often just revealing the menu before the user has chosen where to go. When the user opens by keyboard, focus should enter the composite widget because keyboard users need a focused item to continue. When the user opens by pointer, focus does not need to jump to an arbitrary item because the pointer itself is doing the navigation.
• Automatically moving focus is less relevant for pointer, because it's easier to move focus wherever you want.
• ARIA examples don't move focus when opened via pointer.
• MacOS doesn't move focus when opened via pointer.
• All of the top libs do it this way: Base UI, Radix, React Aria, Ariakit etc.
• The vast majority of major web apps handle it this way too: Facebook, Gmail, Twitter, GitHub, Slack etc.