How do you create accessible interactive components using ARIA roles and states?

Use ARIA roles (e.g., role="button") and states (e.g., aria-expanded, aria-hidden) to make interactive elements accessible to screen readers and ensure they respond correctly to user interaction.

Example:

<button aria-expanded="false" aria-controls="details" id="toggleButton">More Info</button>
<div id="details" aria-hidden="true">Detailed content here.</div>