Use focus-visible instead of focus pseudo selector (#57387)

* Use focus-visible instead of focus

* Fix focus-visible for form control class

* Bring back testing storybook focus class

BUILD.bazel

@@ -70,7 +70,6 @@ js_library(
     deps = [
         "//:node_modules/autoprefixer",
         "//:node_modules/postcss-custom-media",
-        "//:node_modules/postcss-focus-visible",
         "//:node_modules/postcss-inset",
     ],
 )

client/branded/src/search-ui/components/QueryExamples.module.scss

@@ -20,13 +20,13 @@
         box-shadow: none;
     }
 
-    &:focus {
+    &:focus-visible {
         border: 1px solid transparent;
         box-shadow: 0 0 0 0.125rem var(--primary-2);
         outline: none;
     }
 
-    &:active:focus {
+    &:active:focus-visible {
         border: 1px solid var(--border-color);
         box-shadow: none;
     }

client/branded/src/search-ui/components/RepoMetadata.module.scss

@@ -7,7 +7,7 @@
 }
 
 .badge-button {
-    &:focus,
+    &:focus-visible,
     &:hover {
         background-color: var(--badge-dark);
     }

client/branded/src/search-ui/input/SearchContextDropdown.module.scss

@@ -18,18 +18,18 @@
 
     &:hover,
     &:active,
-    &:focus {
+    &:focus-visible {
         text-decoration: none;
         color: var(--search-query-text-color);
     }
 
     &:hover,
-    &:focus {
+    &:focus-visible {
         background-color: var(--color-bg-2);
         border-color: var(--color-bg-2);
     }
 
-    &:focus {
+    &:focus-visible {
         border-color: var(--border-active-color);
         box-shadow: none;
     }

client/jetbrains/webview/src/search/input/JetBrainsToggles.module.scss

@@ -43,7 +43,7 @@
         background-color: var(--jb-hover-button-bg);
     }
 
-    &:focus {
+    &:focus-visible {
         box-shadow: none;
     }
 

client/web/src/enterprise/insights/components/views/card/InsightCard.module.scss

@@ -5,7 +5,7 @@
     cursor: default;
     outline: none;
 
-    &:focus,
+    &:focus-visible,
     &:focus-within {
         box-shadow: var(--focus-box-shadow);
     }

client/web/src/setup-wizard/components/remote-repositories-step/components/navigation/CodeHostsNavigation.module.scss

@@ -35,14 +35,14 @@
     border-bottom-left-radius: 0;
 
     &:hover,
-    &:focus {
+    &:focus-visible {
         color: var(--danger);
         background-color: var(--danger-4);
     }
 
     :global(.theme-dark) & {
         &:hover,
-        &:focus {
+        &:focus-visible {
             color: var(--light-text);
             background-color: var(--danger-2);
         }
@@ -86,7 +86,7 @@
             color: var(--light-text);
 
             &:hover,
-            &:focus {
+            &:focus-visible {
                 color: var(--light-text) !important;
                 background-color: var(--primary-3) !important;
             }
@@ -128,14 +128,14 @@
     border-radius: var(--border-radius);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
         color: var(--danger);
         background-color: var(--danger-4);
     }
 
     :global(.theme-dark) & {
         &:hover,
-        &:focus {
+        &:focus-visible {
             color: var(--light-text);
             background-color: var(--danger-2);
         }

client/wildcard/src/components/Button/Button.module.scss

@@ -44,7 +44,7 @@
 // since button doesn't use disabled attribute we enforce/mimic the native
 // disabled control styles.
 input.btn {
-    &:focus {
+    &:focus-visible {
         outline: 2px solid var(--primary-2);
         outline-offset: 2px;
     }
@@ -79,14 +79,14 @@ input.btn {
     }
 
     &:not(:disabled):not(:global(.disabled)):not([aria-disabled='true']) {
-        &:hover:not(:global(.focus)):not(:focus),
+        &:hover:not(:global(.focus)):not(:focus-visible),
         &:active,
         &:global(.active) {
             text-decoration: underline;
             color: var(--link-hover-color);
         }
 
-        &:focus,
+        &:focus-visible,
         &:global(.focus) {
             text-decoration: underline;
 
@@ -137,7 +137,7 @@ input.btn {
     border: none;
     cursor: pointer;
 
-    &:focus-visible:not(:disabled):not(:global(.disabled)):not([aria-disabled='true']) {
+    &.focus:not(:disabled):not(:global(.disabled)):not([aria-disabled='true']) {
         box-shadow: 0 0 0 2px var(--primary-2);
     }
 
@@ -192,14 +192,14 @@ input.btn {
     }
 
     &:not(:disabled):not(:global(.disabled)):not([aria-disabled='true']) {
-        &:hover:not(:global(.focus)):not(:focus),
+        &:hover:not(:global(.focus)):not(:focus-visible),
         &:active,
         &:global(.active) {
             color: var(--btn-text-color);
             background-color: var(--btn-dark-color-variant);
         }
 
-        &:focus,
+        &:focus-visible,
         &:global(.focus) {
             color: var(--btn-text-color);
             background-color: var(--btn-base-color);
@@ -247,7 +247,7 @@ input.btn {
             fill: var(--btn-base-color);
         }
 
-        &:hover:not(:global(.focus)):not(:focus),
+        &:hover:not(:global(.focus)):not(:focus-visible),
         &:active,
         &:global(.active) {
             background-color: var(--color-bg-1);
@@ -267,7 +267,7 @@ input.btn {
             }
         }
 
-        &:focus,
+        &:focus-visible,
         &:global(.focus) {
             color: var(--body-color);
             background-color: var(--body-bg);
@@ -358,7 +358,7 @@ input.btn {
         }
 
         &:not(:disabled):not(:global(.disabled)):not([aria-disabled='true']) {
-            &:hover:not(:global(.focus)):not(:focus),
+            &:hover:not(:global(.focus)):not(:focus-visible),
             &:active,
             &:global(.active) {
                 text-decoration: none;
@@ -370,7 +370,7 @@ input.btn {
                 }
             }
 
-            &:focus,
+            &:focus-visible,
             &:global(.focus) {
                 box-shadow: 0 0 0 2px var(--primary-2);
             }

client/wildcard/src/global-styles/base.scss

@@ -25,10 +25,11 @@
 
 // Show a focus ring when performing keyboard navigation. Uses the polyfill at
 // https://github.com/WICG/focus-visible because few browsers support :focus-visible.
-:focus:not(:focus-visible) {
+:focus:not(.focus-visible) {
     outline: none;
 }
-:focus-visible {
+
+.focus-visible {
     outline: 0;
     box-shadow: var(--focus-box-shadow);
 }

client/wildcard/src/global-styles/custom-forms.scss

@@ -40,10 +40,10 @@
     appearance: none;
     transition: var(--custom-forms-transition);
 
-    &:focus {
-        border-color: var(--input-focus-border-color);
+    &.focus-visible {
         outline: 0;
         box-shadow: var(--input-focus-box-shadow);
+        border-color: var(--input-focus-border-color);
 
         &::-ms-value {
             // For visual consistency with other platforms/browsers,

client/wildcard/src/global-styles/forms.scss

@@ -62,15 +62,6 @@ button {
     border-radius: 0;
 }
 
-// Work around a Firefox/IE bug where the transparent `button` background
-// results in a loss of the default `button` focus styles.
-//
-// Credit: https://github.com/suitcss/base/
-button:focus {
-    outline: 1px dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-}
-
 input,
 button,
 select,
@@ -213,7 +204,7 @@ progress {
         opacity: 1;
     }
 
-    &:focus {
+    &.focus-visible {
         border-color: var(--input-focus-border-color);
         box-shadow: var(--input-focus-box-shadow);
     }