fix: add missing aria-disabled on the whole slider when disabled

AmadeusITGroup · Feb 14, 2024 · 5379579 · 5379579
1 parent 6affbb1
commit 5379579
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 4 deletions.
diff --git a/angular/lib/src/components/slider/slider.component.ts b/angular/lib/src/components/slider/slider.component.ts
@@ -23,6 +23,7 @@ import {take} from 'rxjs';
 		class: `au-slider`,
 		'[class]': '(state().vertical ? "au-slider-vertical" : "au-slider-horizontal") + " " + state().className',
 		'[class.disabled]': 'state().disabled',
+		'[attr.aria-disabled]': 'state().disabled ? true : null',
 		'(blur)': 'handleBlur()',
 	},
 	template: `

diff --git a/e2e/demo.spec.ts b/e2e/demo.spec.ts
@@ -24,9 +24,6 @@ const allRoutes = globSync(`**/+page.svelte`, {cwd: pathToFrameworkDir}).flatMap
 
 async function analyze(page: Page, route: string): Promise<AxeResults> {
 	const analyser = new AxeBuilder({page}).withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
-	if (route.includes('slider')) {
-		analyser.disableRules('color-contrast');
-	}
 	return analyser.analyze();
 }
 

diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-default.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-default.html
@@ -93,6 +93,7 @@ <h2>
 				"Disabled slider"
 			</h2>
 			<div
+			 aria-disabled="true"
 			 class="au-slider au-slider-horizontal disabled"
 			>
 				<div

diff --git a/react/lib/src/components/slider/slider.tsx b/react/lib/src/components/slider/slider.tsx
@@ -43,6 +43,7 @@ export function Slider(props: Partial<SliderProps>) {
 		<div
 			ref={sliderSetRef}
 			className={`au-slider ${vertical ? 'au-slider-vertical' : 'au-slider-horizontal'} ${className} ${disabled ? ' disabled' : ''}`}
+			aria-disabled={disabled ? 'true' : undefined}
 		>
 			{progressDisplayOptions.map((option, index) => (
 				<div

diff --git a/svelte/lib/src/components/slider/Slider.svelte b/svelte/lib/src/components/slider/Slider.svelte
@@ -52,7 +52,12 @@
 </script>
 
 <!-- on:blur={onTouched} ?? -->
-<div use:sliderDirective class={`au-slider ${$vertical$ ? 'au-slider-vertical' : 'au-slider-horizontal'} ${$className$}`} class:disabled={$disabled$}>
+<div
+	use:sliderDirective
+	class={`au-slider ${$vertical$ ? 'au-slider-vertical' : 'au-slider-horizontal'} ${$className$}`}
+	class:disabled={$disabled$}
+	aria-disabled={$disabled$ ? true : null}
+>
 	{#each $progressDisplayOptions$ as option}
 		<div
 			class="au-slider-progress"