Carousel accessibility

[doctor-spaceman]

This PR addresses the following (#2303) (#2352)

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	✅ Ready (Inspect)	Visit Preview	Feb 14, 2025 6:10pm

[doctor-spaceman]

This PR fails the accessibility test:

Invalid ARIA attribute value: aria-controls="slide-1"

I'm not sure why the value is considered invalid, unless the slide doesn't exist in the DOM or doesn't have its id set by the time this test runs.

[claviska]

Yep, that's the test I saw failing. If the changes can be manually verified in screen readers, I'm OK with relaxing the rule as it could indeed be related to timing.

In the test file, this should do the trick:

await expect(el).to.be.accessible({ ignoredRules: ['aria-valid-attr-value'] });

[doctor-spaceman]

@claviska I tested with a screen reader enabled and the announcements were correct, so I've added the line you referenced.