Collapsible and Accordion primitives to use details and summary tags

[yoonthegoon]

Feature request

Overview

• I'd like to see collapsible and accordion make use of the details and summaries tags.
• At the very least, accordion should not use h3 in its trigger.

Who does this impact? Who is this for?

• Users with JavaScript disabled would still be able to view content.
• Better use of semantic HTML for more accessibility.

Additional context

MDN Glossary - Accessible description

Here's a quick thing I was able to pull together:

Screen.Recording.2025-04-01.at.19.12.12.mov

It's not perfect, but it's good enough to prove that those tags can be styled.

Relevant issues

• Accordion uses <details> and <summary> markup #2738
• Support "Find on page" in Collapsible even when content is collapsed #2338
• [Collapsible][Accordion] Making collapsed content accessible with hidden=until-found #1660

[yoonthegoon]

I can better tackle this issue this weekend if you need assistance.

[kotAPI]

At the very least, accordion should not use h3 in its trigger.

I'd like to see collapsible and accordion make use of the details and summaries tags.

We can overcome this using the asChild prop no?