fix: improve accessibility and input handling

Author: yordan-st

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

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,