Add accordion group to default theme

[ArthurFlag]

I was looking at Mintlify and they offer an accordion group component, which I'd find useful to also have in Docusaurus.

It'd be easy to create a custom component for this, but if it's simple then I thought why not ask for this component to be added to the core?

[OzakIOne]

There is the native HTML element detail and summary which are a bit like the accordion, but does not have the group feature https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Here is a sandbox demo on how to do the "group" style feature

https://stackblitz.com/edit/github-b1xfh1?file=docs%2Fintro.mdx,src%2Fcss%2Fcustom.css

[slorber]

They almost have the group feature now, just missing Firefox implementation:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#multiple_named_disclosure_boxes
https://caniuse.com/mdn-html_elements_details_name

For that reason I don't think we need to implement an Accordion component: it's already provided by the platform and in most case can be considered a progressive enhancement? (ie if it doesn't work in Firefox for a few months, is it a big deal?)

In any case the implementation should rather use <details><summary> for accessibility reason. Notably, using ctrl+f should allow searching in folded sections, a behavior natively implemented by the platform (see bug #10055)

I'm likely to reimplement our details/summary wrappers to solve the bug and provide support for the new name prop.

Now any other implementation can be done using custom React components. If you think a component would be useful in core, the best is to build it first in userland, and then show us that component in your production website.