Examples
FAQ / Disclosure standard
Public FAQ and disclosure content should use native `<details>/<summary>` so the experience works with and without JavaScript.
Shared FAQ pattern component
Why use native details/summary?
It removes JS/hydration dependency for basic disclosure behavior and improves no-JS resilience.
What should be checked after migration?
Expand/collapse behavior in JS browsers, no-JS readability, and visual spacing consistency.
When is a custom accordion acceptable?
Avoid it for public FAQ/disclosure content unless there is a documented, reviewed exception.
Validation checklist
- JS on: disclosures expand/collapse and chevron alignment remains correct.
- JS off: content is still accessible and no hydration mismatch blocks interaction.
- Verify keyboard support (Enter/Space on summary) and focus visibility.
- Confirm no duplicate fallback content blocks were left behind from prior migrations.