Expand / Collapse Widgets

Question: What accessibility considerations go into an expand/collapse control?

• Ensure the toggle is a <button> element for keyboard support.
• Use aria-expanded and aria-controls to announce state change.
• Hide the controlled region with the hidden attribute or display: none;.

This widget updates the button text and icon while keeping the controlled content in sync.

1. Plan: Identify what content should stay hidden by default.
2. Trigger: Add a clearly labeled button to toggle visibility.
3. State: Bind JavaScript to update both aria-expanded and the hidden attribute.
4. Animate: Optionally add transitions to enhance the user experience.

Each step becomes visible when the button is activated. Activate again to collapse.