From c7fb007ba777632cbbf60bff2f4e586cc3f1086d Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Wed, 29 Oct 2025 10:33:34 +0200 Subject: [PATCH 1/4] fix: prevent toggle when Space is pressed with Shif or Escape --- packages/main/cypress/specs/Switch.cy.tsx | 57 +++++++++++++++++++++++ packages/main/src/Switch.ts | 8 +++- 2 files changed, 63 insertions(+), 2 deletions(-) diff --git a/packages/main/cypress/specs/Switch.cy.tsx b/packages/main/cypress/specs/Switch.cy.tsx index c443fb451ab1..1bf798778a67 100644 --- a/packages/main/cypress/specs/Switch.cy.tsx +++ b/packages/main/cypress/specs/Switch.cy.tsx @@ -38,6 +38,63 @@ describe("General events interactions", () => { cy.get("@switch") .should("not.have.attr", "checked"); }); + + it("Should toggle checked state when SPACE is pressed", () => { + cy.mount(Click me); + + cy.get("[ui5-switch]") + .as("switch"); + + cy.get("@switch") + .shadow() + .find(".ui5-switch-root") + .focus() + .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(Click me); + + cy.get("[ui5-switch]") + .as("switch"); + + cy.get("@switch") + .shadow() + .find(".ui5-switch-root") + .focus() + .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(Click me); + + cy.get("[ui5-switch]") + .as("switch"); + + cy.get("@switch") + .shadow() + .find(".ui5-switch-root") + .focus() + .realPress(["Space", "Escape"]); + + cy.get("@changed") + .should("not.have.been.called"); + + cy.get("@switch") + .should("not.have.attr", "checked"); + }); }); describe("General accesibility attributes", () => { diff --git a/packages/main/src/Switch.ts b/packages/main/src/Switch.ts index fdd5f1a75c20..298ef777fc99 100644 --- a/packages/main/src/Switch.ts +++ b/packages/main/src/Switch.ts @@ -4,7 +4,7 @@ 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"; @@ -195,6 +195,9 @@ class Switch extends UI5Element implements IFormInputElement { @property() value = ""; + @property({ type: Boolean, noAttribute: true }) + _cancelAction = false; + @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; @@ -227,6 +230,7 @@ class Switch extends UI5Element implements IFormInputElement { } _onkeydown(e: KeyboardEvent) { + this._cancelAction = isShift(e) || isEscape(e); if (isSpace(e)) { e.preventDefault(); } @@ -237,7 +241,7 @@ class Switch extends UI5Element implements IFormInputElement { } _onkeyup(e: KeyboardEvent) { - if (isSpace(e)) { + if (isSpace(e) && !this._cancelAction) { this._onclick(); } } From 1b6fa6b2a88d8baf821239a757d27c0137c9d2c0 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Thu, 30 Oct 2025 10:23:33 +0200 Subject: [PATCH 2/4] fix: lint errors --- packages/main/src/Switch.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Switch.ts b/packages/main/src/Switch.ts index 298ef777fc99..cf444137aea5 100644 --- a/packages/main/src/Switch.ts +++ b/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, isShift, isEscape } 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. * From 4a070eb36de9cd95668e8688ce381350ce699ef2 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 4 Nov 2025 10:44:20 +0200 Subject: [PATCH 3/4] test: add assert --- packages/main/cypress/specs/Switch.cy.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/cypress/specs/Switch.cy.tsx b/packages/main/cypress/specs/Switch.cy.tsx index 1bf798778a67..aebeaa283fb0 100644 --- a/packages/main/cypress/specs/Switch.cy.tsx +++ b/packages/main/cypress/specs/Switch.cy.tsx @@ -68,6 +68,7 @@ describe("General events interactions", () => { .shadow() .find(".ui5-switch-root") .focus() + .should("be.focused") .realPress(["Space", "Shift"]); cy.get("@changed") @@ -87,6 +88,7 @@ describe("General events interactions", () => { .shadow() .find(".ui5-switch-root") .focus() + .should("be.focused") .realPress(["Space", "Escape"]); cy.get("@changed") From d6489b821c5fb20a31961247178210e956d30ae3 Mon Sep 17 00:00:00 2001 From: GDamyanov Date: Tue, 4 Nov 2025 16:02:45 +0200 Subject: [PATCH 4/4] Refactor Switch component tests for clarity --- packages/main/cypress/specs/Switch.cy.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/main/cypress/specs/Switch.cy.tsx b/packages/main/cypress/specs/Switch.cy.tsx index aebeaa283fb0..32e496679978 100644 --- a/packages/main/cypress/specs/Switch.cy.tsx +++ b/packages/main/cypress/specs/Switch.cy.tsx @@ -49,6 +49,7 @@ describe("General events interactions", () => { .shadow() .find(".ui5-switch-root") .focus() + .should("be.focused") .realPress("Space"); cy.get("@changed") @@ -224,4 +225,5 @@ describe("General interactions in form", () => { cy.get("#requiredTestSwitch:invalid").should("not.exist", "Checked required Switch should not have :invalid CSS class"); }); -}); \ No newline at end of file + +});