diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte index a4543746..b71930b6 100644 --- a/src/components/BeforeAfter/BeforeAfter.svelte +++ b/src/components/BeforeAfter/BeforeAfter.svelte @@ -61,6 +61,8 @@ * Optional snippet for a custom caption. */ caption?: Snippet; + /** Custom ARIA label language to label the slider. */ + sliderAriaLabel?: string; } let { @@ -81,6 +83,7 @@ beforeOverlay, afterOverlay, caption, + sliderAriaLabel = 'Stacked before and after images with an adjustable slider', }: Props = $props(); /** DOM nodes are undefined until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation. @@ -203,7 +206,7 @@ ontouchstart={start} onmousedown={start} bind:this={figure} - aria-labelledby={caption ? `${id}-caption` : undefined} + aria-label={sliderAriaLabel} >