component-library
component-library copied to clipboard
Focus nested accordions when navigating with keyboard arrow keys
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.
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.