From bdb402202702b828b3d149d38159a2991fc84b72 Mon Sep 17 00:00:00 2001
From: "Mojsoski, Blagoja (UIS)" <mojsoski93@gmail.com>
Date: Thu, 19 Mar 2026 13:36:31 +0100
Subject: [PATCH 1/5] fix: Moved autoplay button before navigation in DOM order
 for correct screen reader focus sequence

---
 .changeset/full-boats-shop.md                 |  5 ++
 .../src/components/carousel/carousel.ts       | 55 ++++++++++---------
 2 files changed, 33 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/full-boats-shop.md

diff --git a/.changeset/full-boats-shop.md b/.changeset/full-boats-shop.md
new file mode 100644
index 0000000000..5cb1be770a
--- /dev/null
+++ b/.changeset/full-boats-shop.md
@@ -0,0 +1,5 @@
+---
+'@solid-design-system/components': patch
+---
+
+Moved autoplay button before navigation in DOM order for correct screen reader focus sequence
diff --git a/packages/components/src/components/carousel/carousel.ts b/packages/components/src/components/carousel/carousel.ts
index a4c438f3eb..26c7205fc5 100644
--- a/packages/components/src/components/carousel/carousel.ts
+++ b/packages/components/src/components/carousel/carousel.ts
@@ -670,6 +670,34 @@ export default class SdCarousel extends SolidElement {
         </div>
 
         <div part="controls" class=${cx('w-full flex items-center justify-center relative')}>
+          <button
+            class=${cx(
+              'ml-6 !rounded-sm',
+              '!absolute !right-0 sd-interactive',
+              this.inverted ? 'sd-interactive--inverted' : 'sd-interactive--reset',
+              !this.autoplay && '!hidden'
+            )}
+            part="autoplay-controls"
+            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) {
+                this.autoplayControls.blur();
+              }
+            }}
+          >
+            <slot name="autoplay-start" class=${cx(!this.pausedAutoplay ? 'hidden' : '')}>
+              <sd-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-icon>
+            </slot>
+
+            <slot name="autoplay-pause" class=${cx(this.pausedAutoplay ? 'hidden' : '')}>
+              <sd-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-icon>
+            </slot>
+          </button>
+
           <div part="navigation" class=${cx('carousel__navigation flex items-center justify-center')}>
             <button
               part="navigation-button navigation-button--previous"
@@ -801,33 +829,6 @@ export default class SdCarousel extends SolidElement {
               </slot>
             </button>
           </div>
-          <button
-            class=${cx(
-              'ml-6 !rounded-sm',
-              '!absolute !right-0 sd-interactive',
-              this.inverted ? 'sd-interactive--inverted' : 'sd-interactive--reset',
-              !this.autoplay && '!hidden'
-            )}
-            part="autoplay-controls"
-            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) {
-                this.autoplayControls.blur();
-              }
-            }}
-          >
-            <slot name="autoplay-start" class=${cx(!this.pausedAutoplay ? 'hidden' : '')}>
-              <sd-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-icon>
-            </slot>
-
-            <slot name="autoplay-pause" class=${cx(this.pausedAutoplay ? 'hidden' : '')}>
-              <sd-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-icon>
-            </slot>
-          </button>
         </div>
       </div>
     `;

From f37a6baf056aee7c991acafd5ce2789349d1c5bc Mon Sep 17 00:00:00 2001
From: Blagoja Mojsoski <55854229+balco0110@users.noreply.github.com>
Date: Thu, 19 Mar 2026 13:40:34 +0100
Subject: [PATCH 2/5] Update full-boats-shop.md

---
 .changeset/full-boats-shop.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/full-boats-shop.md b/.changeset/full-boats-shop.md
index 5cb1be770a..0b85c471f4 100644
--- a/.changeset/full-boats-shop.md
+++ b/.changeset/full-boats-shop.md
@@ -2,4 +2,4 @@
 '@solid-design-system/components': patch
 ---
 
-Moved autoplay button before navigation in DOM order for correct screen reader focus sequence
+Moved autoplay button in `sd-carousel` before navigation in DOM order for correct screen reader focus sequence

From 7211acb0dbafeedf495e09e5f3824b6cf606ffd7 Mon Sep 17 00:00:00 2001
From: "Mojsoski, Blagoja (UIS)" <mojsoski93@gmail.com>
Date: Mon, 30 Mar 2026 16:05:58 +0200
Subject: [PATCH 3/5] chore: moved the autoplay button for screen reader on the
 top

---
 .../src/components/carousel/carousel.ts       | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/packages/components/src/components/carousel/carousel.ts b/packages/components/src/components/carousel/carousel.ts
index 26c7205fc5..f56301a190 100644
--- a/packages/components/src/components/carousel/carousel.ts
+++ b/packages/components/src/components/carousel/carousel.ts
@@ -641,7 +641,35 @@ export default class SdCarousel extends SolidElement {
     const isLtr = this.localize.dir() === 'ltr';
 
     return html`
