Components
Action List - Design decisions
What is an ADR?
We use the ADR (Architecture Decision Record) to structure design decision documentation. Each ADR covers three things: the context that prompted the decision, the decision itself, and its consequences — including trade-offs and any open questions.
ADR 001 - Teams provide descriptive text for the “Show more” toggle
- Date raised: October 19, 2026
- Decision date: October 23, 2026
Context
The “Show more” toggle read “Show 1 more,” which doesn’t say what it expands. A staging review finding raised this as a failure of WCAG 2.4.4 (Link Purpose). See the
The fix in
Decision
The Action List component must provide a way for teams to add more descriptive text on the “Show more” toggle. Teams should set heading-text to describe the list. Teams should also set expand-button-item-name to a short noun that describes the items, such as claim. The visible toggle label then reads, for example, “Show 4 more claim items,” and assistive technology announces the same text.
Guidance on naming the toggle is on the Action List component page.
The component appends “item” or “items” after the name, so pluralization is reliable.
The team considered three options:
- Add a dedicated prop (chosen). Teams set
expand-button-item-name. - Fall back to the heading. The label would read “Show X more [heading] item(s).” The team rejected this because teams supply their own heading text, so the component can’t assume a heading to borrow.
- Replace the count with “All.” The team rejected this because the count should stay.
Consequences
Positive:
- Users can understand more clearly what the toggle expands.
Negative / watch items:
- Teams that have already implemented the component must revisit it to add the new properties.