Use of <details> in Accordion

[mimarz]

Accessible Accordions has long been implemented using div, h*, and a button, as per WAI-ARIA guidelines.

One unfortunate side-effect of using the "traditional" implementation of Accordion is that display:none is often used to hide the collapsed content, which means users can't search for it using the built in browsers search (ctrl+f).

This could be remedied using hidden="until-found", but it lacks browser support.

details is often brought up as a semantic html replacement for this approach, however it lacks good screen-reader support.

Using this issue as an investigate-issue to collect information and decided on potential actions thereof.

Notes

• https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/
• https://www.scottohara.me/blog/2022/09/12/details-summary.html
• https://daverupert.com/2019/12/why-details-is-not-an-accordion/
• https://tldrmarketing.com/tips-tricks/make-your-content-hidden-in-accordion-tabs-available-for-search-engines-with-hiddenuntil-found-attribute/

[eirikbacker]

Using https://u-elements.github.io/u-elements/elements/u-details solves screen reader support, is 1:1 compatible with native details/summary, and implements hidden="until-found" in all browsers that supports this. It is also compatible with, and strongly typed in all major frameworks - even React - as it is building upon the frameworks understanding of native HTML elements ☺️