Skip to content
GitLab

Add keyboard support to dropdown.js

Closed Administrator requested to merge github/fork/gerardkcohen/dropdown-keyboard into master

Created by: gerardkcohen

For peer review only: Looking for feedback

This PR adds proper keyboard support to dropdown.js, based on keyboard interaction rules from WAI-ARIA Authoring Practices for Menu

Some highlights:

  • Enter, Space, and Up/ Down Arrow keys will display menu, placing focus on first menu item
  • Up/ Down arrow keys cycle focus through items
  • Tab, Esc, and Left Arrow keys dismiss menu, placing focus back on trigger
  • Letter keys [a-z] cycle focus through items that begin with that letter

Also updated are all dropdown examples to encourage good a11y habits.

Additions:

  • Add role="separator" for divider items
  • Add role="heading" for header items
  • Add aria-disabled="true" to disabled items

Once this has been reviewed, I can add proper unit tests.