fix(slider): Set up aria values for handles (#1073)

AmadeusITGroup · Jan 9, 2025 · 606060c · 606060c
1 parent 13d2026
commit 606060c
Show file tree

Hide file tree

Showing 27 changed files with 456 additions and 326 deletions.
diff --git a/angular/bootstrap/src/components/slider/slider.component.ts b/angular/bootstrap/src/components/slider/slider.component.ts
@@ -243,29 +243,37 @@ export class SliderComponent extends BaseWidgetDirective<SliderWidget> {
 
 	/**
 	 * Return the value for the 'aria-label' attribute for the handle
-	 * @param value - value of the handle
 	 * @param sortedIndex - index of the handle in the sorted list
-	 * @param index - index of the handle in the original list
 	 *
 	 * @defaultValue
 	 * ```ts
-	 * (value: number) => '' + value
+	 * () => 'Value'
+	 * ```
+	 */
+	readonly ariaLabel = input<(sortedIndex: number) => string>(undefined, {alias: 'auAriaLabel'});
+
+	/**
+	 * Return the value for the 'aria-labelledBy' attribute for the handle
+	 * @param sortedIndex - index of the handle in the sorted list
+	 *
+	 * @defaultValue
+	 * ```ts
+	 * () => ''
 	 * ```
 	 */
-	readonly ariaLabelHandle = input<(value: number, sortedIndex: number, index: number) => string>(undefined, {alias: 'auAriaLabelHandle'});
+	readonly ariaLabelledBy = input<(sortedIndex: number) => string>(undefined, {alias: 'auAriaLabelledBy'});
 
 	/**
 	 * Return the value for the 'aria-valuetext' attribute for the handle
 	 * @param value - value of the handle
 	 * @param sortedIndex - index of the handle in the sorted list
-	 * @param index - index of the handle in the original list
 	 *
 	 * @defaultValue
 	 * ```ts
-	 * (value: number) => '' + value
+	 * (value: number) => ''
 	 * ```
 	 */
-	readonly ariaValueText = input<(value: number, sortedIndex: number, index: number) => string>(undefined, {alias: 'auAriaValueText'});
+	readonly ariaValueText = input<(value: number, sortedIndex: number) => string>(undefined, {alias: 'auAriaValueText'});
 
 	/**
 	 * If `true` slider value cannot be changed but the slider is still focusable

diff --git a/angular/demo/bootstrap/src/app/samples/slider/accessibility.route.ts b/angular/demo/bootstrap/src/app/samples/slider/accessibility.route.ts
@@ -0,0 +1,39 @@
+import type {SliderSlotLabelContext} from '@agnos-ui/angular-bootstrap';
+import {SliderComponent} from '@agnos-ui/angular-bootstrap';
+import {Component, signal} from '@angular/core';
+
+@Component({
+	imports: [SliderComponent],
+	template: `
+		<span id="labelID">Date range</span>
+		<div
+			auSlider
+			[auAriaValueText]="ariaValueText"
+			[auAriaLabelledBy]="ariaLabelledBy"
+			[auLabel]="label"
+			[auMin]="min"
+			[auMax]="max"
+			[auStepSize]="stepSize"
+			[(auValues)]="sliderValues"
+		></div>
+	`,
+})
+export default class AccessibilitySliderComponent {
+	readonly stepSize = 86400000; // 1 day in milliseconds
+	readonly min = 1733007600000; // 01-12-2024
+	readonly max = 1735599600000; // 31-12-2024
+	readonly sliderValues = signal([this.min, this.max]);
+
+	readonly ariaLabelledBy = () => 'labelID';
+
+	readonly ariaValueText = (value: number, index: number) => {
+		const dateString = new Date(value).toLocaleDateString('en-GB', {dateStyle: 'medium', timeZone: 'UTC'});
+		if (index == 0) {
+			return `Minimum date: ${dateString}`;
+		} else {
+			return `Maximum date: ${dateString}`;
+		}
+	};
+
+	readonly label = ({value}: SliderSlotLabelContext) => new Date(value).toLocaleDateString('en-GB', {dateStyle: 'medium', timeZone: 'UTC'});
+}
diff --git a/angular/demo/bootstrap/src/app/samples/slider/default.route.ts b/angular/demo/bootstrap/src/app/samples/slider/default.route.ts
@@ -1,10 +1,10 @@
-import {AgnosUIAngularModule} from '@agnos-ui/angular-bootstrap';
+import {SliderComponent} from '@agnos-ui/angular-bootstrap';
 import type {OnInit} from '@angular/core';
 import {Component, signal} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 @Component({
-	imports: [AgnosUIAngularModule, ReactiveFormsModule, FormsModule],
+	imports: [SliderComponent, ReactiveFormsModule, FormsModule],
 	template: `
 		<h2>Slider with form control</h2>
 		<div

diff --git a/angular/demo/bootstrap/src/app/samples/slider/fullCustom.route.ts b/angular/demo/bootstrap/src/app/samples/slider/fullCustom.route.ts
@@ -6,7 +6,6 @@ import CoffeeSliderComponent from './coffee-slider.component';
 @Component({
 	imports: [SliderComponent, ReactiveFormsModule, FormsModule],
 	template: `
-		<h2>Fully custom slider</h2>
 		<div
 			auSlider
 			auMin="0"

diff --git a/angular/demo/bootstrap/src/app/samples/slider/playground.route.ts b/angular/demo/bootstrap/src/app/samples/slider/playground.route.ts
@@ -1,13 +1,12 @@
-import type {SliderComponent} from '@agnos-ui/angular-bootstrap';
-import {AgnosUIAngularModule} from '@agnos-ui/angular-bootstrap';
+import {SliderComponent} from '@agnos-ui/angular-bootstrap';
 import {getSliderDefaultConfig} from '@agnos-ui/core-bootstrap';
 import {Component, viewChild} from '@angular/core';
 import {getUndefinedValues, hashChangeHook, provideHashConfig} from '../../utils';
 
 const undefinedConfig = getUndefinedValues(getSliderDefaultConfig());
 
 @Component({
-	imports: [AgnosUIAngularModule],
+	imports: [SliderComponent],
 	providers: provideHashConfig('slider'),
 	template: `<div auSlider #widget></div>`,
 })

diff --git a/angular/demo/bootstrap/src/app/samples/slider/right-to-left.route.ts b/angular/demo/bootstrap/src/app/samples/slider/right-to-left.route.ts
@@ -1,9 +1,9 @@
-import {AgnosUIAngularModule} from '@agnos-ui/angular-bootstrap';
+import {SliderComponent} from '@agnos-ui/angular-bootstrap';
 import {Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 @Component({
-	imports: [AgnosUIAngularModule, ReactiveFormsModule, FormsModule],
+	imports: [SliderComponent, ReactiveFormsModule, FormsModule],
 	template: `
 		<h2>Horizontal slider</h2>
 		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="sliderControl" [auRtl]="true"></div>

diff --git a/angular/demo/bootstrap/src/app/samples/slider/vertical.route.ts b/angular/demo/bootstrap/src/app/samples/slider/vertical.route.ts
@@ -1,9 +1,9 @@
-import {AgnosUIAngularModule} from '@agnos-ui/angular-bootstrap';
+import {SliderComponent} from '@agnos-ui/angular-bootstrap';
 import {Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 @Component({
-	imports: [AgnosUIAngularModule, ReactiveFormsModule, FormsModule],
+	imports: [SliderComponent, ReactiveFormsModule, FormsModule],
 	template: `
 		<div class="d-flex" style="height: 350px">
 			<div class="col-6" style="height: 300px">

diff --git a/core-bootstrap/src/scss/slider.scss b/core-bootstrap/src/scss/slider.scss
@@ -159,6 +159,7 @@
 		font-weight: var(--#{variables.$prefix}slider-label-font-weight);
 		margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
 		position: absolute;
+		text-wrap: nowrap;
 
 		&.au-slider-label-min:not(.au-slider-rtl) {
 			left: var(--#{variables.$prefix}slider-label-min-position);