demo · v150

Keyboard Accessibility Test

Navigate the toolbar below using only the keyboard. Tab moves between buttons; Enter or Space opens dropdown menus (popover=auto); hints (popover=hint) appear automatically when an icon button receives focus. In Chrome 150, a focused hint tooltip can appear above an already-open menu without closing the auto stack — both remain accessible at the same time.

Keyboard: Tab to move focus • Enter/Space to open menus • Escape to dismiss • Hints appear on focus automatically

Save document (Ctrl+S)

Search (Ctrl+F)

Settings

Focused elementnone

Active hintnone

Open menu

Hint + Menu—

Keyboard / focus event log

Accessibility checklist — interact with the toolbar to tick items

☐ Focus indicator visible on all toolbar buttons pending
☐ Hint tooltip appears when icon button receives focus pending
☐ Hint tooltip dismissed when focus leaves icon button pending
☐ Menu opens via Enter/Space on File/Edit/View button pending
☐ Hint and menu can be open simultaneously (Chrome 150) pending
☐ Escape closes open menu, returns focus to trigger button pending
☐ aria-expanded updates correctly when menus open/close pending

/* Chrome 150: popover=hint and popover=auto coexist in the top layer.
   A hint shown via focus does not dismiss an already-open auto menu. */

<!-- Toolbar icon button with hint tooltip -->
<button aria-label="Save" aria-describedby="hint-save">💾</button>
<div popover="hint" id="hint-save">Save document (Ctrl+S)</div>

<!-- Menu button with auto dropdown -->
<button popovertarget="menu-file" aria-haspopup="true">File</button>
<div popover="auto" id="menu-file">...</div>

/* In Chrome 150: open menu-file, then Tab to Save icon —
   hint-save appears AND menu-file stays open. Both in top layer. */

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

implementation reference