From a4872d64d3f9e46b0b6d47651b93113b126e4511 Mon Sep 17 00:00:00 2001 From: Marcelo Paiva Date: Thu, 26 Feb 2026 08:22:39 -0500 Subject: [PATCH] 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 --- app/javascript/application.scss | 12 ++++++++++++ app/javascript/form.scss | 12 ++++++++++++ 2 files changed, 24 insertions(+) diff --git a/app/javascript/application.scss b/app/javascript/application.scss index 713db71d..8a685a2a 100644 --- a/app/javascript/application.scss +++ b/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'], diff --git a/app/javascript/form.scss b/app/javascript/form.scss index 28ac4b1a..e47af9ac 100644 --- a/app/javascript/form.scss +++ b/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'],