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"),