fix(ui5-slider, ui5-range-slider): correct f2 announcement (#11476)

Author: elenastoyanovaa

packages/main/cypress/specs/Slider.cy.tsx

@@ -24,3 +24,27 @@ describe("General interactions", () => {
 		});
 	});
 });
+
+describe("Accessibility", () => {
+	it("aria-keyshortcuts should not be set on regular slider", () => {
+		cy.mount(
+			<Slider min={0} max={20}></Slider>
+		);
+
+		cy.get("[ui5-slider]")
+			.shadow()
+			.find(".ui5-slider-handle")
+			.should("not.have.attr", "aria-keyshortcuts");
+	});
+
+	it("aria-keyshortcuts should be set on slider with editable tooltips", () => {
+		cy.mount(
+			<Slider editableTooltip={true} min={0} max={20}></Slider>
+		);
+
+		cy.get("[ui5-slider]")
+			.shadow()
+			.find(".ui5-slider-handle")
+			.should("have.attr", "aria-keyshortcuts");
+	});
+});

packages/main/src/RangeSliderTemplate.tsx

@@ -60,7 +60,7 @@ export function handles(this: RangeSlider) {
 				aria-labelledby={this._ariaLabelledByStartHandleText}
 				aria-disabled={this._ariaDisabled}
 				aria-describedby={this._ariaDescribedByHandleText}
-				aria-keyshortcuts="F2"
+				aria-keyshortcuts={this._ariaKeyshortcuts}
 			>
 				<Icon name={directionArrows}
 					mode="Decorative"

packages/main/src/SliderBase.ts

@@ -786,6 +786,10 @@ abstract class SliderBase extends UI5Element {
 		return this.disabled ? -1 : 0;
 	}
 
+	get _ariaKeyshortcuts() {
+		return this.editableTooltip ? "F2" : undefined;
+	}
+
 	get _ariaDescribedByHandleText() {
 		return this.editableTooltip ? "ui5-slider-InputDesc" : undefined;
 	}

packages/main/src/SliderTemplate.tsx

@@ -44,7 +44,7 @@ export function handles(this: Slider) {
 				aria-valuenow={this.value}
 				aria-labelledby={this._ariaLabelledByHandleText}
 				aria-disabled={this._ariaDisabled}
-				aria-keyshortcuts="F2"
+				aria-keyshortcuts={this._ariaKeyshortcuts}
 				aria-describedby={this._ariaDescribedByHandleText}
 				data-sap-focus-ref
 				part="handle"