From 6a02ce8fe76baee75f9bc2d75c20f1a9ee0a85e2 Mon Sep 17 00:00:00 2001
From: Mark Eaton <MarkEEaton@users.noreply.github.com>
Date: Sun, 22 Feb 2026 22:22:23 -0500
Subject: [PATCH] improve focus indicators: orange in dark mode, broader
 coverage, fix width

- Change dark-mode --focus-outline from #6ea8fe to #ff4e00 (kbccorange)
- Replace enumerated focus selectors with broad rule covering all a, button,
  input, select, and [tabindex] elements with !important
- Add display:block to a.ga-by-jumbotron to prevent width shrinking on focus

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 groups/home/bootstrap5/home1.css | 44 +++++++++++++++-----------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/groups/home/bootstrap5/home1.css b/groups/home/bootstrap5/home1.css
index c54563e..6f76ab0 100644
--- a/groups/home/bootstrap5/home1.css
+++ b/groups/home/bootstrap5/home1.css
@@ -15,7 +15,7 @@
     --bg: #1a1a2e;
     --bg-surface: #25253e;
     --hover-dark: #555;
-    --focus-outline: #6ea8fe;
+    --focus-outline: #ff4e00;
     --link-color: #ccc;
   }
 
@@ -138,31 +138,27 @@
     color: white;
   }
 
-  /* Accessible focus indicators for primary navigation elements */
-  #hamburger:focus,
-  #hamburger:focus-visible,
-  #login-div:focus,
-  #login-div:focus-visible,
-  .searchmenu:focus,
-  .searchmenu:focus-visible,
-  .nav-jumbotron-link:focus,
-  .nav-jumbotron-link:focus-visible,
-  .ga-by-jumbotron:focus,
-  .ga-by-jumbotron:focus-visible,
-  .ga-library-links:focus,
-  .ga-library-links:focus-visible,
-  /* OneSearch widget (central search form) */
-  .onesearch-jumbotron input:focus,
-  .onesearch-jumbotron input:focus-visible,
-  .onesearch-jumbotron button:focus,
-  .onesearch-jumbotron button:focus-visible,
-  /* Navigation dropdown toggles */
-  .dropdown-toggle:focus,
-  .dropdown-toggle:focus-visible {
-    outline: 3px solid var(--focus-outline); /* high-contrast blue */
-    outline-offset: 2px;
+  /* Ensure jumbotron links fill full width (prevents shrinking on focus) */
+  a.ga-by-jumbotron {
+    display: block;
   }
 
+  /* Accessible focus indicators for all interactive elements */
+  a:focus,
+  a:focus-visible,
+  button:focus,
+  button:focus-visible,
+  input:focus,
+  input:focus-visible,
+  select:focus,
+  select:focus-visible,
+  [tabindex]:focus,
+  [tabindex]:focus-visible {
+    outline: 3px solid var(--focus-outline) !important;
+    outline-offset: 2px !important;
+  }
+
+
   /* style alert */
   #hours-content-container {    /* this id comes from the components libguide */
     background-color: var(--kbccblue);