From 8ea89c5f5d30a2aa0dacab2bf25816243346c205 Mon Sep 17 00:00:00 2001
From: Joshua <62268199+minimalsm@users.noreply.github.com>
Date: Tue, 6 Sep 2022 16:53:16 +0100
Subject: [PATCH 1/3] Refactor VisuallyHidden component to use ChakraUI

---
 src/components/VisuallyHidden.tsx | 39 ++++++-------------------------
 1 file changed, 7 insertions(+), 32 deletions(-)

diff --git a/src/components/VisuallyHidden.tsx b/src/components/VisuallyHidden.tsx
index b1307c85dba..0b398f9ac89 100644
--- a/src/components/VisuallyHidden.tsx
+++ b/src/components/VisuallyHidden.tsx
@@ -1,36 +1,7 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { VisuallyHidden as VisuallyHiddenSpan } from "@chakra-ui/react"
 
-// "Accessibility/SEO Friendly CSS Hiding"
-// Source: https://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/
-const Container = styled.span`
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  word-wrap: normal !important;
-  &:focus {
-    background-color: #eeeeee;
-    clip: auto !important;
-    clip-path: none;
-    color: #444444;
-    display: block;
-    font-size: 1em;
-    height: auto;
-    left: 5px;
-    line-height: normal;
-    padding: 15px 23px 14px;
-    text-decoration: none;
-    top: 5px;
-    width: auto;
-    z-index: 100000;
-  }
-`
+// Todo: Refactor to from isHidden boolean
 
 export interface IProps {
   children?: React.ReactNode
@@ -38,6 +9,10 @@ export interface IProps {
 }
 
 const VisuallyHidden: React.FC<IProps> = ({ isHidden = false, children }) =>
-  isHidden ? <Container>{children}</Container> : <>{children}</>
+  isHidden ? (
+    <VisuallyHiddenSpan>{children}</VisuallyHiddenSpan>
+  ) : (
+    <>{children}</>
+  )
 
 export default VisuallyHidden

From df2f9b170d34aebc8ebfc4eb3870b64496013b78 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Thu, 3 Nov 2022 11:52:40 -0600
Subject: [PATCH 2/3] change requests and cleanup

---
 src/components/Layout.tsx         | 70 +++++++++++++++----------------
 src/components/VisuallyHidden.tsx | 16 ++++---
 2 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index b86297affd9..aedbfeebde0 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -149,43 +149,41 @@ const Layout: React.FC<IProps> = ({
       <IntlProvider locale={locale!} key={locale} messages={messages}>
         <ApolloProvider client={client}>
           <ThemeProvider theme={theme}>
-            <SkipLink hrefId="#main-content" />
-            <TranslationBanner
-              shouldShow={shouldShowTranslationBanner}
-              isPageContentEnglish={isPageContentEnglish}
-              isPageRightToLeft={isPageRightToLeft}
-              originalPagePath={pageContext.originalPath!}
-            />
-            <TranslationBannerLegal
-              shouldShow={isLegal}
-              isPageRightToLeft={isPageRightToLeft}
-              originalPagePath={pageContext.originalPath!}
-            />
-            <ContentContainer>
-              <VisuallyHidden isHidden={isZenMode}>
-                <Nav path={path} />
-                {shouldShowSideNav && <SideNavMobile path={path} />}
-              </VisuallyHidden>
-              <SkipLinkAnchor id="main-content" />
-              <MainContainer>
-                {shouldShowSideNav && (
-                  <VisuallyHidden isHidden={isZenMode}>
-                    <SideNav path={path} />
-                  </VisuallyHidden>
-                )}
-                <MainContent>
-                  <ZenModeContext.Provider
-                    value={{ isZenMode, handleZenModeChange }}
-                  >
+            <ZenModeContext.Provider value={{ isZenMode, handleZenModeChange }}>
+              <SkipLink hrefId="#main-content" />
+              <TranslationBanner
+                shouldShow={shouldShowTranslationBanner}
+                isPageContentEnglish={isPageContentEnglish}
+                isPageRightToLeft={isPageRightToLeft}
+                originalPagePath={pageContext.originalPath!}
+              />
+              <TranslationBannerLegal
+                shouldShow={isLegal}
+                isPageRightToLeft={isPageRightToLeft}
+                originalPagePath={pageContext.originalPath!}
+              />
+              <ContentContainer>
+                <VisuallyHidden>
+                  <Nav path={path} />
+                  {shouldShowSideNav && <SideNavMobile path={path} />}
+                </VisuallyHidden>
+                <SkipLinkAnchor id="main-content" />
+                <MainContainer>
+                  {shouldShowSideNav && (
+                    <VisuallyHidden>
+                      <SideNav path={path} />
+                    </VisuallyHidden>
+                  )}
+                  <MainContent>
                     <Main>{children}</Main>
-                  </ZenModeContext.Provider>
-                </MainContent>
-              </MainContainer>
-              <VisuallyHidden isHidden={isZenMode}>
-                <Footer />
-              </VisuallyHidden>
-              <FeedbackWidget />
-            </ContentContainer>
+                  </MainContent>
+                </MainContainer>
+                <VisuallyHidden>
+                  <Footer />
+                </VisuallyHidden>
+                <FeedbackWidget />
+              </ContentContainer>
+            </ZenModeContext.Provider>
           </ThemeProvider>
         </ApolloProvider>
       </IntlProvider>
diff --git a/src/components/VisuallyHidden.tsx b/src/components/VisuallyHidden.tsx
index 0b398f9ac89..731179aedec 100644
--- a/src/components/VisuallyHidden.tsx
+++ b/src/components/VisuallyHidden.tsx
@@ -1,18 +1,22 @@
-import React from "react"
-import { VisuallyHidden as VisuallyHiddenSpan } from "@chakra-ui/react"
+import React, { useContext } from "react"
+import { VisuallyHidden as ChakraVisuallyHidden } from "@chakra-ui/react"
+
+import { ZenModeContext } from "../contexts/ZenModeContext"
 
 // Todo: Refactor to from isHidden boolean
 
 export interface IProps {
   children?: React.ReactNode
-  isHidden?: boolean
 }
 
-const VisuallyHidden: React.FC<IProps> = ({ isHidden = false, children }) =>
-  isHidden ? (
-    <VisuallyHiddenSpan>{children}</VisuallyHiddenSpan>
+const VisuallyHidden: React.FC<IProps> = ({ children }) => {
+  const { isZenMode } = useContext(ZenModeContext)
+
+  return isZenMode ? (
+    <ChakraVisuallyHidden>{children}</ChakraVisuallyHidden>
   ) : (
     <>{children}</>
   )
+}
 
 export default VisuallyHidden

From bf32b5d8dcb3fc6936e162c00599dd82b00bf658 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Thu, 10 Nov 2022 12:44:08 -0800
Subject: [PATCH 3/3] update component name to ZenMode

---
 src/components/Layout.tsx                          | 14 +++++++-------
 src/components/{VisuallyHidden.tsx => ZenMode.tsx} |  6 ++----
 2 files changed, 9 insertions(+), 11 deletions(-)
 rename src/components/{VisuallyHidden.tsx => ZenMode.tsx} (75%)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index aedbfeebde0..883efdc88ed 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -9,7 +9,7 @@ import { LocaleProvider } from "gatsby-theme-i18n"
 import { lightTheme, darkTheme } from "../theme"
 
 import Footer from "./Footer"
-import VisuallyHidden from "./VisuallyHidden"
+import ZenMode from "./ZenMode"
 import Nav from "./Nav"
 import SideNav from "./SideNav"
 import SideNavMobile from "./SideNavMobile"
@@ -163,24 +163,24 @@ const Layout: React.FC<IProps> = ({
                 originalPagePath={pageContext.originalPath!}
               />
               <ContentContainer>
-                <VisuallyHidden>
+                <ZenMode>
                   <Nav path={path} />
                   {shouldShowSideNav && <SideNavMobile path={path} />}
-                </VisuallyHidden>
+                </ZenMode>
                 <SkipLinkAnchor id="main-content" />
                 <MainContainer>
                   {shouldShowSideNav && (
-                    <VisuallyHidden>
+                    <ZenMode>
                       <SideNav path={path} />
-                    </VisuallyHidden>
+                    </ZenMode>
                   )}
                   <MainContent>
                     <Main>{children}</Main>
                   </MainContent>
                 </MainContainer>
-                <VisuallyHidden>
+                <ZenMode>
                   <Footer />
-                </VisuallyHidden>
+                </ZenMode>
                 <FeedbackWidget />
               </ContentContainer>
             </ZenModeContext.Provider>
diff --git a/src/components/VisuallyHidden.tsx b/src/components/ZenMode.tsx
similarity index 75%
rename from src/components/VisuallyHidden.tsx
rename to src/components/ZenMode.tsx
index 731179aedec..a2165cf8840 100644
--- a/src/components/VisuallyHidden.tsx
+++ b/src/components/ZenMode.tsx
@@ -3,13 +3,11 @@ import { VisuallyHidden as ChakraVisuallyHidden } from "@chakra-ui/react"
 
 import { ZenModeContext } from "../contexts/ZenModeContext"
 
-// Todo: Refactor to from isHidden boolean
-
 export interface IProps {
   children?: React.ReactNode
 }
 
-const VisuallyHidden: React.FC<IProps> = ({ children }) => {
+const ZenMode: React.FC<IProps> = ({ children }) => {
   const { isZenMode } = useContext(ZenModeContext)
 
   return isZenMode ? (
@@ -19,4 +17,4 @@ const VisuallyHidden: React.FC<IProps> = ({ children }) => {
   )
 }
 
-export default VisuallyHidden
+export default ZenMode