Carousel accessibility

[doctor-spaceman]

This PR addresses the following (discussion) (issue)

When pagination is enabled:

• Add role="tabpanel" to each sl-carousel-item.
• Add an id to each sl-carousel-item that can be referenced by the aria-controls attribute on each tab.
• Remove aria-controls from the pagination part, adding it to each tab element instead, and populating it with the corresponding id of each tabpanel .
• Add an id to each tab.
• Add aria-labelledby to each sl-carousel-item and populate it with the id of the corresponding tab.
• Tab labelling: The active tab shouldn't have a label saying "Go to slide {{ active slide number }} of {{ total slides }}" because the tab is already focused.

The following items are not addressed, since this would touch translation files.

• Tab labelling: The tablist role already provides the number of tabs in the list, so its not necessary to include this in the label. The labeling could be "Go to Slide 2" which the screen reader would announce as "Go to Slide 2, tab selected 1 of 7".

References:

MDN: tab role
MDN: tab role example
MDN: tab panel role
MDN: tablist role
MDN: aria-controls

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoelace	❌ Failed (Inspect)		Jan 21, 2025 7:41pm