Collapsible

Role and semantics

Collapsible implements the APG disclosure pattern with Base UI Collapsible. The trigger is a native <button> that carries aria-expanded; while the panel is open it is tied to the panel with aria-controls. The chevron is aria-hidden, so screen readers do not read it.

Keyboard

Key	Behaviour
Tab	Moves focus to the trigger; the next Tab moves into items inside an open panel.
Enter, Space	Opens or closes the panel.

Focus

The trigger shows a 2 px color-focus-ring ring drawn outside with a 2 px offset. The ring appears only on keyboard focus (focus-visible). A disabled trigger does not take focus.

Screen reader output

Example	Read as
Closed panel	“Show details, button, collapsed”
Open panel	“Show details, button, expanded”
Disabled	“Show details, button, dimmed”

A closed panel carries hidden="until-found"; a find in page match opens the panel and makes the content readable.

Contrast

The label uses color-fg-default and keeps at least 4.5:1 contrast against its background. The chevron uses color-icon-subtle at 3:1 or more and is decorative only; the state is also announced through aria-expanded. A disabled label is exempt from the contrast threshold (WCAG 1.4.3).

WCAG 2.2

Criterion	How Collapsible meets it	What the product team must do
1.3.1 Info and relationships	aria-expanded and aria-controls expose the state and the relationship.	Write the label so it describes the content that opens.
1.4.1 Use of colour	The open state is also shown by the chevron turning and by aria-expanded.	Do not tell the states apart by colour alone.
2.1.1 Keyboard	Enter and Space open and close the panel.	Do not add your own key handler to the trigger.
2.4.7 Focus visible	A focus-visible ring on the trigger.	Do not remove the ring.
2.5.8 Target size (minimum)	The trigger is as tall as a text line; the line height keeps the target.	Avoid very short labels and cramped neighbours.
4.1.2 Name, role, value	The name comes from the label, the state from aria-expanded.	Do not leave the label empty.