Skip to content

fix: Moved autoplay button before navigation in DOM order for correct… #2868

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
balco0110 merged 6 commits into from
Apr 24, 2026
+32 −28
Merged

fix: Moved autoplay button before navigation in DOM order for correct… #2868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bdb4022
fix: Moved autoplay button before navigation in DOM order for correct…
balco0110 Mar 19, 2026
f37a6ba
Update full-boats-shop.md
balco0110 Mar 19, 2026
7211acb
chore: moved the autoplay button for screen reader on the top
balco0110 Mar 30, 2026
27ab7e4
chore: revert the changes
balco0110 Mar 31, 2026
da9586b
chore: removed aria-pressed
balco0110 Apr 23, 2026
fec234b
Merge branch 'main' into fix/carousel-autoplay-button-reading-order
balco0110 Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/full-boats-shop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@solid-design-system/components': patch
---

Moved autoplay button in `sd-carousel` before navigation in DOM order for correct screen reader focus sequence
55 changes: 27 additions & 28 deletions packages/components/src/components/carousel/carousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -641,7 +641,33 @@ 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'}
Expand Down Expand Up @@ -801,33 +827,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>
`;
Expand Down
Loading