fix: settings toggle should use input

app/components/Settings/Toggle.client.vue

@@ -1,81 +1,121 @@
 <script setup lang="ts">
-defineProps<{
-  label?: string
+const props = defineProps<{
+  label: string
   description?: string
   class?: string
 }>()
-
+defineEmits(['update:modelValue'])
 const checked = defineModel<boolean>({
-  default: false,
+  required: true,
+})
+const id = 'toggle-' + props.label
+const { locale, locales } = useI18n()
+const dir = computed(() => {
+  const localeObj = locales.value.find(item => item.code === locale.value)
+  return localeObj?.dir ?? 'ltr'
 })
 </script>
 
 <template>
-  <button
-    type="button"
-    class="w-full flex items-center justify-between gap-4 group focus-visible:outline-none py-1 -my-1"
-    role="switch"
-    :aria-checked="checked"
-    @click="checked = !checked"
-    :class="class"
-  >
-    <span v-if="label" class="text-sm text-fg font-medium text-start">
-      {{ label }}
-    </span>
-    <span
-      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
-      :class="
-        checked
-          ? 'bg-accent border-accent group-hover:bg-accent/80'
-          : 'bg-fg/50 border-fg/50 group-hover:bg-fg/70'
-      "
-      aria-hidden="true"
-    >
-      <span
-        class="block h-5 w-5 rounded-full bg-bg shadow-sm transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-      />
-    </span>
-  </button>
+  <label :for="id">
+    <span class="toggle--label-text">{{ label }}</span>
+    <input
+      role="switch"
+      type="checkbox"
+      :id
+      class="toggle--checkbox"
+      :class="dir"
+      v-model="checked"
+    />
+    <span class="toggle--background"></span>
+  </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}
   </p>
 </template>
 
 <style scoped>
-button[aria-checked='false'] > span:last-of-type > span {
-  translate: 0;
+.toggle--label-text {
+  grid-area: label-text;
+}
+
+.toggle--background {
+  grid-area: toggle-background;
+  justify-self: end;
+}
+
+.toggle--checkbox {
+  opacity: 0;
+}
+
+label {
+  display: grid;
+  grid-template-areas: 'label-text . toggle-background';
+}
+
+input {
+  grid-row: 1;
+  grid-column: 3;
+  justify-self: end;
+}
+
+/* background */
+.toggle--background {
+  width: 44px;
+  height: 24px;
+  background: var(--fg-subtle);
+  border-radius: 9999px;
+  border: 1px solid var(--fg);
+  display: flex;
+  position: relative;
+}
+
+label:has(input:focus) .toggle--background {
+  outline: solid 2px var(--fg);
+  outline-offset: 2px;
+}
+
+label:has(input:checked) .toggle--background {
+  background: var(--fg);
+  border-color: var(--fg);
 }
-button[aria-checked='true'] > span:last-of-type > span {
-  translate: calc(100%);
+
+label:has(input:hover) .toggle--background {
+  background: var(--fg-muted);
 }
-html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
-  translate: calc(-100%);
+
+/* Circle that moves */
+.toggle--checkbox:checked + .toggle--background:before {
+  animation-fill-mode: forwards;
+  transition: transform 200ms ease-in-out;
+}
+
+.toggle--background:before {
+  animation-fill-mode: forwards;
+  transition: transform 200ms ease-in-out;
+  content: '';
+  width: 20px;
+  height: 20px;
+  top: 1px;
+  position: absolute;
+  border-radius: 9999px;
+  background: var(--bg);
+}
+
+/* Support rtl locales */
+.toggle--checkbox.ltr + .toggle--background:before {
+  left: 3px;
+}
+
+.toggle--checkbox.rtl + .toggle--background:before {
+  right: 3px;
+}
+
+.toggle--checkbox:checked.ltr + .toggle--background:before {
+  transform: translate(17px);
 }
 
-@media (forced-colors: active) {
-  /* make toggle tracks and thumb visible in forced colors. */
-  button[role='switch'] {
-    & > span:last-of-type {
-      forced-color-adjust: none;
-    }
-
-    &[aria-checked='false'] > span:last-of-type {
-      background: Canvas;
-      border-color: CanvasText;
-
-      & > span {
-        background: CanvasText;
-      }
-    }
-
-    &[aria-checked='true'] > span:last-of-type {
-      background: Highlight;
-      border-color: Highlight;
-
-      & > span {
-        background: HighlightText;
-      }
-    }
-  }
+.toggle--checkbox:checked.rtl + .toggle--background:before {
+  transform: translate(-17px);
 }
 </style>

test/nuxt/a11y.spec.ts

@@ -2390,7 +2390,7 @@ describe('component accessibility audits', () => {
   describe('Toggle', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(SettingsToggle, {
-        props: { label: 'Enable feature' },
+        props: { label: 'Enable feature', modelValue: false },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
@@ -2401,6 +2401,7 @@ describe('component accessibility audits', () => {
         props: {
           label: 'Enable feature',
           description: 'This enables the feature',
+          modelValue: false,
         },
       })
       const results = await runAxe(component)
@@ -2538,7 +2539,7 @@ describe('background theme accessibility', () => {
       name: 'SettingsToggle',
       mount: () =>
         mountSuspended(SettingsToggle, {
-          props: { label: 'Feature', description: 'Desc' },
+          props: { label: 'Feature', description: 'Desc', modelValue: false },
         }),
     },
     {