search

zcjess / Ecoach-accessibility-issues

1 stars 0 forks source link

Menu buttons and menu #11

Open zcjess opened 1 year ago

zcjess commented 1 year ago
image
  1. The element with role button has aria-haspopup set to either menu or true.
  2. When the menu is displayed, the element with role button has aria-expanded set to true. When the menu is hidden, it is recommended that aria-expanded is not present. If aria-expanded is specified when the menu is hidden, it is set to false.

Keyboard interaction:

  1. With focus on the button: Enter: opens the menu and places focus on the first menu item. Space: Opens the menu and places focus on the first menu item.
image
  1. A parent menuitem has aria-haspopup set to either menu or true.
  2. A parent menuitem has aria-expanded set to false when its child menu is not visible and set to true when the child menu is visible.
  3. An element with role menu either has: 1）aria-labelledby set to a value that refers to the menuitem or button that controls its display. 2）A label provided by aria-label.

Keyboard:

  1. down arrow: When focus is in a menu, moves focus to the next item, optionally wrapping from the last to the first.
  2. up arrow: When focus is in a menu, moves focus to the previous item, optionally wrapping from the first to the last.
  3. right arrow: When focus is in a menubar, moves focus to the next item, optionally wrapping from the last to the first.
  4. left arrow: When focus is in a menubar, moves focus to the previous item, optionally wrapping from the first to the last.