From c7a998910ee8d9094e8abfd21726f86af93ef9f4 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Fri, 31 Jan 2025 11:51:03 -0700
Subject: [PATCH 1/2] Add WAI-ARIA Roles, States, and Properties to
 ToggleSwitch

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 .../src/components/Form/ToggleSwitch/ToggleSwitch.vue          | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue b/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue
index 088cbdabc7..4cac43f94b 100644
--- a/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue
+++ b/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue
@@ -65,8 +65,11 @@ export default defineComponent({
     <label class="switch hand">
       <input
         type="checkbox"
+        role="switch"
         :checked="state"
+        :aria-label="onLabel"
         @input="toggle(null)"
+        @keydown.enter="toggle(null)"
       >
       <span class="slider round" />
     </label>

From f5d9f9bd5497036e8fa38a33817c1f52f96be607 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Wed, 5 Feb 2025 14:12:46 -0700
Subject: [PATCH 2/2] Add focus ring to toggle switch

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 .../Form/ToggleSwitch/ToggleSwitch.vue        | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue b/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue
index 4cac43f94b..6815ba2298 100644
--- a/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue
+++ b/pkg/rancher-components/src/components/Form/ToggleSwitch/ToggleSwitch.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
 
 type StateType = boolean | 'true' | 'false' | undefined;
 
@@ -33,6 +33,29 @@ export default defineComponent({
 
   emits: ['update:value'],
 
+  setup() {
+    const switchChrome = useTemplateRef<HTMLElement>('switchChrome');
+    const focus = () => {
+      switchChrome.value?.classList.add('focus');
+    };
+
+    const blur = () => {
+      switchChrome.value?.classList.remove('focus');
+    };
+
+    const switchInput = useTemplateRef<HTMLInputElement>('switchInput');
+
+    onMounted(() => {
+      switchInput.value?.addEventListener('focus', focus);
+      switchInput.value?.addEventListener('blur', blur);
+    });
+
+    onBeforeUnmount(() => {
+      switchInput.value?.removeEventListener('focus', focus);
+      switchInput.value?.removeEventListener('blur', blur);
+    });
+  },
+
   data() {
     return { state: false as StateType };
   },
@@ -64,6 +87,7 @@ export default defineComponent({
     >{{ offLabel }}</span>
     <label class="switch hand">
       <input
+        ref="switchInput"
         type="checkbox"
         role="switch"
         :checked="state"
@@ -71,7 +95,10 @@ export default defineComponent({
         @input="toggle(null)"
         @keydown.enter="toggle(null)"
       >
-      <span class="slider round" />
+      <span
+        ref="switchChrome"
+        class="slider round"
+      />
     </label>
     <span
       class="label no-select hand"
@@ -121,6 +148,13 @@ $toggle-height: 16px;
   background-color: var(--checkbox-disabled-bg);
   -webkit-transition: .4s;
   transition: .4s;
+
+  &.focus {
+    @include focus-outline;
+    outline-offset: 2px;
+    -webkit-transition: 0s;
+    transition: 0s;
+  }
 }
 
 .slider:before {