Menu focus management vs Aria

[holloway]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.7.23

What browser are you using?

Chrome (but N/A)

Reproduction URL

The Menu demo page demonstrates the bug

Describe your issue

The focus never moves to menu items and focus never moves at all while the menu is open.

ARIA Menu Button says,

Enter: opens the menu and places focus on the first menu item.
Space: Opens the menu and places focus on the first menu item.
(Optional) Down Arrow: opens the menu and moves focus to the first menu item.
The keyboard behaviors needed after the menu is open are described in the Menu and Menubar Pattern Aria: Menu Button

ARIA Menu and Menubar Pattern says,

When focus is in a menu, moves focus to the next item, optionally wrapping from the last to the first. [Aria: Menu and Menubar Pattern ]

Headless UI Menu moves focus to the <MenuItems> container and simulates moving focus by adjusting the active slot of each MenuItem while never actually moving focus.

Browsers have document.activeElement (which points to the currently focused element, generally speaking), so you can run this tiny script:

setInterval(() => {
  const aE = document.activeElement;
  aE.style.outline = 'solid 2px red';
  setTimeout(() => aE.style.outline = '', 500)
}, 1000)

This script will flash a red outline on the focused element so you can clearly see where the focus is.

Try that script on the ARIA examples eg https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/ and you'll see their focus management is different. Or try Reka's Menu. They move focus to the menu items etc.

[RobinMalfait]

Hey!

The Menu, Listbox and Combobox components are currently implemented using the aria-activedescendant pattern instead of the roving tab index where focus is actually moved.

With aria-activedescendant, the browser keeps the DOM focus on the container element or on an input element that controls the container element. However, the user agent communicates desktop focus events and states to the assistive technology as if the element referenced by aria-activedescendant has focus.

Most libraries will typically implement one or the other.

Right now we have no plans on changing this. Are you running into actual issues right now?