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:
aria-controls defines the relationship.aria-expanded attribute announces state changes to screen readers.