Accordion (Accessible)

Create an accordion with Alpine JS keeping accessibility in mind.

There's no smooth transition as it causes layout recalculations at each frame, therefore it becomes a non-performant animation which is bad for accessibility.

We are making use of <section> as they are region landmarks which allows them to appear for screen readers that support navigation by landmarks. If there are more than 6 accordions on a page, then it's advised to use a <div> instead of a <section> to avoid a lot of region landmarks.