10up / component-library

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

Focus nested accordions when navigating with keyboard arrow keys #151

Open Manussakis opened 1 year ago

Manussakis commented 1 year ago

Is your feature request related to a problem? Please describe. Navigating with keyboard arrow keys (up/down) skip nested accordions.

Describe the solution you'd like In the image below, the focus is on the "Accordion Header 3 with Nested Accordion" link. Pressing the arrow down key on the keyboard should focus the "Nested Accordion Header 1” instead of “Accordion Header 4” link. image

Describe alternatives you've considered In order to fix it, a list with all visible accordion links should be updated on every user interaction (open/close accordions) regardless of whether they are nested or not. The accessKeyBindings method, already present in the codebase, should take care of focusing the correct link once this list is passed in as a parameter.