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

[claviska]

Sorry, I had to revert this PR. I fixed the missing param in localize and made eslint happy, but there were a number of failing tests. Even after updating them, the bulit-in axe test failed.

If you'd like to submit a fresh PR, we can look at it together to get it over the finish line.

[doctor-spaceman]

Sorry, I had to revert this PR. I fixed the missing param in localize and made eslint happy, but there were a number of failing tests. Even after updating them, the bulit-in axe test failed.

If you'd like to submit a fresh PR, we can look at it together to get it over the finish line.

Sorry about that! Happy to do so. Can you point me at any details for the failed test?

[doctor-spaceman]

New PR