fix(ui5-switch): prevent toggle when Space is pressed with Shift or Escape

Toggle is prevented when Space is pressed with Shift or Escape

Author: GDamyanov

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

@@ -38,6 +38,66 @@ describe("General events interactions", () => {
 		cy.get("@switch")
 			.should("not.have.attr", "checked");
 	});
+
+	it("Should toggle checked state when SPACE is pressed", () => {
+		cy.mount(<Switch onChange={cy.stub().as("changed")}>Click me</Switch>);
+
+		cy.get("[ui5-switch]")
+			.as("switch");
+
+		cy.get("@switch")
+			.shadow()
+			.find(".ui5-switch-root")
+			.focus()
+			.should("be.focused")
+			.realPress("Space");
+
+    cy.get("@changed")
+        .should("have.been.calledOnce");
+
+    cy.get("@switch")
+        .should("have.attr", "checked");
+	});
+
+	it("Should not toggle checked state on SPACE + Shift are pressed", () => {
+		cy.mount(<Switch onChange={cy.stub().as("changed")}>Click me</Switch>);
+
+		cy.get("[ui5-switch]")
+			.as("switch");
+
+		cy.get("@switch")
+			.shadow()
+			.find(".ui5-switch-root")
+			.focus()
+			.should("be.focused")
+			.realPress(["Space", "Shift"]);
+
+    cy.get("@changed")
+        .should("not.have.been.called");
+
+    cy.get("@switch")
+        .should("not.have.attr", "checked");
+	});
+
+	it("Should not toggle checked state on SPACE + Escape are pressed", () => {
+		cy.mount(<Switch onChange={cy.stub().as("changed")}>Click me</Switch>);
+
+		cy.get("[ui5-switch]")
+			.as("switch");
+
+		cy.get("@switch")
+			.shadow()
+			.find(".ui5-switch-root")
+			.focus()
+			.should("be.focused")
+			.realPress(["Space", "Escape"]);
+
+    cy.get("@changed")
+        .should("not.have.been.called");
+
+    cy.get("@switch")
+        .should("not.have.attr", "checked");
+	});
 });
 
 describe("General accesibility attributes", () => {
@@ -165,4 +225,5 @@ describe("General interactions in form", () => {
 
 		cy.get("#requiredTestSwitch:invalid").should("not.exist", "Checked required Switch should not have :invalid CSS class");
 	});
-});
+
+});

packages/main/src/Switch.ts

@@ -4,7 +4,9 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+	isSpace, isEnter, isShift, isEscape,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
@@ -77,6 +79,7 @@ class Switch extends UI5Element implements IFormInputElement {
 		change: void
 		"value-changed": void
 	}
+
 	/**
 	 * Defines the component design.
 	 *
@@ -195,6 +198,9 @@ class Switch extends UI5Element implements IFormInputElement {
 	@property()
 	value = "";
 
+	@property({ type: Boolean, noAttribute: true })
+	_cancelAction = false;
+
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
@@ -227,6 +233,7 @@ class Switch extends UI5Element implements IFormInputElement {
 	}
 
 	_onkeydown(e: KeyboardEvent) {
+		this._cancelAction = isShift(e) || isEscape(e);
 		if (isSpace(e)) {
 			e.preventDefault();
 		}
@@ -237,7 +244,7 @@ class Switch extends UI5Element implements IFormInputElement {
 	}
 
 	_onkeyup(e: KeyboardEvent) {
-		if (isSpace(e)) {
+		if (isSpace(e) && !this._cancelAction) {
 			this._onclick();
 		}
 	}