usage
- Use verified UJ content
- Reuse semantic tokens
- Keep business logic in the owning application
Navigation
Accordion
Disclose secondary content using native details behaviour.
Production component
Live preview
This example is rendered from the same package consumed by UJ applications.
What is this component for?
It discloses secondary information without hiding decision-critical content.
How does it work?
It uses native details and summary semantics.
Contract
Usage and quality requirements
The contract keeps purpose, states and ownership visible before a component is reused.
states
- default
- focus-visible
- disabled or unavailable where applicable
- long content
- narrow viewport
- dark theme
purpose
Disclose secondary content using native details behaviour.
responsive
- 320px
- 768px
- 1440px
- 200% text resize
accessibility
- Native semantics first
- WCAG 2.2 AA
- Keyboard and touch operation
- No colour-only meaning