Transfer focus ring from toggle to full menu row via :has()

The Test mode toggle checkbox is small; keyboard focus should highlight
the entire row. Use .menu label:has(.toggle:focus-visible) to apply the
outline on the label container, and suppress it on the toggle itself.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/javascript/application.scss

@@ -21,6 +21,18 @@
   outline-offset: 4px;
 }
 
+/* Transfer focus ring from toggle to its full menu row label */
+.menu label:has(.toggle:focus-visible) {
+  outline-color: rgb(14, 99, 200);
+  outline-style: solid;
+  outline-width: 8px;
+  outline-offset: 4px;
+}
+
+.menu label .toggle:focus-visible {
+  outline: none;
+}
+
 a[href],
 input[type='checkbox'],
 input[type='submit'],

app/javascript/form.scss

@@ -21,6 +21,18 @@
   outline-offset: 4px;
 }
 
+/* Transfer focus ring from toggle to its full menu row label */
+.menu label:has(.toggle:focus-visible) {
+  outline-color: rgb(14, 99, 200);
+  outline-style: solid;
+  outline-width: 8px;
+  outline-offset: 4px;
+}
+
+.menu label .toggle:focus-visible {
+  outline: none;
+}
+
 a[href],
 input[type='checkbox'],
 input[type='submit'],