Testing aria-expanded

Example 1: Static

This button does not respond to interaction. It is included to let you inspect a fixed aria-expanded="true" state.

Expected result: the accessibility tree should show expanded: true for this button, and this never changes.

HTML markup 
<button aria-expanded="true">
  Filters
</button>

Example 2: Interactive

This button starts collapsed. Activate it to toggle aria-expanded between false and true, and to show or hide the content below it.

Expected result: the accessibility tree should show expanded: false initially, and expanded: true once activated. This should toggle back and forth each time the button is activated.

HTML markup 
<button
  id="expand-button"
  aria-expanded="false"
  aria-controls="expand-content"
>
  Filters
</button>
<div id="expand-content" hidden>
  <p>This content is only shown once the button above is expanded.</p>
</div>

Testing home