sl-carousel and sl-carousel-item do not meet accessibility best practice

[doctor-spaceman]

Describe the bug

sl-carousel and sl-carousel-item do not meet accessibility best practice according to MDN resources.

When pagination is enabled:

• role="tabpanel" should be present on each sl-carousel-item.
• id that can be referenced by the aria-controls attribute on each tab should be present on each sl-carousel-item.
• aria-controls should not be present on the pagination part; it should be on each tab element instead, and populated with the corresponding id of each tabpanel.
• id is not present on each tab.
• aria-labelledby should be present on each sl-carousel-item and populated 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.
• 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".

To Reproduce

Steps to reproduce the behavior:

1. Have an sl-carousel component on the page with one or more sl-carousel-items
2. Inspect the carousel with browser dev tools and verify the above issues
3. Use a screen reader to check the announcement of these controls

Browser / OS

• All

Additional information

References:

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

PR

#2353