10up / component-library

A library of barebones front-end components built with WordPress and accessibility in mind.
https://baseline.10up.com/
MIT License
58 stars 11 forks source link

Feature/issue 151 focus nested accordions with keyboard navigation #152

Open Manussakis opened 1 year ago

Manussakis commented 1 year ago

Description of the Change

To get more details, please see issue #151.

  1. The deprecated keyboard event property which has been replaced with the key one. (See UIEvent: which property in mdn web docs).
  2. The keydown event listener is now added once, only for the top level accordion area.
  3. When the user navigates with the keyboard, a fresh list with all focusable accordion links is created and passed in to the accessKeyBindings method.
  4. Users can access nested accordion links via keyboard navigation.
  5. New tests have been created.

Alternate Designs

Instead of getting a list with all focusable accordion links every time the user press one of the navigation keys (Arrow Up, Arrow Down, Home, and End), another alternative could be creating this list once, and updating it whenever the user opens/closes any accordion. However, this list is only needed for keyboard navigation, so it doesn't make sense to keep it updated if the user may end up never navigating with the keyboard and, therefore, never using the list.

Benefits

All accordion links will be accessed via keyboard navigation, including the nested ones.

Possible Drawbacks

None that I came across.

Verification Process

  1. Create accordions with nested accordions.
  2. Press the Tab key util one of the accordion links has been focused.
  3. Navigate across accordion links with Arrow Up, Arrow Down, Home, and End keyboard keys.
  4. Pressing the Arrow Down key focus the immediate next accordion link regardless of it is inside a nested accordion or is on the same level of the current focused accordion link.
    • If the current focused accordion link is the last one, the focus moves to the first accordion link.
  5. Pressing the Arrow Up key focus the immediate previous accordion link regardless of it is inside a nested accordion or is on the same level of the current focused accordion link.
    • If the current focused accordion link is the first one, the focus moves to the last accordion link.
  6. Pressing the Home key focus the first accordion link.
  7. Pressing the End key focus the last accordion link.

Checklist:

Applicable Issues

Closes #151

Manussakis commented 1 year ago

@devinle @joesnellpdx This PR is ready for review. There are some issues with the checks and failures with build scripts - please take a look.

Please review and let me know if you have any questions.