vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
11.48k stars 1.86k forks source link

sidebar: use native <details> for collapsible groups #3804

Open olets opened 4 weeks ago

olets commented 4 weeks ago

Is your feature request related to a problem? Please describe.

Native <details> elements toggle on click, Enter, and Space.

The Vitepress sidebar collapsible groups toggle on click and Enter but not on Space.

The current behavior will register as "broken" for some users familiar with the native elements' keyboard behavior (✋).

Describe the solution you'd like

Switching the custom setup to native <details> would give them the standard behavior now. It would also reduce the required custom JS, improving maintainability and letting the Vitepress sidebar track any future updates to the native behavior for free.

Describe alternatives you've considered

Modifying the existing implementation to add toggling on Space would close the most obvious divergence from the native.

To me, that is a band-aid. This is an opportunity for improving accessibility. Switching to <details> would improve accessibility (better keyboard behavior, better announcing). Adding a spacebar listener to the existing setup would not.

Additional context

No response

Validations