From 861eec4f1a14ee072c1ff31ae8f266c3f3003703 Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Mon, 1 Sep 2025 15:00:35 +0200
Subject: [PATCH 1/4] fix: improve accessibility and input handling

---
 .../__snapshots__/Switch.spec.tsx.snap          | 17 +++++++++++++++--
 .../switch-web/src/components/Switch.tsx        | 10 +++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap b/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
index dab78412e6..03263dfc70 100644
--- a/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
+++ b/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
@@ -5,12 +5,18 @@ exports[`Switch with editable value renders the structure correctly 1`] = `
   <div
     class="widget-switch"
   >
+    <input
+      aria-hidden="true"
+      id="com.mendix.widgets.custom.switch1"
+      style="opacity: 0; position: absolute; width: 1px; height: 1px;"
+      tabindex="-1"
+      type="checkbox"
+    />
     <div
       aria-checked="false"
       aria-labelledby="com.mendix.widgets.custom.switch1-label"
       aria-readonly="false"
       class="widget-switch-btn-wrapper widget-switch-btn-wrapper-default un-checked"
-      id="com.mendix.widgets.custom.switch1"
       role="switch"
       tabindex="0"
     >
@@ -27,12 +33,19 @@ exports[`Switch with readonly value renders the structure correctly 1`] = `
   <div
     class="widget-switch"
   >
+    <input
+      aria-hidden="true"
+      disabled=""
+      id="com.mendix.widgets.custom.switch1"
+      style="opacity: 0; position: absolute; width: 1px; height: 1px;"
+      tabindex="-1"
+      type="checkbox"
+    />
     <div
       aria-checked="false"
       aria-labelledby="com.mendix.widgets.custom.switch1-label"
       aria-readonly="true"
       class="widget-switch-btn-wrapper widget-switch-btn-wrapper-default disabled un-checked"
-      id="com.mendix.widgets.custom.switch1"
       role="switch"
       tabindex="0"
     >
