twbs
Add Keyboard Navigation for Bootstrap Accordion
Prerequisites
- [x] I have searched for duplicate or closed feature requests
- [x] I have read the contributing guidelines
Proposal
It would be great if Bootstrap's accordion component supported keyboard navigation, allowing users to navigate between sections using the arrow keys (up/down), just like the dropdown component. If this sounds good, I can try it out.
CodePen example that I found: Accordion with keyboard navigation Of course, the implementation can vary; this is just a demonstration of the idea.
Documentation: components/accordion
Motivation and context
This would make the accordion more accessible and improve user experience, especially for keyboard-only users
Referring to the ARIA Authoring Practices Guide (APG) - Accordion Pattern - Keyboard Interaction, it seems that the Down, Up, Home, and End keys are optional.
At one point, we considered using <details><summary> elements for accordions (either as a replacement or a variant), but these elements don't appear to support those keys (see MDN's note on multiple named disclosure boxes).
I don't have a strong opinion on this feature at the moment, but it might be worth checking how other libraries and design systems handle it. @patrickhlauke, do you have any thoughts on whether we should pursue this?
tab and enter works for these, as it does for the rest of the collapse examples as far as I know. I don't think we should do keyboard arrows unless there's an overwhelming push for that.
