Bug: Custom Container/Accordion component is not accessible and should use native <details>/<summary> elements

[veloz-web]

Describe the bug

The current implementation of the collapsible sidebar navigation uses div elements and custom JavaScript to function as an accordion. This non-semantic approach creates significant accessibility issues.

Assistive technologies, like screen readers, cannot properly interpret the role or state (expanded/collapsed) of these components. This results in a poor user experience for individuals who rely on such technology.

I propose replacing the current div-based implementation with the native HTML

and

elements. This would:

Provide full accessibility out-of-the-box for screen reader and keyboard-only users.

Reduce custom JavaScript and engineering complexity by leveraging native browser behavior.

Align the component with modern web standards and semantic best practices.

Reproduction

Navigate to any page in the VitePress documentation that uses a collapsible container, such as the Vitepress Docs.

Attempt to navigate the sidebar with a screen reader (e.g., VoiceOver, NVDA, JAWS). The screen reader fails to announce it as a collapsible element or communicate its state.

Expected behavior

For sidebar to look and function exactly as it does now but with better accessibility.

System Info

JAWS, NVDA, VOICEOVER

[brc-dd]

It uses a details element. I'm not sure what you're referring to:

Inspect the HTML source of the "More info" block.

There is no "More info" block on the page. There is no "More info" in our whole docs - https://github.com/search?q=repo:vuejs/vitepress+/More+info/&type=code

[veloz-web]

@brc-dd brc-dd
#4847
screenshot shows the component Which is the Sidebar Menu

screenshot is of what is looks after the PR which is the same as before it's purely accessibility thing to be consistent with the pattern you outlined wasn't used everywhere like in the docs.

[brc-dd]

It's the sidebar not custom container.

[veloz-web]

Yes. I fixed the description above, you are correct it is the side bar, the PR has screenshot and it's of the sidebar.

MY apologies leveraged AI to write up the issue after I had the solution and it botched it big time