diff --git a/packages/pluggableWidgets/switch-web/src/components/Switch.tsx b/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
index 15b8d05919..1c31d6b556 100644
--- a/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
+++ b/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
@@ -14,8 +14,16 @@ export interface SwitchProps extends Pick<SwitchContainerProps, "id" | "tabIndex
 export default function Switch(props: SwitchProps): ReactElement {
     return (
         <div className="widget-switch">
-            <div
+            <input
+                type="checkbox"
                 id={props.id}
+                onClick={props.onClick}
+                style={{ opacity: "0", position: "absolute", width: "1px", height: "1px" }}
+                disabled={!props.editable}
+                tabIndex={-1}
+                aria-hidden="true"
+            />
+            <div
                 className={classNames("widget-switch-btn-wrapper", "widget-switch-btn-wrapper-default", {
                     checked: props.isChecked,
                     disabled: !props.editable,

From 28c8b0cfa71b01d4bad6e78caf48ca8554e03bfe Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Mon, 1 Sep 2025 15:00:35 +0200
Subject: [PATCH 2/4] fix: update Switch component snapshots

---
 .../src/__tests__/__snapshots__/Switch.spec.tsx.snap          | 4 ++--
 .../pluggableWidgets/switch-web/src/components/Switch.tsx     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap b/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
index 03263dfc70..c18e8d60b7 100644
--- a/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
+++ b/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
@@ -7,8 +7,8 @@ exports[`Switch with editable value renders the structure correctly 1`] = `
   >
     <input
       aria-hidden="true"
+      class="sr-only"
       id="com.mendix.widgets.custom.switch1"
-      style="opacity: 0; position: absolute; width: 1px; height: 1px;"
       tabindex="-1"
       type="checkbox"
     />
@@ -35,9 +35,9 @@ exports[`Switch with readonly value renders the structure correctly 1`] = `
   >
     <input
       aria-hidden="true"
+      class="sr-only"
       disabled=""
       id="com.mendix.widgets.custom.switch1"
-      style="opacity: 0; position: absolute; width: 1px; height: 1px;"
       tabindex="-1"
       type="checkbox"
     />
diff --git a/packages/pluggableWidgets/switch-web/src/components/Switch.tsx b/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
index 1c31d6b556..f88f03c66d 100644
--- a/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
+++ b/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
@@ -18,7 +18,7 @@ export default function Switch(props: SwitchProps): ReactElement {
                 type="checkbox"
                 id={props.id}
                 onClick={props.onClick}
-                style={{ opacity: "0", position: "absolute", width: "1px", height: "1px" }}
+                className="sr-only"
                 disabled={!props.editable}
                 tabIndex={-1}
                 aria-hidden="true"

From 2594b0b35127c6c8f80bf53d9462f8a286c17354 Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Mon, 1 Sep 2025 15:00:35 +0200
Subject: [PATCH 3/4] fix: update snapshots to reflect aria-checked and
 readonly attributes

---
 packages/pluggableWidgets/switch-web/CHANGELOG.md             | 4 ++++
 packages/pluggableWidgets/switch-web/package.json             | 2 +-
 .../src/__tests__/__snapshots__/Switch.spec.tsx.snap          | 4 ++++
 .../pluggableWidgets/switch-web/src/components/Switch.tsx     | 3 +++
 packages/pluggableWidgets/switch-web/src/package.xml          | 2 +-
 5 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/pluggableWidgets/switch-web/CHANGELOG.md b/packages/pluggableWidgets/switch-web/CHANGELOG.md
index 6fd06fa527..4e9bd6376c 100644
--- a/packages/pluggableWidgets/switch-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/switch-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- Improved accessibility and input handling. Clicking the label now toggles the switch.
+
 ## [4.2.2] - 2024-08-28
 
 ### Changed
diff --git a/packages/pluggableWidgets/switch-web/package.json b/packages/pluggableWidgets/switch-web/package.json
index 3166fca0c4..314ef2d04f 100644
--- a/packages/pluggableWidgets/switch-web/package.json
+++ b/packages/pluggableWidgets/switch-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/switch-web",
     "widgetName": "Switch",
-    "version": "4.2.2",
+    "version": "4.3.0",
     "description": "Toggle a boolean attribute",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap b/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
index c18e8d60b7..6c9bf2eb7f 100644
--- a/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
+++ b/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
@@ -6,9 +6,11 @@ exports[`Switch with editable value renders the structure correctly 1`] = `
     class="widget-switch"
   >
     <input
+      aria-checked="false"
       aria-hidden="true"
       class="sr-only"
       id="com.mendix.widgets.custom.switch1"
+      readonly=""
       tabindex="-1"
       type="checkbox"
     />
@@ -34,10 +36,12 @@ exports[`Switch with readonly value renders the structure correctly 1`] = `
     class="widget-switch"
   >
     <input
+      aria-checked="false"
       aria-hidden="true"
       class="sr-only"
       disabled=""
       id="com.mendix.widgets.custom.switch1"
+      readonly=""
       tabindex="-1"
       type="checkbox"
     />
diff --git a/packages/pluggableWidgets/switch-web/src/components/Switch.tsx b/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
index f88f03c66d..f9e64bc5f2 100644
--- a/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
+++ b/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
@@ -18,6 +18,9 @@ export default function Switch(props: SwitchProps): ReactElement {
                 type="checkbox"
                 id={props.id}
                 onClick={props.onClick}
+                checked={props.isChecked}
+                aria-checked={props.isChecked}
+                readOnly
                 className="sr-only"
                 disabled={!props.editable}
                 tabIndex={-1}
diff --git a/packages/pluggableWidgets/switch-web/src/package.xml b/packages/pluggableWidgets/switch-web/src/package.xml
index 46043e87dd..df0dc203d4 100644
--- a/packages/pluggableWidgets/switch-web/src/package.xml
+++ b/packages/pluggableWidgets/switch-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Switch" version="4.2.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Switch" version="4.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Switch.xml" />
         </widgetFiles>

From af949633145be871fdf77aa3cc0b7bac50179bb7 Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Wed, 17 Sep 2025 16:49:09 +0200
Subject: [PATCH 4/4] fix: update tests & snapshots for aria-disabled

---
 .../pluggableWidgets/switch-web/src/__tests__/Switch.spec.tsx | 4 ++--
 .../src/__tests__/__snapshots__/Switch.spec.tsx.snap          | 4 ++--
 .../pluggableWidgets/switch-web/src/components/Switch.tsx     | 2 +-
 .../switch-web/src/components/__tests__/Switch.spec.tsx       | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/pluggableWidgets/switch-web/src/__tests__/Switch.spec.tsx b/packages/pluggableWidgets/switch-web/src/__tests__/Switch.spec.tsx
index 3175adb4a1..5951a4cbd2 100644
--- a/packages/pluggableWidgets/switch-web/src/__tests__/Switch.spec.tsx
+++ b/packages/pluggableWidgets/switch-web/src/__tests__/Switch.spec.tsx
@@ -99,7 +99,7 @@ describe("Switch", () => {
             const { container } = renderSwitch(props);
             const wrapper = container.querySelector(".widget-switch-btn-wrapper");
             expect(wrapper?.classList.contains("disabled")).toBe(false);
-            expect(wrapper?.getAttribute("aria-readonly")).toBe("false");
+            expect(wrapper?.getAttribute("aria-disabled")).toBe("false");
         });
 
         it("invokes action on click", () => {
@@ -173,7 +173,7 @@ describe("Switch", () => {
             const { container } = renderSwitch(props);
             const wrapper = container.querySelector(".widget-switch-btn-wrapper");
             expect(wrapper?.classList.contains("disabled")).toBe(true);
-            expect(wrapper?.getAttribute("aria-readonly")).toBe("true");
+            expect(wrapper?.getAttribute("aria-disabled")).toBe("true");
         });
 
         it("shouldn't invoke action", () => {
diff --git a/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap b/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
index 6c9bf2eb7f..5cd9046782 100644
--- a/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
+++ b/packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap
@@ -16,8 +16,8 @@ exports[`Switch with editable value renders the structure correctly 1`] = `
     />
     <div
       aria-checked="false"
+      aria-disabled="false"
       aria-labelledby="com.mendix.widgets.custom.switch1-label"
-      aria-readonly="false"
       class="widget-switch-btn-wrapper widget-switch-btn-wrapper-default un-checked"
       role="switch"
       tabindex="0"
@@ -47,8 +47,8 @@ exports[`Switch with readonly value renders the structure correctly 1`] = `
     />
     <div
       aria-checked="false"
+      aria-disabled="true"
       aria-labelledby="com.mendix.widgets.custom.switch1-label"
-      aria-readonly="true"
       class="widget-switch-btn-wrapper widget-switch-btn-wrapper-default disabled un-checked"
       role="switch"
       tabindex="0"
diff --git a/packages/pluggableWidgets/switch-web/src/components/Switch.tsx b/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
index f9e64bc5f2..71cee5ac72 100644
--- a/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
+++ b/packages/pluggableWidgets/switch-web/src/components/Switch.tsx
@@ -38,7 +38,7 @@ export default function Switch(props: SwitchProps): ReactElement {
                 role="switch"
                 aria-checked={props.isChecked}
                 aria-labelledby={`${props.id}-label`}
-                aria-readonly={!props.editable}
+                aria-disabled={!props.editable}
             >
                 <div
                     className={classNames("widget-switch-btn", {
diff --git a/packages/pluggableWidgets/switch-web/src/components/__tests__/Switch.spec.tsx b/packages/pluggableWidgets/switch-web/src/components/__tests__/Switch.spec.tsx
index c1207106a6..e7f9876009 100644
--- a/packages/pluggableWidgets/switch-web/src/components/__tests__/Switch.spec.tsx
+++ b/packages/pluggableWidgets/switch-web/src/components/__tests__/Switch.spec.tsx
@@ -21,7 +21,7 @@ describe("Switch", () => {
         renderSwitch();
         expect(screen.getByRole("switch")).toBeInTheDocument();
         expect(screen.getByRole("switch")).toHaveAttribute("aria-checked", "false");
-        expect(screen.getByRole("switch")).toHaveAttribute("aria-readonly", "false");
+        expect(screen.getByRole("switch")).toHaveAttribute("aria-disabled", "false");
     });
 
     it("shows checked state", () => {
@@ -32,7 +32,7 @@ describe("Switch", () => {
     it("shows disabled state", () => {
         renderSwitch({ editable: false });
         expect(screen.getByRole("switch")).toHaveClass("disabled");
-        expect(screen.getByRole("switch")).toHaveAttribute("aria-readonly", "true");
+        expect(screen.getByRole("switch")).toHaveAttribute("aria-disabled", "true");
     });
 
     it("calls onClick when clicked", async () => {