Use main, footer, nav and their ARIA equivalent for better a11y (#365)

UnlyEd · Jun 10, 2021 · 2f4e9f1 · 2f4e9f1
1 parent 6a2766f
commit 2f4e9f1
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 56 deletions.
diff --git a/src/layouts/core/components/CoreLayout.tsx b/src/layouts/core/components/CoreLayout.tsx
@@ -161,7 +161,8 @@ const CoreLayout: React.FunctionComponent<Props> = (props): JSX.Element => {
         },
       })}
     >
-      <div
+      <main
+        role={'main'}
         className={layoutName}
         css={css`
           ${layoutBaseCSS || ''}
@@ -217,7 +218,7 @@ const CoreLayout: React.FunctionComponent<Props> = (props): JSX.Element => {
             <Footer />
           )
         }
-      </div>
+      </main>
     </Amplitude>
   );
 };

diff --git a/src/layouts/demo/components/DemoFooter.tsx b/src/layouts/demo/components/DemoFooter.tsx
@@ -51,8 +51,9 @@ const DemoFooter: React.FunctionComponent<Props> = (props) => {
   const currentYear = (new Date()).getFullYear();
 
   return (
-    <div
+    <footer
       id="footer"
+      role="contentinfo"
       className={'footer'}
       style={style}
       css={css`
@@ -173,7 +174,7 @@ const DemoFooter: React.FunctionComponent<Props> = (props) => {
           />
         </div>
       </section>
-    </div>
+    </footer>
   );
 };
 

diff --git a/src/layouts/demo/components/DemoLayout.tsx b/src/layouts/demo/components/DemoLayout.tsx
@@ -80,61 +80,66 @@ const DemoLayout: React.FunctionComponent<Props> = (props): JSX.Element => {
         },
       })}
     >
-      <DemoHead {...headProps} />
-      <LogOnMount eventType="page-displayed" />
-
-      {/* Loaded from components/Head - See https://github.com/mikemaccana/outdated-browser-rework */}
-      {/*<div*/}
-      {/*  id="outdated"*/}
-      {/*  style={{ display: 'none' }}*/}
-      {/*></div>*/}
+      <main
+        role={'main'}
+        className={'demo-layout'}
+      >
+        <DemoHead {...headProps} />
+        <LogOnMount eventType="page-displayed" />
 
-      {
-        // XXX You may want to enable preview mode during non-production stages only
-        process.env.NEXT_PUBLIC_APP_STAGE !== 'production' && (
-          <PreviewModeBanner />
-        )
-      }
+        {/* Loaded from components/Head - See https://github.com/mikemaccana/outdated-browser-rework */}
+        {/*<div*/}
+        {/*  id="outdated"*/}
+        {/*  style={{ display: 'none' }}*/}
+        {/*></div>*/}
 
-      {
-        (!isInIframe || isIframeWithFullPagePreview) && (
-          <DemoNav />
-        )
-      }
+        {
+          // XXX You may want to enable preview mode during non-production stages only
+          process.env.NEXT_PUBLIC_APP_STAGE !== 'production' && (
+            <PreviewModeBanner />
+          )
+        }
 
-      <div
-        className={classnames('page-wrapper', isInIframe ? 'is-in-iframe' : 'not-in-iframe')}
-      >
         {
-          // If an error happened, we display it instead of displaying the page
-          // We display a custom error instead of the native Next.js error by providing children (removing children will display the native Next.js error)
-          error ? (
-            <ErrorPage
-              statusCode={500}
-              isReadyToRender={true}
-              err={error}
-            >
-              <DefaultErrorLayout
-                error={error}
-              />
-            </ErrorPage>
-          ) : (
-            <DemoPageContainer
-              isSidebarOpen={isSidebarOpen}
-              setIsSidebarOpen={setIsSidebarOpen}
-              Sidebar={Sidebar}
-            >
-              {children}
-            </DemoPageContainer>
+          (!isInIframe || isIframeWithFullPagePreview) && (
+            <DemoNav />
           )
         }
-      </div>
 
-      {
-        (!isInIframe || isIframeWithFullPagePreview) && (
-          <DemoFooter />
-        )
-      }
+        <div
+          className={classnames('page-wrapper', isInIframe ? 'is-in-iframe' : 'not-in-iframe')}
+        >
+          {
+            // If an error happened, we display it instead of displaying the page
+            // We display a custom error instead of the native Next.js error by providing children (removing children will display the native Next.js error)
+            error ? (
+              <ErrorPage
+                statusCode={500}
+                isReadyToRender={true}
+                err={error}
+              >
+                <DefaultErrorLayout
+                  error={error}
+                />
+              </ErrorPage>
+            ) : (
+              <DemoPageContainer
+                isSidebarOpen={isSidebarOpen}
+                setIsSidebarOpen={setIsSidebarOpen}
+                Sidebar={Sidebar}
+              >
+                {children}
+              </DemoPageContainer>
+            )
+          }
+        </div>
+
+        {
+          (!isInIframe || isIframeWithFullPagePreview) && (
+            <DemoFooter />
+          )
+        }
+      </main>
     </Amplitude>
   );
 };

diff --git a/src/layouts/demo/components/DemoNav.tsx b/src/layouts/demo/components/DemoNav.tsx
@@ -66,6 +66,7 @@ const DemoNav: React.FunctionComponent<Props> = () => {
       {({ logEvent }: { logEvent: LogEvent }): JSX.Element => (
         <Navbar
           id={'nav'}
+          role="navigation"
           color="#F5F5F5"
           light
           css={css`

diff --git a/src/layouts/quickPreview/components/QuickPreviewBanner.tsx b/src/layouts/quickPreview/components/QuickPreviewBanner.tsx
@@ -55,7 +55,11 @@ const QuickPreviewBanner: React.FunctionComponent<Props> = (props): JSX.Element
   const shouldDisplayI18nButton = availableLanguages?.length > 1;
 
   return (
-    <div className={'quick-preview-banner'}>
+    <main
+      // Role is "main" because only this banner is displayed on the page when this component is used (through Stacker)
+      role="main"
+      className={'quick-preview-banner'}
+    >
       <div
         css={css`
           display: inline-flex;
@@ -149,7 +153,7 @@ const QuickPreviewBanner: React.FunctionComponent<Props> = (props): JSX.Element
           }
         </div>
       </div>
-    </div>
+    </main>
   );
 };
 

diff --git a/src/modules/core/previewMode/components/PreviewModeBanner.tsx b/src/modules/core/previewMode/components/PreviewModeBanner.tsx
@@ -69,7 +69,8 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
   }
 
   return (
-    <div
+    <header
+      role="banner"
       css={css`
         display: inline-flex;
         justify-content: space-between;
@@ -167,7 +168,7 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
           </Fragment>
         )
       }
-    </div>
+    </header>
   );
 };