lion
lion copied to clipboard
ing-bank
Accordion incorrect focus handling
Expected behavior
Accordion incorrect focus handling. The focus should jump from header to panel content, before going to the next header. example: https://www.w3.org/WAI/teach-advocate/accessible-presentations/
Actual Behavior
The focus order first goes to all accordion headers, before going into the panels.
Is there any way to make invokers & contents keep their respective DOM order, instead of melting all of them in invoker and content single slots and using CSS order?
That's the root cause of this issue, and it affects focus but also content navigation.
Edit: FWIW, using multiple lion-accordion (each with a single invoker and content) works fine. The only drawback is keyboard navigation with arrows, but as specified in ARIA authoring practices about accordion pattern, those interactions are optional.
Note: Maybe creating an accordion-group around accordions would ease keyboard interactions handling while keeping each accordion standalone, with a dingle invoker and content.
