Skip to main content

Demo

  • The menu can be revealed by clicking the button, or by focusing the button and pressing enter / space
  • When the menu is revealed, the first menu item is automatically focused
  • Once focus is in the menu…
    • The up / down arrow keys allow for navigation through the menu items (including wrapping from first to last and vice versa)
    • Pressing tab will close the menu and move the focus to the next focusable element
    • Pressing shift-tab will close the menu and move the focus to the previous focusable element
    • Pressing escape will close the menu and return the focus to the button
    • Pressing enter or space will activate that item and close the menu (whether it’s a link or has a click handler attached)
    • Pressing any other character will move to the first menu item that starts with that character, if there is not a matching item, focus remains the same