diff --git a/src/collections/handbook/faq/faq-wrapper.style.js b/src/collections/handbook/faq/faq-wrapper.style.js index 5e1aa8fe671107..004f5de8a1ca35 100644 --- a/src/collections/handbook/faq/faq-wrapper.style.js +++ b/src/collections/handbook/faq/faq-wrapper.style.js @@ -36,7 +36,7 @@ const HandbookFaqWrapper = styled.div` } > div { - &:focus { + &:focus:not(:focus-visible) { outline: none; } } diff --git a/src/components/Features-carousel/FeaturesCarousel.style.js b/src/components/Features-carousel/FeaturesCarousel.style.js index 894e668865df8f..fba8bb303d04cb 100644 --- a/src/components/Features-carousel/FeaturesCarousel.style.js +++ b/src/components/Features-carousel/FeaturesCarousel.style.js @@ -55,7 +55,7 @@ export const FeaturesWrapper = styled.div` /* nuka-carousel overrides */ & :global { & .slider-frame, - & .slider-slide:focus { + & .slider-slide:focus:not(:focus-visible) { outline: none !important; } } diff --git a/src/components/Ripple-Effect-Animation/ripple-effect.style.js b/src/components/Ripple-Effect-Animation/ripple-effect.style.js index 74470cfb43b4f6..350b770c457b90 100644 --- a/src/components/Ripple-Effect-Animation/ripple-effect.style.js +++ b/src/components/Ripple-Effect-Animation/ripple-effect.style.js @@ -45,7 +45,7 @@ button { animation: ripple 1.5s linear infinite; transform: scale(1.1); } - &:focus { + &:focus:not(:focus-visible) { outline: none; } @@ -72,4 +72,4 @@ button { } } `; -export default RippleWrapper; \ No newline at end of file +export default RippleWrapper; diff --git a/src/reusecore/Accordion/accordion.style.js b/src/reusecore/Accordion/accordion.style.js index dadc80240c3b42..e1be41e631bbfd 100644 --- a/src/reusecore/Accordion/accordion.style.js +++ b/src/reusecore/Accordion/accordion.style.js @@ -47,7 +47,7 @@ export const AccordionTitleWrapper = styled(AccordionItemHeading)` } } - &:focus { + &:focus:not(:focus-visible) { outline: none; } * { diff --git a/src/reusecore/Search/searchbox.style.js b/src/reusecore/Search/searchbox.style.js index f497917cd0f618..e4c27c5ac64a2b 100644 --- a/src/reusecore/Search/searchbox.style.js +++ b/src/reusecore/Search/searchbox.style.js @@ -50,7 +50,6 @@ export const SearchWrapper = styled.div` input{ border:none; - outline: none; box-shadow: rgba(100, 100, 111, 0.2) 0px 3px 9px 0px; } diff --git a/src/sections/Adventures-Callout/discuss.style.js b/src/sections/Adventures-Callout/discuss.style.js index 66ca1f8edf5611..a543dd9070dc1b 100644 --- a/src/sections/Adventures-Callout/discuss.style.js +++ b/src/sections/Adventures-Callout/discuss.style.js @@ -57,7 +57,7 @@ const AdventuresWrapper = styled.div` margin-top: 1rem; } &:hover, - &:focus { + &:focus:not(:focus-visible) { outline: none; } &:hover{ diff --git a/src/sections/Blog/Blog-sidebar/blogSidebar.style.js b/src/sections/Blog/Blog-sidebar/blogSidebar.style.js index 7d478f750f48b6..bc71533aa9e897 100644 --- a/src/sections/Blog/Blog-sidebar/blogSidebar.style.js +++ b/src/sections/Blog/Blog-sidebar/blogSidebar.style.js @@ -215,8 +215,7 @@ const BlogSideBarWrapper = styled.div` .logo{ width: 100%; } - &:hover, - &:focus { + &:focus:not(:focus-visible) { outline: none; } &:hover{ diff --git a/src/sections/DeployServiceMesh/DeployServiceMesh.style.js b/src/sections/DeployServiceMesh/DeployServiceMesh.style.js index 1ea50b406068a5..b65c9ece058806 100644 --- a/src/sections/DeployServiceMesh/DeployServiceMesh.style.js +++ b/src/sections/DeployServiceMesh/DeployServiceMesh.style.js @@ -142,7 +142,6 @@ const DeployServiceMeshWrapper = styled.div` height: 10px; border-radius: 5px; background: #d3d3d3; - outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; @@ -327,4 +326,4 @@ const DeployServiceMeshWrapper = styled.div` } `; -export default DeployServiceMeshWrapper; \ No newline at end of file +export default DeployServiceMeshWrapper; diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index 68a800eaac8f16..529c100da3af81 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -57,8 +57,7 @@ const DiscussWrapper = styled.div` margin-bottom: 0rem; margin-top: 1rem; } - &:hover, - &:focus { + &:focus:not(:focus-visible) { outline: none; } &:hover{ @@ -182,4 +181,4 @@ const DiscussWrapper = styled.div` } `; -export default DiscussWrapper; \ No newline at end of file +export default DiscussWrapper; diff --git a/src/sections/General/Faq/faqSection.style.js b/src/sections/General/Faq/faqSection.style.js index 1630a14e8e5eb6..44f4dc227c96c5 100644 --- a/src/sections/General/Faq/faqSection.style.js +++ b/src/sections/General/Faq/faqSection.style.js @@ -134,7 +134,7 @@ const FaqSectionWrapper = styled.section` color: ${props => props.theme.white}; } > div { - &:focus { + &:focus:not(:focus-visible) { outline: none; } } @@ -229,4 +229,4 @@ const FaqSectionWrapper = styled.section` } `; -export default FaqSectionWrapper; \ No newline at end of file +export default FaqSectionWrapper; diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js index 056436c08b8acb..0a5679b1e99beb 100644 --- a/src/sections/General/Navigation/navigation.style.js +++ b/src/sections/General/Navigation/navigation.style.js @@ -778,7 +778,6 @@ const NavigationWrap = styled.header` .toggle { --size: 1.5rem; appearance: none; - outline: none; cursor: pointer; width: var(--size); height: var(--size); diff --git a/src/sections/Home/So-Special-Section/so-special-style.js b/src/sections/Home/So-Special-Section/so-special-style.js index f5b69762b3b7e0..767477f464ab2f 100644 --- a/src/sections/Home/So-Special-Section/so-special-style.js +++ b/src/sections/Home/So-Special-Section/so-special-style.js @@ -138,7 +138,6 @@ const SoSpecialWrapper = styled.div` background-color:${(props) => props.theme.body}; color:black; height: 30rem; - outline:none; border:none; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } diff --git a/src/sections/Learn/Workshop-grid/WorkshopsGrid.style.js b/src/sections/Learn/Workshop-grid/WorkshopsGrid.style.js index ceeab7b51e1e2c..fb0a5f27071f6a 100644 --- a/src/sections/Learn/Workshop-grid/WorkshopsGrid.style.js +++ b/src/sections/Learn/Workshop-grid/WorkshopsGrid.style.js @@ -56,7 +56,6 @@ export const WorkshopPageWrapper = styled.div` border: none; font-family: "Qanelas Soft", "Open Sans", sans-serif; border-radius: 0.9375rem; - outline: none; } .left-icons { diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index 1f172fc6c478a5..2b0221efb59c24 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -928,7 +928,6 @@ const SistentWrapper = styled.div` border-radius: 4px; border: 1px solid #ccc; font-size: 16px; - outline: none; transition: border-color 0.3s ease; } diff --git a/src/sections/app.style.js b/src/sections/app.style.js index af1babbfa49a6f..fe36182d58519f 100644 --- a/src/sections/app.style.js +++ b/src/sections/app.style.js @@ -20,9 +20,14 @@ const GlobalStyle = createGlobalStyle` -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - *:focus { + *:focus:not(:focus-visible) { outline: none; } + + *:focus-visible { + outline: 3px solid ${(props) => props.theme.secondaryColor}; + outline-offset: 3px; + } ::-webkit-scrollbar { width: 0.5rem; } @@ -207,7 +212,6 @@ section{ border: 1px solid rgb(204, 204, 204); background: ${(props) => props.theme.body}; border-radius: 0.5rem; - outline: none; padding: 20px; margin-right: -50%; transform: translate(-50%, -50%); @@ -215,6 +219,10 @@ section{ max-height: 40rem; overflow-y: hidden; + &:focus:not(:focus-visible) { + outline: none; + } + .close-modal-btn { min-width: 2rem; height: 2rem;