Accordion II

Take the basic accordion and give it the ARIA accordion structure that screen readers expect: each header is a real heading containing a button, the button announces its expanded/collapsed state, and each open panel is a region named by its header. Same look and toggle behaviour — but now navigable and understandable with assistive technology.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

The same multi-open accordion, now with heading-wrapped buttons, aria-expanded, and labelled panel regions.

Examples

<h3 class="accordion-heading">
  <button id="header-css" aria-expanded="true" aria-controls="panel-css">CSS</button>
</h3>
<div id="panel-css" role="region" aria-labelledby="header-css">…</div>

- header button: aria-expanded reflects open/closed; aria-controls → panel id
- panel: role="region" + aria-labelledby → header id (so the region is named)

Notes

• Wrap each header button in a heading. A <h3> (with the button inside) lets screen-reader users jump between sections via heading navigation.
• Announce the state. aria-expanded={isOpen} on the button so AT says "expanded" / "collapsed".
• Label the panels. Each open panel is role="region" with aria-labelledby pointing at its header button's id — the region takes the header's name. Pair it with aria-controls (button → panel id).
• Out of scope. Arrow-key navigation between headers — Accordion III. Here it's the roles, states, and properties.