Menu button — accessibility

Keyboard

  • Tab reaches the button; Enter / Space opens the menu and focus moves to the first item.
  • Arrow Up / Down, Home and End move between items; Enter activates one, closes the menu and returns focus to the button.
  • Escape closes the menu and returns focus to the button (shared Popover behaviour).

ARIA

  • The button carries aria-haspopup="menu" and aria-expanded; the menu is role="menu" named by the button's label.
  • Items are role="menuitem" (menuitemradio + aria-checked for checked rows); the glyph and a custom mark are decorative, ariaLabel names a row whose label alone is ambiguous.
  • A disabled item with a title is described by it: tooltip + aria-describedby pointing to a visually hidden sibling (outside the button, so it does not join the accessible name). The phone sheet uses the same hidden sibling — no visible second line (owner 28 Sep 2026, ACRM-375–377).
  • Every row carries its full label in title, so a label cut by the ellipsis stays readable on hover; the accessible name is always the full label.
  • A submenu row carries aria-haspopup="menu"; its chevron is aria-hidden. Entering it replaces the rows in the same role="menu" — the back row is a menuitem named by the submenu's label („Zpět" in the phone sheet, whose title names the level). Enter / Space on the submenu row opens the level; Enter on the back row returns.
  • A switch row is role="menuitemcheckbox" with aria-checked; the .acrm-switch drawing is aria-hidden. Activating it keeps the menu open and focus on the row, so the new state is announced.
  • The header (identity block) is not an item: plain content above the first separator, skipped by arrow keys.
  • The keyboard shortcut (.acrm-kbd) is aria-hidden — the label names the action.
  • The empty / loading row is plain text, not an item; a menu holding only it is still role="menu".
  • Icon-only trigger (kebab): the canonical IconButton with aria-label = the required label; the component sets aria-haspopup / aria-expanded, the host never does.
  • With a single item there is no menu: the button carries neither attribute and runs the action directly.

Focus

  • The button draws the foundation focus ring of Button; items use the Popover item focus style.

Contrast

  • Same tokens as Button and Popover; nothing of its own.

Known limits

  • No typeahead (jump to an item by its first letter) — the shared Popover does not provide it.

Source: docs/button/menu-button.a11y.md · GitLab