fix(ui5-slider, ui5-range-slider): adjust aria-attributes (#10039)

* fix(ui5-slider, ui5-range-slider): adjust aria-attributes fix accessibility related attributes for slider and range slider related to: #9547
SAP · Oct 17, 2024 · ed3abfc · ed3abfc
1 parent 478542a
commit ed3abfc
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/packages/main/src/RangeSlider.hbs b/packages/main/src/RangeSlider.hbs
@@ -41,9 +41,10 @@
 			aria-valuemin="{{min}}"
 			aria-valuemax="{{max}}"
 			aria-valuenow="{{startValue}}"
-			aria-labelledby="ui5-slider-startHandleDesc"
+			aria-labelledby="{{_ariaLabelledByStartHandleText}}"
 			aria-disabled="{{_ariaDisabled}}"
-			.aria-describedby="{{_ariaDescribedByHandleText}}"
+			aria-describedby="{{_ariaDescribedByHandleText}}"
+			aria-keyshortcuts="F2"
 		>
 			<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
 		</div>
@@ -79,9 +80,10 @@
 			aria-valuemin="{{min}}"
 			aria-valuemax="{{max}}"
 			aria-valuenow="{{endValue}}"
-			aria-labelledby="ui5-slider-endHandleDesc"
-			.aria-describedby="{{_ariaDescribedByHandleText}}"
+			aria-labelledby="{{_ariaLabelledByEndHandleText}}"
+			aria-describedby="{{_ariaDescribedByHandleText}}"
 			aria-disabled="{{_ariaDisabled}}"
+			aria-keyshortcuts="F2"
 		>
 			<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
 		</div>

diff --git a/packages/main/src/RangeSlider.ts b/packages/main/src/RangeSlider.ts
@@ -1033,6 +1033,14 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 		return this.shadowRoot!.querySelector<HTMLElement>(".ui5-slider-progress")!;
 	}
 
+	get _ariaLabelledByStartHandleText() {
+		return this.accessibleName ? ["ui5-slider-accName", "ui5-slider-startHandleDesc"].join(" ").trim() : "ui5-slider-startHandleDesc";
+	}
+
+	get _ariaLabelledByEndHandleText() {
+		return this.accessibleName ? ["ui5-slider-accName", "ui5-slider-endHandleDesc"].join(" ").trim() : "ui5-slider-endHandleDesc";
+	}
+
 	get _ariaLabelledByInputText() {
 		return RangeSlider.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);
 	}

diff --git a/packages/main/src/Slider.hbs b/packages/main/src/Slider.hbs
@@ -27,7 +27,7 @@
 			aria-valuemin="{{min}}"
 			aria-valuemax="{{max}}"
 			aria-valuenow="{{value}}"
-			aria-labelledby="{{_ariaLabelledByHandleText}} ui5-sliderDesc"
+			aria-labelledby="{{_ariaLabelledByHandleText}}"
 			aria-disabled="{{_ariaDisabled}}"
 			aria-keyshortcuts="F2"
 			aria-describedby="{{_ariaDescribedByHandleText}}"

diff --git a/packages/main/src/SliderBase.ts b/packages/main/src/SliderBase.ts
@@ -797,11 +797,11 @@ abstract class SliderBase extends UI5Element {
 	}
 
 	get _ariaDescribedByHandleText() {
-		return this.editableTooltip ? "ui5-slider-accName ui5-slider-InputDesc" : undefined;
+		return this.editableTooltip ? "ui5-slider-InputDesc" : undefined;
 	}
 
 	get _ariaLabelledByHandleText() {
-		return this.accessibleName ? "ui5-slider-accName" : undefined;
+		return this.accessibleName ? "ui5-slider-accName ui5-slider-sliderDesc" : "ui5-slider-sliderDesc";
 	}
 
 	get _ariaDescribedByInputText() {

diff --git a/packages/main/test/specs/Slider.spec.js b/packages/main/test/specs/Slider.spec.js
@@ -409,7 +409,7 @@ describe("Accessibility", async () => {
 		const sliderHandle = await slider.shadow$(".ui5-slider-handle");
 
 		assert.strictEqual(await sliderHandle.getAttribute("aria-labelledby"),
-			"ui5-slider-accName ui5-sliderDesc", "aria-labelledby is set correctly");
+			"ui5-slider-accName ui5-slider-sliderDesc", "aria-labelledby is set correctly");
 		assert.strictEqual(await sliderHandle.getAttribute("aria-valuemin"),
 			`${await slider.getProperty("min")}`, "aria-valuemin is set correctly");
 		assert.strictEqual(await sliderHandle.getAttribute("aria-valuemax"),