diff --git a/packages/main/src/RangeSlider.hbs b/packages/main/src/RangeSlider.hbs
index 6ac3e9b8e866..621dc3b735f2 100644
--- 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"
>
@@ -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"
>
diff --git a/packages/main/src/RangeSlider.ts b/packages/main/src/RangeSlider.ts
index 1d9754f2de10..8a67184ccfd0 100644
--- 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(".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
index 21bb8cf6c1fe..37ed3cbfda7f 100644
--- 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
index 3ccae40e3a86..da01486bf8dd 100644
--- 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
index 8faa2d6afbed..9220cecbafb0 100644
--- 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"),