From 84cff71376f0fd2f0d0b73df3c628cdaa5290204 Mon Sep 17 00:00:00 2001 From: domyen Date: Tue, 29 Dec 2020 16:02:22 -0500 Subject: [PATCH 1/2] Use focus-visible to hide outlines when using mouse and show when using keyboard --- src/components/Button.js | 71 +------------------------------- src/components/header/Header.tsx | 1 - src/components/shared/global.ts | 6 ++- 3 files changed, 6 insertions(+), 72 deletions(-) diff --git a/src/components/Button.js b/src/components/Button.js index 051ec2b7..e4f4f2f5 100644 --- 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 index e60a7127..af358fc1 100644 --- 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 index b712cb21..94b764d7 100644 --- 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; + } `; From e3ce406faa4a72d9a5ef15029ae51b80e873e482 Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 4 Jan 2021 17:22:25 -0800 Subject: [PATCH 2/2] remove unneccessary * selector --- src/components/shared/global.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shared/global.ts b/src/components/shared/global.ts index 94b764d7..8d474bcf 100644 --- a/src/components/shared/global.ts +++ b/src/components/shared/global.ts @@ -123,7 +123,7 @@ export const GlobalStyle = createGlobalStyle` } // prevent mouse-clicks from focusing elements // this removes the ugly blue outline - * :focus:not(:focus-visible) { + :focus:not(:focus-visible) { outline: none; } `;