diff --git a/.changeset/slick-lands-fail.md b/.changeset/slick-lands-fail.md new file mode 100644 index 0000000000..441d7dc93c --- /dev/null +++ b/.changeset/slick-lands-fail.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/components': patch +--- + +Added accessible names for `start`/`stop` autoplay button in `sd-carousel` diff --git a/packages/components/src/components/carousel/carousel.ts b/packages/components/src/components/carousel/carousel.ts index d4d9d538a6..a4c438f3eb 100644 --- a/packages/components/src/components/carousel/carousel.ts +++ b/packages/components/src/components/carousel/carousel.ts @@ -364,10 +364,8 @@ export default class SdCarousel extends SolidElement { handlePausedAutoplay() { if (this.pausedAutoplay) { this.autoplayController.stop(); - this.autoplayControls?.setAttribute('aria-pressed', 'false'); } else if (this.autoplay) { this.autoplayController.start(3000); - this.autoplayControls?.setAttribute('aria-pressed', 'true'); } } @@ -811,7 +809,9 @@ export default class SdCarousel extends SolidElement { !this.autoplay && '!hidden' )} part="autoplay-controls" - aria-label="${this.localize.term('autoplay')}" + aria-label="${this.pausedAutoplay + ? this.localize.term('startAutoplay') + : this.localize.term('stopAutoplay')}" aria-pressed="true" @click=${(e: MouseEvent) => { this.pausedAutoplay = !this.pausedAutoplay; diff --git a/packages/components/src/translations/de.ts b/packages/components/src/translations/de.ts index ae3dc8a38a..c49a3e95df 100644 --- a/packages/components/src/translations/de.ts +++ b/packages/components/src/translations/de.ts @@ -68,7 +68,9 @@ const translation: Translation = { showMore: 'Mehr anzeigen', showPassword: 'Passwort anzeigen', slideNum: (slide, count) => `Folie ${slide} von ${count}`, + startAutoplay: 'Automatische Wiedergabe starten', startDateSelected: 'Startdatum ausgewählt', + stopAutoplay: 'Automatische Wiedergabe stoppen', tagsSelected: 'Optionen ausgewählt', toggleColorFormat: 'Farbformat umschalten', transcriptIsOpen: 'Transkript ist offen', diff --git a/packages/components/src/translations/en.ts b/packages/components/src/translations/en.ts index b229d8f913..e880304493 100644 --- a/packages/components/src/translations/en.ts +++ b/packages/components/src/translations/en.ts @@ -68,7 +68,9 @@ const translation: Translation = { showMore: 'Show more', showPassword: 'Show password', slideNum: (slide, count) => `Slide ${slide} of ${count}`, + startAutoplay: 'Start Automatic Playback', startDateSelected: 'Start date selected', + stopAutoplay: 'Stop Automatic Playback', tagsSelected: 'Options selected', toggleColorFormat: 'Toggle color format', transcriptIsOpen: 'Transcript is open', diff --git a/packages/components/src/utilities/localize.ts b/packages/components/src/utilities/localize.ts index 3066138c09..df4bb30d4c 100644 --- a/packages/components/src/utilities/localize.ts +++ b/packages/components/src/utilities/localize.ts @@ -131,7 +131,9 @@ export interface Translation extends DefaultTranslation { showMore: string; showPassword: string; slideNum: (slide: number, count: number) => string; + startAutoplay: string; startDateSelected: string; + stopAutoplay: string; tagsSelected: string; toggleColorFormat: string; transcriptIsOpen: string;