fix: improve accessibility support wit aria-disabled & focus styles

Author: yordan-st

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

packages/pluggableWidgets/switch-web/src/ui/_switch.scss

@@ -3,10 +3,6 @@
 .widget-switch-btn-wrapper {
     margin-bottom: 8px;
 
-    &:focus {
-        outline: 1px solid #0595db;
-    }
-
     &.disabled {
         cursor: default;
     }
@@ -30,3 +26,12 @@
         }
     }
 }
+
+.form-group:focus-within {
+    &:has(.widget-switch) {
+        outline: 5px auto -webkit-focus-ring-color;
+    }
+    .widget-switch-btn-wrapper:focus {
+        outline: none;
+    }
+}