Collapsible

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<!-- One section. The key is drawn, so it is hidden from a screen reader; the head says the state. -->
<details class="tui-collapsible">
  <summary>
    <span class="tui-collapsible__key" aria-hidden="true"></span>
    <span class="tui-collapsible__title">What changed in 4.2</span>
    <span class="tui-collapsible__meta">3 changes</span>
  </summary>
  <div class="tui-collapsible__body">
    <div class="tui-collapsible__inner">
      <p>Exports run in the background now.</p>
    </div>
  </div>
</details>

import { toggleCollapsible } from '/kit/kit.mjs';

// Opens or closes one from code, easing the close as a press does.
toggleCollapsible(document.querySelector('.tui-collapsible'));      // flip it
toggleCollapsible(details, true);                                   // open it

details.addEventListener('toggle', () => save(details.open));       // native, fires after the close is done

Needs kit.css and kit.mjs. How to install the kit.

• It is a <details> with a <summary>, so a screen reader says “Release notes, collapsed” or “expanded” and the keyboard works with no script and no ARIA.
• The chevron and the key are drawn and hidden from a screen reader, since the head already says the state; the state is also told by the key sitting lower with its chevron turned, so it is not colour.
• Closed text is not in the page for a screen reader or the Tab key, because the browser takes it out, and while it slides away it cannot be pressed.
• Focus is a 2px ring round the whole head. On a phone the head is at least 48px tall and the key grows to 28px, and the whole row is the press.
• Under reduced motion the key and the chevron do not move between states, the text arrives and leaves at once, and nothing is left out.

The head is the accordion’s: a summary that is a row, with the same cap on a skirt that latches below the plate. The key is a separate little box so the chevron on it can turn on its own as the key sinks. The text is a grid whose one row grows from 0fr to 1fr when the section opens; closing runs the same row back with a transition, held by the script for the 200ms it takes before the details element is allowed to hide it.