[WC-2552] Switch: Improve consistent toggling with label

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

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",

packages/pluggableWidgets/switch-web/src/__tests__/Switch.spec.tsx

@@ -6,7 +6,7 @@
 import { Switch } from "../Switch";
 
 describe("Switch", () => {
     const renderSwitch = (props: SwitchContainerProps) => {
         return render(<Switch {...props} />);
     };
     const createProps = (props?: Partial<SwitchContainerProps>): SwitchContainerProps => {
@@ -99,7 +99,7 @@
             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 @@
             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", () => {

packages/pluggableWidgets/switch-web/src/__tests__/__snapshots__/Switch.spec.tsx.snap

@@ -5,12 +5,20 @@ exports[`Switch with editable value renders the structure correctly 1`] = `
   <div
     class="widget-switch"
   >
+    <input
+      aria-checked="false"
+      aria-hidden="true"
+      class="sr-only"
+      id="com.mendix.widgets.custom.switch1"
+      readonly=""
+      tabindex="-1"
+      type="checkbox"
+    />
     <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"
-      id="com.mendix.widgets.custom.switch1"
       role="switch"
       tabindex="0"
     >
@@ -27,12 +35,21 @@ exports[`Switch with readonly value renders the structure correctly 1`] = `
   <div
     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"
+    />
     <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"
-      id="com.mendix.widgets.custom.switch1"
       role="switch"
       tabindex="0"
     >

packages/pluggableWidgets/switch-web/src/components/Switch.tsx

@@ -14,8 +14,19 @@ 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}
+                checked={props.isChecked}
+                aria-checked={props.isChecked}
+                readOnly
+                className="sr-only"
+                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,
@@ -27,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", {

packages/pluggableWidgets/switch-web/src/components/__tests__/Switch.spec.tsx

@@ -13,7 +13,7 @@
         validation: undefined
     };
 
     function renderSwitch(props: Partial<SwitchProps> = {}) {
         return render(<Switch {...{ ...defaultProps, ...props }} />);
     }
 
@@ -21,7 +21,7 @@
         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 @@
     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 () => {

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>