From 08860e2cedaccf293933954b8fbd95edac55d87f Mon Sep 17 00:00:00 2001 From: Marcelo Paiva Date: Thu, 26 Feb 2026 07:04:45 -0500 Subject: [PATCH] Add focus ring style for input elements Apply 8px solid blue (rgb(14,99,200)) outline with 4px offset on input:focus for improved keyboard navigation visibility in both the application and public form stylesheets. Co-Authored-By: Claude Sonnet 4.6 --- app/javascript/application.scss | 7 +++++++ app/javascript/form.scss | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/app/javascript/application.scss b/app/javascript/application.scss index 47eeb4f6..7d8600f9 100644 --- a/app/javascript/application.scss +++ b/app/javascript/application.scss @@ -4,6 +4,13 @@ @import "tailwindcss/components"; @import "tailwindcss/utilities"; +input:focus { + outline-color: rgb(14, 99, 200); + outline-style: solid; + outline-width: 8px; + outline-offset: 4px; +} + a[href], input[type='checkbox'], input[type='submit'], diff --git a/app/javascript/form.scss b/app/javascript/form.scss index 92fc6f6a..26fe848c 100644 --- a/app/javascript/form.scss +++ b/app/javascript/form.scss @@ -4,6 +4,13 @@ @import "tailwindcss/components"; @import "tailwindcss/utilities"; +input:focus { + outline-color: rgb(14, 99, 200); + outline-style: solid; + outline-width: 8px; + outline-offset: 4px; +} + a[href], input[type='checkbox'], input[type='submit'],