chore(a11y): standardize keyboard focus (#49579)

* Create a focus indicator

* Use two different colors for the palletes.

* Use focus-visible instead.

* Remove redundant css

* Use blue-mid for the focus outline color.

* Add a global fallback.

* Clean up the rules some more.

* Remove some bootstrap styling.

* fix: display focus outline on all sides of lower jaw icon buttons

* fix: breadcrumb focus outlines

---------

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Bruce B <bbsmooth@gmail.com>

client/src/components/Donation/donation.css

@@ -197,8 +197,6 @@
 
 .amount-values > label:focus,
 .amount-values > label:active:hover {
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-color: -webkit-focus-ring-color;
   outline-style: auto;
   outline-width: 5px;
   outline-offset: -2px;

client/src/components/Header/components/universal-nav.css

@@ -93,7 +93,6 @@
 }
 
 .nav-link:focus {
-  outline: 3px solid var(--blue-mid);
   outline-offset: -4px;
 }
 
@@ -147,7 +146,6 @@ li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) {
 button.nav-link:focus {
   color: var(--tertiary-color);
   background-color: var(--tertiary-background);
-  outline: 3px solid var(--blue-mid);
   outline-offset: -4px;
 }
 
@@ -462,12 +460,6 @@ button.nav-link[aria-disabled='true'] {
   box-sizing: content-box;
   margin-inline-start: -30px;
   padding-inline: 35px;
-  outline: 3px solid var(--blue-mid);
-}
-
-.ais-SearchBox-submit:focus,
-.ais-SearchBox-reset:focus {
-  outline: 3px solid var(--blue-mid);
 }
 
 .ais-SearchBox-submit:focus:not(:focus-visible) {

client/src/components/layouts/global.css

@@ -192,6 +192,18 @@ button.close:focus {
   background-color: transparent;
 }
 
+:focus-visible {
+  outline: 3px solid var(--focus-outline-color);
+  outline-offset: 0;
+}
+
+@supports not selector(:focus-visible) {
+  :focus {
+    outline: 3px solid var(--focus-outline-color);
+    outline-offset: 0;
+  }
+}
+
 .modal-content {
   background-color: var(--secondary-background);
   border-radius: 0;
@@ -405,7 +417,6 @@ strong {
 
 .form-control {
   color: var(--primary-color);
-  outline: none;
   border-color: var(--quaternary-background);
   background-color: var(--primary-background);
   -webkit-box-shadow: none !important;

client/src/components/layouts/variables.css

@@ -28,6 +28,7 @@
   --love-dark: #f82153;
   --editor-background-light: #fffffe;
   --editor-background-dark: #2a2b40;
+  --focus-outline-color: var(--blue-mid);
   --font-family-sans-serif: 'Lato', sans-serif;
   --font-family-monospace: 'Hack-ZeroSlash', monospace;
 }

client/src/components/profile/components/portfolio-projects.css

@@ -57,7 +57,6 @@
 }
 
 .portfolio-container a:is(:hover, :focus, :focus-visible) {
-  outline: 2px solid var(--blue-mid);
   outline-offset: 2px;
 }
 

client/src/templates/Challenges/classic/classic.css

@@ -109,13 +109,11 @@
 }
 
 #mobile-layout-pane-instructions:focus-visible {
-  outline: 3px solid var(--blue-mid);
   outline-offset: -2px;
 }
 
 @supports not selector(:focus-visible) {
   #mobile-layout-pane-instructions:focus {
-    outline: 3px solid var(--blue-mid);
     outline-offset: -2px;
   }
 }
@@ -137,7 +135,6 @@
 
 /* Focus indicator for tab panel */
 .nav-tabs [role='tab']:focus {
-  outline: 2px solid var(--blue-mid);
   outline-offset: -2px;
 }
 

client/src/templates/Challenges/classic/editor.css

@@ -175,7 +175,6 @@ textarea.inputarea {
 }
 
 .lower-jaw-icon-bar {
-  overflow: hidden;
   display: flex;
   gap: 10px;
   flex-direction: row;
@@ -184,10 +183,6 @@ textarea.inputarea {
   line-height: 0;
 }
 
-.lower-jaw-icon-bar > button:focus {
-  outline: 2px solid var(--blue-mid);
-}
-
 .lower-jaw-icon-bar > button:last-child {
   margin-inline-end: 0;
 }

client/src/templates/Challenges/components/challenge-title.css

@@ -36,7 +36,6 @@
 }
 
 .challenge-title-breadcrumbs ol a:focus {
-  outline: 2px solid var(--secondary-color);
   background-color: inherit;
 }
 
@@ -55,7 +54,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex-grow: 1;
@@ -76,6 +74,7 @@
   border-bottom: calc(1.2rem / 2) solid transparent;
   border-inline-start: calc(1.1rem / 2) solid var(--quaternary-background);
   height: 100%;
+  margin-left: 3px;
 }
 
 .breadcrumb-right {

client/src/templates/Challenges/components/output.css

@@ -15,7 +15,6 @@ pre.output-text code {
 }
 
 .output-text:focus {
-  outline: 2px solid var(--blue-mid);
   outline-offset: -2px;
 }
 

client/src/templates/Introduction/intro.css

@@ -50,11 +50,6 @@ a.cert-tag:active {
   margin: 0 25px 25px;
 }
 
-.block-grid .challenge-jump-link a:focus {
-  outline: 3px solid var(--blue-mid);
-  outline-offset: 0;
-}
-
 .block-grid .challenge-jump-link a:focus:not(:focus-visible) {
   outline: none;
 }
@@ -259,8 +254,7 @@ button.map-title {
 }
 
 .map-challenges-grid .map-challenge-title a:focus {
-  outline: 3px solid var(--secondary-color);
-  outline-offset: -3px;
+  outline-offset: -2px;
 }
 
 .map-challenges-grid .map-challenge-title a:focus:not(:focus-visible) {