v145 · Web APIs · Menu Focus Trace

Menu focus trace

A custom keyboard menu that uses focus({focusVisible: true}) only when arrow keys move the focus, and the default focus() when restoring it after dismissal. Watch the focus ring stay honest.

menu

focus log

code

// Chrome 145: focus() accepts { focusVisible: boolean }.
// Force the ring when we know the focus was caused by a keystroke;
// suppress it when we restore focus silently after a click dismissal.

menuItems[0].focus({ focusVisible: true });    // Always show ring
trigger.focus({ focusVisible: false });        // Restore quietly

see also