Expand/Collapse Widget Demo

This is the first example of an expand/collapse widget. Click or press Enter/Space on the title above to expand or collapse this content. The widget uses CSS transitions for smooth animations and ARIA attributes for accessibility.

Accessibility features include proper focus management, keyboard navigation support, and screen reader announcements for expanded/collapsed states.

• Smooth Transitions: Content expands and collapses with CSS transitions for a polished user experience.
• Keyboard Accessible: Users can navigate using Tab, Enter, and Space keys.
• Screen Reader Support: ARIA attributes provide clear state information for assistive technologies.
• Visual Feedback: Hover effects and focus indicators enhance usability.
• Responsive Design: Works well on both desktop and mobile devices.

This example starts in the expanded state. The implementation uses vanilla JavaScript to toggle the aria-expanded attribute and the max-height CSS property for the smooth reveal effect.

Key accessibility considerations include:

• Using role="button" on the header for proper semantic meaning.
• aria-controls linking the button to its controlled content.
• Focus management to ensure keyboard users can interact effectively.
• Proper contrast ratios and readable font sizes.

The widget is fully self-contained and doesn't require external libraries.