fix: settings toggle should use input

app/components/Settings/Toggle.client.vue

@@ -5,7 +5,6 @@ const props = withDefaults(
   defineProps<{
     label?: string
     description?: string
-    class?: string
     justify?: 'between' | 'start'
     tooltip?: string
     tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
@@ -20,33 +19,32 @@ const props = withDefaults(
 )
 
 const checked = defineModel<boolean>({
-  default: false,
+  required: true,
 })
+const id = useId()
 </script>
 
 <template>
-  <button
-    type="button"
-    class="w-full flex items-center gap-4 group focus-visible:outline-none py-1 -my-1"
-    :class="[justify === 'start' ? 'justify-start' : 'justify-between', $props.class]"
-    role="switch"
-    :aria-checked="checked"
-    @click="checked = !checked"
+  <label
+    :for="id"
+    class="grid items-center gap-4 py-1 -my-1"
+    :class="[
+      justify === 'start' ? 'justify-start' : '',
+      props.reverseOrder ? 'toggle-reverse' : 'toggle-default',
+    ]"
   >
     <template v-if="props.reverseOrder">
+      <input
+        role="switch"
+        type="checkbox"
+        :id
+        class="toggle-checkbox opacity-0"
+        style="grid-row: 1; grid-column: 1; justify-self: start"
+        v-model="checked"
+      />
       <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>
+        class="toggle-background h-6 w-11 rounded-full border border-fg relative flex shrink-0"
+      ></span>
       <TooltipApp
         v-if="tooltip && label"
         :text="tooltip"
@@ -77,76 +75,96 @@ const checked = defineModel<boolean>({
       <span v-else-if="label" class="text-sm text-fg font-medium text-start">
         {{ label }}
       </span>
+      <input
+        role="switch"
+        type="checkbox"
+        :id
+        class="toggle-checkbox opacity-0"
+        style="grid-row: 1; grid-column: 3; justify-self: end"
+        v-model="checked"
+      />
       <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>
+        class="toggle-background h-6 w-11 rounded-full border border-fg relative flex shrink-0"
+        style="grid-area: toggle-background; justify-self: end"
+      ></span>
     </template>
-  </button>
+  </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}
   </p>
 </template>
 
 <style scoped>
-/* Default order: label first, toggle last */
-button[aria-checked='false'] > span:last-of-type > span {
-  translate: 0;
-}
-button[aria-checked='true'] > span:last-of-type > span {
-  translate: calc(100%);
+/* Layout: default order (label first, toggle last) */
+.toggle-default {
+  grid-template-areas: 'label-text . toggle-background';
+  grid-template-columns: auto 1fr auto;
 }
-html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
-  translate: calc(-100%);
+
+/* Layout: reverse order (toggle first, label last) */
+.toggle-reverse {
+  grid-template-areas: 'toggle-background . label-text';
+  grid-template-columns: auto 1fr auto;
 }
 
-/* Reverse order: toggle first, label last */
-button[aria-checked='false'] > span:first-of-type > span {
-  translate: 0;
+/* Track background */
+.toggle-background {
+  background: var(--fg-subtle);
+  transition:
+    background-color 100ms ease-in,
+    border-color 100ms ease-in;
 }
-button[aria-checked='true'] > span:first-of-type > span {
-  translate: calc(100%);
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle-background {
+    transition: none;
+  }
 }
-html[dir='rtl'] button[aria-checked='true'] > span:first-of-type > span {
-  translate: calc(-100%);
+
+label:has(input:focus-visible) .toggle-background {
+  outline: solid 2px var(--fg);
+  outline-offset: 2px;
 }
 
-@media (forced-colors: active) {
-  /* make toggle tracks and thumb visible in forced colors. */
-  button[role='switch'] {
-    & > span:last-of-type,
-    & > span:first-of-type {
-      forced-color-adjust: none;
-    }
+label:has(input:checked) .toggle-background {
+  background: var(--fg);
+  border-color: var(--fg);
+}
 
-    &[aria-checked='false'] > span:last-of-type,
-    &[aria-checked='false'] > span:first-of-type {
-      background: Canvas;
-      border-color: CanvasText;
+label:has(input:hover:not(:checked)) .toggle-background {
+  background: var(--fg-muted);
+}
 
-      & > span {
-        background: CanvasText;
-      }
-    }
+label:has(input:checked:hover) .toggle-background {
+  background: var(--fg-muted);
+  border-color: var(--fg-muted);
+}
 
-    &[aria-checked='true'] > span:last-of-type,
-    &[aria-checked='true'] > span:first-of-type {
-      background: Highlight;
-      border-color: Highlight;
+/* Circle that moves */
+.toggle-background::before {
+  transition: translate 200ms ease-in-out;
+  content: '';
+  width: 20px;
+  height: 20px;
+  top: 1px;
+  inset-inline-start: 1px;
+  position: absolute;
+  border-radius: 9999px;
+  background: var(--bg);
+}
 
-      & > span {
-        background: HighlightText;
-      }
-    }
+@media (prefers-reduced-motion: reduce) {
+  .toggle-background::before {
+    transition: none;
   }
 }
+
+/* Support rtl locales */
+:dir(ltr) input:checked + .toggle-background::before {
+  translate: 20px;
+}
+
+:dir(rtl) input:checked + .toggle-background::before {
+  translate: -20px;
+}
 </style>

app/components/Settings/Toggle.server.vue

@@ -1,18 +1,63 @@
 <script setup lang="ts">
-defineProps<{
-  label?: string
-  description?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    description?: string
+    justify?: 'between' | 'start'
+    reverseOrder?: boolean
+  }>(),
+  {
+    justify: 'between',
+    reverseOrder: false,
+  },
+)
 </script>
 
 <template>
-  <div class="w-full flex items-center justify-between gap-4 py-1 -my-1">
-    <span v-if="label" class="text-sm text-fg font-medium text-start">
-      {{ label }}
-    </span>
-    <SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" />
+  <div
+    class="grid items-center gap-4 py-1 -my-1"
+    :class="[
+      justify === 'start' ? 'justify-start' : '',
+      props.reverseOrder ? 'toggle-reverse' : 'toggle-default',
+    ]"
+  >
+    <template v-if="props.reverseOrder">
+      <SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" style="grid-area: toggle-background" />
+      <span
+        v-if="label"
+        class="text-sm text-fg font-medium text-start"
+        style="grid-area: label-text"
+      >
+        {{ label }}
+      </span>
+    </template>
+    <template v-else>
+      <span
+        v-if="label"
+        class="text-sm text-fg font-medium text-start"
+        style="grid-area: label-text"
+      >
+        {{ label }}
+      </span>
+      <SkeletonBlock
+        class="h-6 w-11 shrink-0 rounded-full"
+        style="grid-area: toggle-background; justify-self: end"
+      />
+    </template>
   </div>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}
   </p>
 </template>
+
+<style scoped>
+.toggle-default {
+  grid-template-areas: 'label-text . toggle-background';
+  grid-template-columns: auto 1fr auto;
+}
+
+.toggle-reverse {
+  grid-template-areas: 'toggle-background . label-text';
+  grid-template-columns: auto 1fr auto;
+}
+</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 },
         }),
     },
     {