Accordion

Accordion displays a panel that the user can expand or collapse to show or hide content and control the complexity of a given view.

Also known as: Collapsible panel, Concertina, Expansion panel

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

For assistive technologies, the visible label on a control usually acts as the accessible name.
- If modifying the accessible name, the accordion's accessible name must include the visible name (the label).
Within a group of accordion headers, all headers should be the same heading level.
- Ensure heading levels align with the overall page hierarchy.
Avoid nested accordions.
- Don't put an accordion in another accordion.

Key	Function
`Tab`	If focus is above the accordion group, Tab moves focus to the first accordion item in the group. Then, each press moves to the next accordion item.
`Shift` + `Tab`	If focus is below the accordion group, this action moves focus to the last accordion item in the group. Then, each press moves focus to the previous accordion item in the group.
`Enter` / `Space`	Accordions are in the collapsed state by default. This action expands, or collapses, accordions.

VoiceOver/Safari on Mac bug: VoiceOver does not report state changes dynamically for Accordion buttons. (This is not a Salt bug)
- Only workaround is to tab away and shift+tab back to this control then it will announce the state.
- This is reproducible in the APG accordion example as well.

For assistive technologies, the visible label on a control usually acts as the accessible name.
- If modifying the accessible name, the accordion's accessible name must include the visible name (the label).
Within a group of accordion headers, all headers should be the same heading level.
- Ensure heading levels align with the overall page hierarchy.
Avoid nested accordions.
- Don't put an accordion in another accordion.

Key	Function
`Tab`	If focus is above the accordion group, Tab moves focus to the first accordion item in the group. Then, each press moves to the next accordion item.
`Shift` + `Tab`	If focus is below the accordion group, this action moves focus to the last accordion item in the group. Then, each press moves focus to the previous accordion item in the group.
`Enter` / `Space`	Accordions are in the collapsed state by default. This action expands, or collapses, accordions.

VoiceOver/Safari on Mac bug: VoiceOver does not report state changes dynamically for Accordion buttons. (This is not a Salt bug)
- Only workaround is to tab away and shift+tab back to this control then it will announce the state.
- This is reproducible in the APG accordion example as well.

For assistive technologies, the visible label on a control usually acts as the accessible name.
- If modifying the accessible name, the accordion's accessible name must include the visible name (the label).
Within a group of accordion headers, all headers should be the same heading level.
- Ensure heading levels align with the overall page hierarchy.
Avoid nested accordions.
- Don't put an accordion in another accordion.

Key	Function
`Tab`	If focus is above the accordion group, Tab moves focus to the first accordion item in the group. Then, each press moves to the next accordion item.
`Shift` + `Tab`	If focus is below the accordion group, this action moves focus to the last accordion item in the group. Then, each press moves focus to the previous accordion item in the group.
`Enter` / `Space`	Accordions are in the collapsed state by default. This action expands, or collapses, accordions.

VoiceOver/Safari on Mac bug: VoiceOver does not report state changes dynamically for Accordion buttons. (This is not a Salt bug)
- Only workaround is to tab away and shift+tab back to this control then it will announce the state.
- This is reproducible in the APG accordion example as well.