Merge pull request #7724 from ethereum/migrateVisuallyHiddenToChakra

Refactor VisuallyHidden component to use ChakraUI

Author: corwintines

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"
@@ -148,43 +148,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>
+                <ZenMode>
+                  <Nav path={path} />
+                  {shouldShowSideNav && <SideNavMobile path={path} />}
+                </ZenMode>
+                <SkipLinkAnchor id="main-content" />
+                <MainContainer>
+                  {shouldShowSideNav && (
+                    <ZenMode>
+                      <SideNav path={path} />
+                    </ZenMode>
+                  )}
+                  <MainContent>
                     <Main>{children}</Main>
-                  </ZenModeContext.Provider>
-                </MainContent>
-              </MainContainer>
-              <VisuallyHidden isHidden={isZenMode}>
-                <Footer />
-              </VisuallyHidden>
-              <FeedbackWidget />
-            </ContentContainer>
+                  </MainContent>
+                </MainContainer>
+                <ZenMode>
+                  <Footer />
+                </ZenMode>
+                <FeedbackWidget />
+              </ContentContainer>
+            </ZenModeContext.Provider>
           </ThemeProvider>
         </ApolloProvider>
       </IntlProvider>

src/components/VisuallyHidden.tsx

@@ -0,0 +1,20 @@
+import React, { useContext } from "react"
+import { VisuallyHidden as ChakraVisuallyHidden } from "@chakra-ui/react"
+
+import { ZenModeContext } from "../contexts/ZenModeContext"
+
+export interface IProps {
+  children?: React.ReactNode
+}
+
+const ZenMode: React.FC<IProps> = ({ children }) => {
+  const { isZenMode } = useContext(ZenModeContext)
+
+  return isZenMode ? (
+    <ChakraVisuallyHidden>{children}</ChakraVisuallyHidden>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default ZenMode