fix(ui5-slider): remove redundant accessibility role and attributes

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(
 			<Slider accessibleName="Basic Slider" min={0} max={10} value={4}></Slider>
 		);
@@ -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", () => {

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

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}

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.

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}
 			></div>