From d26cde59e74302478361cdab36da06f786dad073 Mon Sep 17 00:00:00 2001 From: Marcelo Paiva Date: Thu, 26 Feb 2026 07:05:05 -0500 Subject: [PATCH] Broaden focus ring to all focusable elements via :focus-visible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace input:focus with :focus-visible to cover all focusable elements (buttons, links, inputs, selects, textareas, [tabindex] elements). Using :focus-visible shows the ring only for keyboard navigation, not mouse clicks — the correct accessibility behavior per WCAG 2.4.11. Co-Authored-By: Claude Sonnet 4.6 --- app/javascript/application.scss | 2 +- app/javascript/form.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/application.scss b/app/javascript/application.scss index 7d8600f9..1243633a 100644 --- a/app/javascript/application.scss +++ b/app/javascript/application.scss @@ -4,7 +4,7 @@ @import "tailwindcss/components"; @import "tailwindcss/utilities"; -input:focus { +:focus-visible { outline-color: rgb(14, 99, 200); outline-style: solid; outline-width: 8px; diff --git a/app/javascript/form.scss b/app/javascript/form.scss index 26fe848c..c6f01593 100644 --- a/app/javascript/form.scss +++ b/app/javascript/form.scss @@ -4,7 +4,7 @@ @import "tailwindcss/components"; @import "tailwindcss/utilities"; -input:focus { +:focus-visible { outline-color: rgb(14, 99, 200); outline-style: solid; outline-width: 8px;