From 4b4fbdf472a6361575c2e697953ff35346d9ebc7 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Fri, 20 Mar 2026 10:52:19 +0100 Subject: [PATCH 1/7] fix: added accessible names for start/stop autoplay button --- .changeset/slick-lands-fail.md | 5 +++++ packages/components/src/components/carousel/carousel.ts | 4 +++- packages/components/src/translations/de.ts | 2 ++ packages/components/src/translations/en.ts | 1 + packages/components/src/utilities/localize.ts | 2 ++ 5 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 .changeset/slick-lands-fail.md diff --git a/.changeset/slick-lands-fail.md b/.changeset/slick-lands-fail.md new file mode 100644 index 0000000000..52b88de0d6 --- /dev/null +++ b/.changeset/slick-lands-fail.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/components': patch +--- + +Added accesible 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..27ecc055b8 100644 --- a/packages/components/src/components/carousel/carousel.ts +++ b/packages/components/src/components/carousel/carousel.ts @@ -811,7 +811,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..b3762f5e88 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 Diashow started', startDateSelected: 'Startdatum ausgewählt', + stopAutoplay: 'Automatische Diashow 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..fbf55e7c7f 100644 --- a/packages/components/src/translations/en.ts +++ b/packages/components/src/translations/en.ts @@ -69,6 +69,7 @@ const translation: Translation = { showPassword: 'Show password', slideNum: (slide, count) => `Slide ${slide} of ${count}`, startDateSelected: 'Start date selected', + stopAutoplay: 'Stop Automatic Slide Show', 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; From bc2fe26857cb623b1e47b9a83d28ec2d10503993 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 31 Mar 2026 14:24:26 +0200 Subject: [PATCH 2/7] chore: fixed the announcement of the autoplay button --- packages/components/src/components/carousel/carousel.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/components/src/components/carousel/carousel.ts b/packages/components/src/components/carousel/carousel.ts index 27ecc055b8..c1c5b25918 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'); } } @@ -814,7 +812,6 @@ export default class SdCarousel extends SolidElement { aria-label="${this.pausedAutoplay ? this.localize.term('startAutoplay') : this.localize.term('stopAutoplay')}" - aria-pressed="true" @click=${(e: MouseEvent) => { this.pausedAutoplay = !this.pausedAutoplay; if (e.detail) { From ba1656afb4a07cadea8547d8d8dc8db716828039 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Fri, 17 Apr 2026 12:26:14 +0200 Subject: [PATCH 3/7] chore: update the german translations --- packages/components/src/translations/de.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/translations/de.ts b/packages/components/src/translations/de.ts index b3762f5e88..c49a3e95df 100644 --- a/packages/components/src/translations/de.ts +++ b/packages/components/src/translations/de.ts @@ -68,9 +68,9 @@ const translation: Translation = { showMore: 'Mehr anzeigen', showPassword: 'Passwort anzeigen', slideNum: (slide, count) => `Folie ${slide} von ${count}`, - startAutoplay: 'Automatische Diashow started', + startAutoplay: 'Automatische Wiedergabe starten', startDateSelected: 'Startdatum ausgewählt', - stopAutoplay: 'Automatische Diashow stoppen', + stopAutoplay: 'Automatische Wiedergabe stoppen', tagsSelected: 'Optionen ausgewählt', toggleColorFormat: 'Farbformat umschalten', transcriptIsOpen: 'Transkript ist offen', From ef78dfebce5eb014eeb66ebf3f08efbbc1d0ef76 Mon Sep 17 00:00:00 2001 From: Blagoja Mojsoski <55854229+balco0110@users.noreply.github.com> Date: Tue, 21 Apr 2026 08:34:36 +0200 Subject: [PATCH 4/7] Update .changeset/slick-lands-fail.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sérgio Fonseca <42741644+smfonseca@users.noreply.github.com> --- .changeset/slick-lands-fail.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/slick-lands-fail.md b/.changeset/slick-lands-fail.md index 52b88de0d6..441d7dc93c 100644 --- a/.changeset/slick-lands-fail.md +++ b/.changeset/slick-lands-fail.md @@ -2,4 +2,4 @@ '@solid-design-system/components': patch --- -Added accesible names for start/stop autoplay button in `sd-carousel` +Added accessible names for `start`/`stop` autoplay button in `sd-carousel` From 198ba7d20a7402de1f8ac9a4e2ae8a4ffe8d5101 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 21 Apr 2026 13:02:27 +0200 Subject: [PATCH 5/7] chore: changed the english translation to start/stop Automatic Playback --- packages/components/src/translations/en.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/translations/en.ts b/packages/components/src/translations/en.ts index fbf55e7c7f..e880304493 100644 --- a/packages/components/src/translations/en.ts +++ b/packages/components/src/translations/en.ts @@ -68,8 +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 Slide Show', + stopAutoplay: 'Stop Automatic Playback', tagsSelected: 'Options selected', toggleColorFormat: 'Toggle color format', transcriptIsOpen: 'Transcript is open', From 3d7778b1743065d8b92abd83421ae96d99ad4d35 Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Tue, 21 Apr 2026 14:23:44 +0200 Subject: [PATCH 6/7] chore: revert the aria-pressed --- packages/components/src/components/carousel/carousel.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/src/components/carousel/carousel.ts b/packages/components/src/components/carousel/carousel.ts index c1c5b25918..3068e33b3f 100644 --- a/packages/components/src/components/carousel/carousel.ts +++ b/packages/components/src/components/carousel/carousel.ts @@ -364,8 +364,10 @@ 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'); } } @@ -812,6 +814,7 @@ export default class SdCarousel extends SolidElement { aria-label="${this.pausedAutoplay ? this.localize.term('startAutoplay') : this.localize.term('stopAutoplay')}" + aria-pressed="${!this.pausedAutoplay}" @click=${(e: MouseEvent) => { this.pausedAutoplay = !this.pausedAutoplay; if (e.detail) { From 4cd6a7aba6a0d704e33e7d7b81958032250d4cdf Mon Sep 17 00:00:00 2001 From: "Mojsoski, Blagoja (UIS)" Date: Wed, 22 Apr 2026 12:04:34 +0200 Subject: [PATCH 7/7] chore: set the aria pressed to true --- packages/components/src/components/carousel/carousel.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/components/carousel/carousel.ts b/packages/components/src/components/carousel/carousel.ts index 3068e33b3f..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'); } } @@ -814,7 +812,7 @@ export default class SdCarousel extends SolidElement { aria-label="${this.pausedAutoplay ? this.localize.term('startAutoplay') : this.localize.term('stopAutoplay')}" - aria-pressed="${!this.pausedAutoplay}" + aria-pressed="true" @click=${(e: MouseEvent) => { this.pausedAutoplay = !this.pausedAutoplay; if (e.detail) {