Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Keyboard Navigation for Bootstrap Accordion #41186

Open
2 tasks done
MohamadSalman11 opened this issue Jan 28, 2025 · 1 comment
Open
2 tasks done

Add Keyboard Navigation for Bootstrap Accordion #41186

MohamadSalman11 opened this issue Jan 28, 2025 · 1 comment
Labels

Comments

@MohamadSalman11
Copy link
Contributor

MohamadSalman11 commented Jan 28, 2025

Prerequisites

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

@julien-deramond
Copy link
Member

julien-deramond commented Jan 29, 2025

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants