Expand/Collapse Widget Demo

This is a custom expand/collapse widget. The button toggles the visibility of this content area. It uses JavaScript to toggle the hidden attribute and the aria-expanded state for accessibility.

The animation is achieved with CSS transitions on the max-height and padding properties. The content is fully keyboard accessible via the Tab and Enter or Space keys.

The widget is built with semantic HTML: a <button> controls a <div>. The aria-controls attribute explicitly links the button to the content it controls.

The aria-expanded attribute on the button is dynamically updated to true when the content is shown and false when it is hidden, providing necessary state information to assistive technologies.

The content container has a details class for styling. It is initially hidden using the HTML5 hidden attribute.

This demo aims to conform to WCAG 2.2 Level AA. Key considerations include:

• Keyboard Operable: All functionality is available using a keyboard.
• Focus Visible: The button has a clear focus indicator.
• Meaningful Sequence: The DOM order matches the visual reading order.
• Labels and Relationships: The button text provides a clear label, and aria-controls defines the relationship.
• Status Changes: The aria-expanded attribute announces state changes to screen readers.