Focus management when opening ActionMenu
When an ActionMenu is opened, focus moves to the first item in the menu.
action-menu/accessibility
14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Menu navigation with keyboard
Users can move between different menu items and submenus using cursor keys (arrow up, arrow down, arrow left, arrow right).
Close ActionMenu with Tab key
If a keyboard user navigates away from an open ActionMenu using Tab or Shift+Tab, the ActionMenu is closed.
Close ActionMenu with Escape key
An open ActionMenu can be closed using Escape.
Menu item label requirements
Menu items must have a clear and descriptive label. The label is the visible content and will usually be text. The label should be concise and descriptive of the action that will be performed when the menu item is activated.
Icons don't convey meaning to screen readers
When using Octicons for leading and trailing visuals on individual menu items, note that icons don't have any text alternative. They are purely visual and not conveyed to screen readers. Do not rely on these icons alone to convey meaning – make sure that the text label of the menu item provides sufficient meaning and context on its own.
Minimum target size for menu items
Every menu item must have a minimum target size of 24×24 CSS pixels to ensure that the item is large enough to be easily activated by users with motor impairments.
Activate menu item with Space or Enter
The currently focused menu item can be activated using Space or Enter. When a menu item is activated, the ActionMenu is closed and the relevant functionality is executed. In the case of selectable menu items, the focused item is checked/unchecked and the ActionMenu is closed.
Focus return when closing ActionMenu
When the ActionMenu is closed, focus returns to the most logical location in the page – in general, this is the trigger control that originally opened the ActionMenu.
Menu mnemonics keyboard navigation
When a menu is open, hitting a letter key for the first letter in an item to be selected will move focus to that item. If two items have the same first letter, the first item in the list will be focused first, and hitting the letter key again will focus the next item.
Inactive vs disabled menu items
Inactive menu items are still focusable and may execute actions, so they should not be marked as disabled using aria-disabled. Inactive menu items can be activated and need to be able to get focus so screen reader users can read the message about it being inactive. Disabled menu items do not get focus and cannot be activated.
Inactive menu item inactiveText requirement
Include descriptive inactiveText to an inactive menu item to clearly explain the status of the item to all users, particularly screen reader users who won't otherwise be informed of the fact that an item is inactive.
ActionMenu built-in accessibility features
The component handles all aspects of focus management and keyboard interaction. The role ('menu') and structure of the ActionMenu are correctly conveyed to screen readers, including the state of selectable menu items and the correct association of grouped items with their group title/label. Menu items meet the minimum target size requirement of 24px × 24px.
ActionMenu component test requirements
Component tests should verify: the component exposes appropriate role, aria-* attributes, and overall structure (component has role='menu', each item has role='menuitem', 'menuitemcheckbox', or 'menuitemradio', grouped items use role='group' with accessible name); when menu opens focus moves to first item; correct keyboard interactions; menu closes with Esc; menu closes when Tab/Shift+Tab navigates away; menu closes when item selected; focus returns to trigger element when menu closed; disabled items have aria-disabled='true' but receive focus; inactive items receive focus.