Merge pull request #241 from storybookjs/focus-visible

Use focus-visible to hide outlines when using mouse
storybookjs · Jan 5, 2021 · 1f60429 · 1f60429
2 parents 1957d19 + e3ce406
commit 1f60429
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 72 deletions.
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -69,14 +69,6 @@ export const StyledButton = styled.button`
       &:active {
         transform: translate3d(0, 0, 0);
       }
-
-      &:focus {
-        box-shadow: ${rgba(color.primary, 0.4)} 0 1px 9px 2px;
-      }
-
-      &:focus:hover {
-        box-shadow: ${rgba(color.primary, 0.2)} 0 8px 18px 0px;
-      }
     `}
 
   ${Text} {
@@ -168,12 +160,6 @@ export const StyledButton = styled.button`
           &:active {
             box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
           }
-          &:focus {
-            box-shadow: ${rgba(color.primary, 0.4)} 0 1px 9px 2px;
-          }
-          &:focus:hover {
-            box-shadow: ${rgba(color.primary, 0.2)} 0 8px 18px 0px;
-          }
         `
       }
     `}
@@ -193,12 +179,6 @@ export const StyledButton = styled.button`
           &:active {
             box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
           }
-          &:focus {
-            box-shadow: ${rgba(color.secondary, 0.4)} 0 1px 9px 2px;
-          }
-          &:focus:hover {
-            box-shadow: ${rgba(color.secondary, 0.2)} 0 8px 18px 0px;
-          }
         `
       }
     `}
@@ -218,12 +198,6 @@ export const StyledButton = styled.button`
           &:active {
             box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
           }
-          &:focus {
-            box-shadow: ${rgba(color.darkest, 0.15)} 0 1px 9px 2px;
-          }
-          &:focus:hover {
-            box-shadow: ${rgba(color.darkest, 0.05)} 0 8px 18px 0px;
-          }
         `
       }
     `}
@@ -251,16 +225,7 @@ export const StyledButton = styled.button`
           &:active:focus:hover {
             ${/* This prevents the semi-transparent border from appearing atop the background */ ''}
             background: ${opacify(0.05, color.border)};
-            box-shadow:  ${rgba(color.darkest, 0.15)} 0 1px 9px 2px;
-          }
-
-          &:focus {
-            box-shadow: ${opacify(0.05, color.border)} 0 0 0 1px inset, 
-            ${rgba(color.darkest, 0.15)} 0 1px 9px 2px;
-          }
-          &:focus:hover {
-            box-shadow: ${opacify(0.05, color.border)} 0 0 0 1px inset, 
-            ${rgba(color.darkest, 0.05)} 0 8px 18px 0px;
+            box-shadow: transparent 0 0 0 1px inset;
           }
         `
       };
@@ -282,12 +247,6 @@ export const StyledButton = styled.button`
         box-shadow: ${color.primary} 0 0 0 1px inset;
         color: ${color.lightest};
       }
-      &:focus {
-        box-shadow: ${color.primary} 0 0 0 1px inset, ${rgba(color.primary, 0.4)} 0 1px 9px 2px;
-      }
-      &:focus:hover {
-        box-shadow: ${color.primary} 0 0 0 1px inset, ${rgba(color.primary, 0.2)} 0 8px 18px 0px;
-      }
     `};
 
   ${(props) =>
@@ -306,14 +265,6 @@ export const StyledButton = styled.button`
         box-shadow: ${color.secondary} 0 0 0 1px inset;
         color: ${color.lightest};
       }
-      &:focus {
-        box-shadow: ${color.secondary} 0 0 0 1px inset,
-          ${rgba(color.secondary, 0.4)} 0 1px 9px 2px;
-      }
-      &:focus:hover {
-        box-shadow: ${color.secondary} 0 0 0 1px inset,
-          ${rgba(color.secondary, 0.2)} 0 8px 18px 0px;
-      }
     `};
 
     ${(props) =>
@@ -331,12 +282,6 @@ export const StyledButton = styled.button`
             &:active {
               box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
             }
-            &:focus {
-              box-shadow: ${rgba(color.primary, 0.4)} 0 1px 9px 2px;
-            }
-            &:focus:hover {
-              box-shadow: ${rgba(color.primary, 0.2)} 0 8px 18px 0px;
-            }
         `
         }
     `}
@@ -356,12 +301,6 @@ export const StyledButton = styled.button`
             &:active {
               box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
             }
-            &:focus {
-              box-shadow: ${rgba(color.secondary, 0.4)} 0 1px 9px 2px;
-            }
-            &:focus:hover {
-              box-shadow: ${rgba(color.secondary, 0.2)} 0 8px 18px 0px;
-            }
         `
         }
     `}
@@ -382,14 +321,6 @@ export const StyledButton = styled.button`
           box-shadow: ${color.lightest} 0 0 0 1px inset;
           color: ${color.darkest};
         }
-        &:focus {
-          box-shadow: ${color.lightest} 0 0 0 1px inset,
-            ${rgba(color.darkest, 0.4)} 0 1px 9px 2px;
-        }
-        &:focus:hover {
-          box-shadow: ${color.lightest} 0 0 0 1px inset,
-            ${rgba(color.darkest, 0.2)} 0 8px 18px 0px;
-        }
     `};
 `;
 

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -37,7 +37,6 @@ const GithubNavItem = styled(NavItem)`
 `;
 
 const MobileMenuTooltip = styled(WithTooltip)`
-  outline: none;
   &:focus svg {
     color: ${color.secondary};
   }

diff --git a/src/components/shared/global.ts b/src/components/shared/global.ts
@@ -35,7 +35,6 @@ export const bodyStyles = css`
   input,
   textarea,
   select {
-    outline: none;
     font-family: ${typography.type.primary};
   }
 
@@ -122,4 +121,9 @@ export const GlobalStyle = createGlobalStyle`
   body {
     ${bodyStyles}
   }
+  // prevent mouse-clicks from focusing elements
+  // this removes the ugly blue outline
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
 `;