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.

[clxmpfeffermann]

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.

It is probably invalid because the elements reference each other across the shadow DOM boundary. The slide item in the light DOM references the button which is in the shadow DOM, and vice versa. Afaik this is not supported. The default screen reader on Windows does not recognize the tabs pattern in the sl-carousel.

Plus, there are duplicate global IDs on the slide items, which triggered accessibility warnings on my end.

---

Edit:

I found a possible solution: aria mixin attributes. This is a new browser feature that allows setting aria-relations in JS via object references instead of ID-strings:

// Old
tabpanel1.setAttribute('aria-labelledby', 'tab-1');
tab1.setAttribute('aria-controls', 'tabpanel-1');

// New
tabpanel1.ariaLabelledByElements = [tab1];
tab1.ariaControlsElements  = [tabpanel1];

It is a very recent feature, so I am not sure how well this is supported by browsers and screen readers.

References:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabelledByElements
• https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaControlsElements
• https://w3c.github.io/aria/#dom-ariamixin-arialabelledbyelements