diff --git a/packages/main/cypress/specs/Slider.cy.tsx b/packages/main/cypress/specs/Slider.cy.tsx index 6af10bda86d8..f82837187929 100644 --- a/packages/main/cypress/specs/Slider.cy.tsx +++ b/packages/main/cypress/specs/Slider.cy.tsx @@ -562,7 +562,7 @@ describe("Accessibility", () => { .should("have.attr", "aria-valuenow", "0"); }); - it("aria-valuenow is set on the progress bar with role='slider'", () => { + it("progress bar is not exposed as a slider (role and value attributes are absent)", () => { cy.mount( ); @@ -571,8 +571,13 @@ describe("Accessibility", () => { .shadow() .find("[ui5-slider-scale]") .shadow() - .find(".ui5-slider-progress[role='slider']") - .should("have.attr", "aria-valuenow", "4"); + .find(".ui5-slider-progress") + .as("progress"); + + cy.get("@progress").should("not.have.attr", "role"); + cy.get("@progress").should("not.have.attr", "aria-valuenow"); + cy.get("@progress").should("not.have.attr", "aria-valuemin"); + cy.get("@progress").should("not.have.attr", "aria-valuemax"); }); it("Aria attributes are set correctly to the tooltip input", () => { diff --git a/packages/main/src/RangeSlider.ts b/packages/main/src/RangeSlider.ts index 7a681c301678..e40b62d1a719 100644 --- a/packages/main/src/RangeSlider.ts +++ b/packages/main/src/RangeSlider.ts @@ -278,6 +278,10 @@ class RangeSlider extends SliderBase implements IFormInputElement { return Math.abs(this.endValue - this.startValue); } + get _progressRole() { + return "slider" as const; + } + /** * Check if the previously saved state is outdated. That would mean * either it is the initial rendering or that a property has been changed diff --git a/packages/main/src/RangeSliderTemplate.tsx b/packages/main/src/RangeSliderTemplate.tsx index cb76810bd634..687710aecdfe 100644 --- a/packages/main/src/RangeSliderTemplate.tsx +++ b/packages/main/src/RangeSliderTemplate.tsx @@ -140,6 +140,7 @@ export default function RangeSliderTemplate(this: RangeSlider) { labelInterval={this._hasCustomTickmarks ? 1 : this.labelInterval} tickmarks={this.tickmarks} progressTabIndex={this._tabIndex} + progressRole={this._progressRole} progressAriaValueNow={this._ariaValueNow} progressAriaValueText={`From ${this.startValue} to ${this.endValue}`} progressAriaLabel={this._ariaLabel} diff --git a/packages/main/src/SliderScale.ts b/packages/main/src/SliderScale.ts index 19f44ac88530..812e735581bf 100644 --- a/packages/main/src/SliderScale.ts +++ b/packages/main/src/SliderScale.ts @@ -10,10 +10,11 @@ import SliderScaleTemplate from "./SliderScaleTemplate.js"; import SliderScaleCss from "./generated/themes/SliderScale.css.js"; import type SliderHandle from "./SliderHandle.js"; +import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js"; type Tickmark = { - value: number; - label?: string; + value: number; + label?: string; }; enum SliderScaleOrientation { @@ -122,7 +123,7 @@ class SliderScale extends UI5Element { * @private */ @property() - progressRole?: string; + progressRole?: AriaRole; /** * ARIA aria-valuenow for the progress bar. diff --git a/packages/main/src/SliderScaleTemplate.tsx b/packages/main/src/SliderScaleTemplate.tsx index f85fd9715947..5b329bd50db2 100644 --- a/packages/main/src/SliderScaleTemplate.tsx +++ b/packages/main/src/SliderScaleTemplate.tsx @@ -34,14 +34,14 @@ export default function SliderScaleTemplate(this: SliderScale) { part="progress" style={this._progressStyle} tabIndex={this.progressTabIndex} - role="slider" - aria-orientation="horizontal" - aria-valuemin={this.min} - aria-valuemax={this.max} - aria-valuenow={this.progressAriaValueNow} - aria-valuetext={this.progressAriaValueText} - aria-label={this.progressAriaLabel} - aria-disabled={this.progressAriaDisabled} + role={this.progressRole} + aria-orientation={this.progressRole ? "horizontal" : undefined} + aria-valuemin={this.progressRole ? this.min : undefined} + aria-valuemax={this.progressRole ? this.max : undefined} + aria-valuenow={this.progressRole ? this.progressAriaValueNow : undefined} + aria-valuetext={this.progressRole ? this.progressAriaValueText : undefined} + aria-label={this.progressRole ? this.progressAriaLabel : undefined} + aria-disabled={this.progressRole ? this.progressAriaDisabled : undefined} onMouseEnter={this._onProgressMouseEnter} onMouseLeave={this._onProgressMouseLeave} >