-      <div part="base" class=${cx(`carousel h-full w-full`)}>
+      <div part="base" class=${cx(`carousel h-full w-full relative`)}>
+        <button
+          class=${cx(
+            'ml-6 !rounded-sm',
+            '!absolute !bottom-0 !right-0 sd-interactive',
+            this.inverted ? 'sd-interactive--inverted' : 'sd-interactive--reset',
+            !this.autoplay && '!hidden'
+          )}
+          part="autoplay-controls"
+          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) {
+              this.autoplayControls.blur();
+            }
+          }}
+        >
+          <slot name="autoplay-start" class=${cx(!this.pausedAutoplay ? 'hidden' : '')}>
+            <sd-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-icon>
+          </slot>
+
+          <slot name="autoplay-pause" class=${cx(this.pausedAutoplay ? 'hidden' : '')}>
+            <sd-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-icon>
+          </slot>
+        </button>
+
         <div
           class="carousel__announcement sr-only"
           aria-live=${!this.autoplay || this.pausedAutoplay || this.isFocused ? 'polite' : 'off'}
@@ -670,34 +698,6 @@ export default class SdCarousel extends SolidElement {
         </div>
 
         <div part="controls" class=${cx('w-full flex items-center justify-center relative')}>
-          <button
-            class=${cx(
-              'ml-6 !rounded-sm',
-              '!absolute !right-0 sd-interactive',
-              this.inverted ? 'sd-interactive--inverted' : 'sd-interactive--reset',
-              !this.autoplay && '!hidden'
-            )}
-            part="autoplay-controls"
-            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) {
-                this.autoplayControls.blur();
-              }
-            }}
-          >
-            <slot name="autoplay-start" class=${cx(!this.pausedAutoplay ? 'hidden' : '')}>
-              <sd-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-icon>
-            </slot>
-
-            <slot name="autoplay-pause" class=${cx(this.pausedAutoplay ? 'hidden' : '')}>
-              <sd-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-icon>
-            </slot>
-          </button>
-
           <div part="navigation" class=${cx('carousel__navigation flex items-center justify-center')}>
             <button
               part="navigation-button navigation-button--previous"

From 27ab7e4a5d06d16600309cbe7cbdee8835dc55ca Mon Sep 17 00:00:00 2001
From: "Mojsoski, Blagoja (UIS)" <mojsoski93@gmail.com>
Date: Tue, 31 Mar 2026 14:22:11 +0200
Subject: [PATCH 4/5] chore: revert the changes

---
 packages/components/src/components/carousel/carousel.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/components/carousel/carousel.ts b/packages/components/src/components/carousel/carousel.ts
index f56301a190..a33e1e3ef1 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');
     }
   }
 

From da9586b6976c66f8a8d2af5e5c6495a7dc6e615c Mon Sep 17 00:00:00 2001
From: "Mojsoski, Blagoja (UIS)" <mojsoski93@gmail.com>
Date: Thu, 23 Apr 2026 10:50:47 +0200
Subject: [PATCH 5/5] chore: removed aria-pressed

---
 packages/components/src/components/carousel/carousel.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/components/src/components/carousel/carousel.ts b/packages/components/src/components/carousel/carousel.ts
index a33e1e3ef1..30ba449337 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');
     }
   }
 
@@ -652,9 +650,7 @@ export default class SdCarousel extends SolidElement {
             !this.autoplay && '!hidden'
           )}
           part="autoplay-controls"
-          aria-label="${this.pausedAutoplay
-            ? this.localize.term('startAutoplay')
-            : this.localize.term('stopAutoplay')}"
+          aria-label="${this.pausedAutoplay ? this.localize.term('startAutoplay') : this.localize.term('stopAutoplay')}"
           aria-pressed="true"
           @click=${(e: MouseEvent) => {
             this.pausedAutoplay = !this.pausedAutoplay;