feat(client): hide the outline instead of removing it (#49716)

* feat(client): hide the outline instead of removing it

* remove the old :focus outline values

Co-authored-by: Bruce B <bbsmooth@gmail.com>

---------

Co-authored-by: Bruce B <bbsmooth@gmail.com>

client/src/components/Donation/donation.css

@@ -109,7 +109,7 @@
 
 .donation-form .form-control:focus {
   border-color: #66afe9;
-  outline: 0;
+  outline-color: transparent;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
     0 0 8px rgba(102, 175, 233, 0.6);
 }

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

@@ -110,7 +110,7 @@
   text-decoration: none;
   background-color: var(--gray-10);
   cursor: pointer;
-  outline: none !important;
+  outline-color: transparent !important;
 }
 
 li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) {
@@ -147,18 +147,12 @@ li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) {
   border-bottom: 0.1rem solid var(--gray-45) !important;
 }
 
-button.nav-link:focus {
+button.nav-link:focus-visible {
   color: var(--tertiary-color);
   background-color: var(--tertiary-background);
   outline-offset: -4px;
 }
 
-button.nav-link:focus:not(:focus-visible) {
-  background-color: inherit;
-  color: #fff;
-  outline: none;
-}
-
 button.nav-link:not([aria-disabled='true']):hover {
   background-color: var(--gray-10);
   color: var(--theme-color);
@@ -323,16 +317,10 @@ button.nav-link[aria-disabled='true'] {
 }
 
 .exposed-button-nav:focus {
-  outline: 3px solid var(--blue-mid);
-  outline-offset: 0;
   background-color: var(--gray-90);
   color: var(--gray-00);
 }
 
-.exposed-button-nav:focus:not(:focus-visible) {
-  outline: none;
-}
-
 .avatar-nav-link {
   display: block;
   height: 31px;
@@ -466,10 +454,6 @@ button.nav-link[aria-disabled='true'] {
   padding-inline: 35px;
 }
 
-.ais-SearchBox-submit:focus:not(:focus-visible) {
-  outline: none;
-}
-
 #toggle-button-nav .menu-btn-text,
 #universal-nav .login-btn-text {
   display: inline-block;

client/src/components/layouts/global.css

@@ -313,7 +313,7 @@ fieldset[disabled] .btn-primary.focus {
   text-decoration: underline;
   background: transparent;
   padding: 0;
-  outline: 0;
+  outline-color: transparent;
 }
 .btn-link:hover,
 .btn-link:focus:active {
@@ -426,7 +426,7 @@ strong {
 }
 
 input {
-  outline: none;
+  outline-color: transparent;
   border-color: var(--quaternary-background);
   -webkit-box-shadow: none !important;
   -moz-box-shadow: none !important;

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

@@ -123,7 +123,7 @@
 }
 
 .timeline-pagination_list_item > button {
-  outline: none;
+  outline-color: transparent;
 }
 
 /* Timeline table styles */

client/src/components/search/searchBar/searchbar-base.css

@@ -245,7 +245,7 @@ a[class^='ais-'] {
   border-radius: 0px;
   -webkit-transition: background-color 0.2s ease-out;
   transition: background-color 0.2s ease-out;
-  outline: none;
+  outline-color: transparent;
 }
 .ais-ClearRefinements-button:hover,
 .ais-ClearRefinements-button:focus,
@@ -485,7 +485,7 @@ a[class^='ais-'] {
   border-radius: 0px;
   -webkit-transition: 0.2s ease-out;
   transition: 0.2s ease-out;
-  outline: none;
+  outline-color: transparent;
 }
 .ais-RangeInput-submit:hover,
 .ais-RangeInput-submit:focus {

client/src/components/settings/sound.css

@@ -11,7 +11,7 @@ input[type='range'] {
 }
 
 input[type='range']:focus {
-  outline: none;
+  outline-color: transparent;
 }
 /* Special styling for WebKit/Blink */
 input[type='range']::-webkit-slider-thumb {

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

@@ -170,7 +170,3 @@
 .nav-tabs [role='tab']:focus {
   outline-offset: -3px;
 }
-
-.nav-tabs [role='tab']:focus:not(:focus-visible) {
-  outline: none;
-}

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

@@ -39,10 +39,6 @@
   background-color: inherit;
 }
 
-.challenge-title-breadcrumbs ol a:focus:not(:focus-visible) {
-  outline: none;
-}
-
 .challenge-title-breadcrumbs ol a:hover {
   background-color: inherit;
   text-decoration: underline;

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

@@ -1,4 +1,4 @@
 /* hide the outline for the HotKeys component */
 div[tabindex='-1']:focus {
-  outline: none;
+  outline-color: transparent;
 }

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

@@ -14,10 +14,12 @@ pre.output-text code {
   padding: 2px 4px;
 }
 
-.output-text:focus {
+.output-text:focus-visible {
   outline-offset: -2px;
 }
 
-.output-text:focus:not(:focus-visible) {
-  outline: none;
+@supports not selector(:focus-visible) {
+  .output-text:focus {
+    outline-offset: -2px;
+  }
 }

client/src/templates/Introduction/intro.css

@@ -50,10 +50,6 @@ a.cert-tag:active {
   margin: 0 25px 25px;
 }
 
-.block-grid .challenge-jump-link a:focus:not(:focus-visible) {
-  outline: none;
-}
-
 .block-title-translation-cta {
   white-space: nowrap;
   padding: 0.2em 0.5em;
@@ -257,10 +253,6 @@ button.map-title {
   outline-offset: -2px;
 }
 
-.map-challenges-grid .map-challenge-title a:focus:not(:focus-visible) {
-  outline: none;
-}
-
 .map-challenges-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, 3.4rem);