Merge pull request #641 from cisagov/skip-to-main-content

Fix: Correct "Skip to Main Content" Functionality for Accessibility
cisagov · Sep 27, 2024 · fdd405f · fdd405f
2 parents ded4c8c + 404080d
commit fdd405f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
@@ -193,9 +193,9 @@ export const Layout: React.FC<PropsWithChildren<ContextType>> = ({
                   isFilterDrawerOpen={isFilterDrawerOpen}
                   setIsFilterDrawerOpen={setIsFilterDrawerOpen}
                 />
+                <div className="main-content" id="main-content" tabIndex={-1} />
+
                 <Box
-                  id="main-content"
-                  tabIndex={-1}
                   display="block"
                   position="relative"
                   flex="1"

diff --git a/frontend/src/components/SkipToMainContent/SkipToMainContent.tsx b/frontend/src/components/SkipToMainContent/SkipToMainContent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Button, Tooltip } from '@mui/material';
+import { Box, Button } from '@mui/material';
 
 export const SkipToMainContent: React.FC = () => {
   const handleClick = (event: any) => {
@@ -12,21 +12,19 @@ export const SkipToMainContent: React.FC = () => {
 
   return (
     <Box sx={{ paddingLeft: 1 }}>
-      <Tooltip title="Skip to main content" placement="right">
-        <Button
-          aria-label="Skip to main content"
-          variant="text"
-          tabIndex={0}
-          onClick={handleClick}
-          sx={{
-            outline: 'true',
-            fontSize: '0.6rem',
-            padding: 0
-          }}
-        >
-          Skip to main content
-        </Button>
-      </Tooltip>
+      <Button
+        aria-label="Skip to main content"
+        variant="text"
+        tabIndex={0}
+        onClick={handleClick}
+        sx={{
+          outline: 'true',
+          fontSize: '0.6rem',
+          padding: 0
+        }}
+      >
+        Skip to main content
+      </Button>
     </Box>
   );
 };
diff --git a/frontend/src/components/__tests__/__snapshots__/layout.spec.tsx.snap b/frontend/src/components/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -20,7 +20,6 @@ exports[`Layout component matches snapshot 1`] = `
           <button
             aria-label="Skip to main content"
             class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1a47txt-MuiButtonBase-root-MuiButton-root"
-            data-mui-internal-clone-element="true"
             tabindex="0"
             type="button"
           >
@@ -275,10 +274,13 @@ exports[`Layout component matches snapshot 1`] = `
             HEADER
           </div>
           <div
-            class="MuiBox-root css-1ycota"
+            class="main-content"
             id="main-content"
             tabindex="-1"
           />
+          <div
+            class="MuiBox-root css-1ycota"
+          />
           <div
             class="css-1ycjho2"
           >