feat: add skip nav link (#894)

frontend/src/component/common/SkipNav/SkipNavLink.styles.ts

@@ -0,0 +1,33 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    link: {
+        position: 'fixed',
+        overflow: 'hidden',
+        zIndex: 1000,
+        top: '1.125rem',
+        left: '1.125rem',
+        padding: '0.5rem 1rem',
+        whiteSpace: 'nowrap',
+        textDecoration: 'none',
+        background: theme.palette.primary.dark,
+        color: theme.palette.primary.contrastText,
+        borderRadius: theme.borders.radius.main,
+        fontSize: theme.fontSizes.smallBody,
+
+        [theme.breakpoints.down(960)]: {
+            top: '0.8rem',
+            left: '0.8rem',
+        },
+
+        '&:not(:focus):not(:active)': {
+            clip: 'rect(0 0 0 0)',
+            clipPath: 'inset(50%)',
+            zIndex: -1,
+            width: 1,
+            height: 1,
+            margin: -1,
+            padding: 0,
+        },
+    },
+}));

frontend/src/component/common/SkipNav/SkipNavLink.tsx

@@ -0,0 +1,12 @@
+import { SKIP_NAV_TARGET_ID } from 'component/common/SkipNav/SkipNavTarget';
+import { useStyles } from 'component/common/SkipNav/SkipNavLink.styles';
+
+export const SkipNavLink = () => {
+    const styles = useStyles();
+
+    return (
+        <a href={`#${SKIP_NAV_TARGET_ID}`} className={styles.link}>
+            Skip to content <span aria-hidden>&darr;</span>
+        </a>
+    );
+};

frontend/src/component/common/SkipNav/SkipNavTarget.tsx

@@ -0,0 +1,5 @@
+export const SKIP_NAV_TARGET_ID = 'skip-nav-target-id';
+
+export const SkipNavTarget = () => {
+    return <div id={SKIP_NAV_TARGET_ID} />;
+};

frontend/src/component/layout/MainLayout/MainLayout.tsx

@@ -9,6 +9,8 @@ import Proclamation from 'component/common/Proclamation/Proclamation';
 import BreadcrumbNav from 'component/common/BreadcrumbNav/BreadcrumbNav';
 import textureImage from 'assets/img/texture.png';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { SkipNavLink } from 'component/common/SkipNav/SkipNavLink';
+import { SkipNavTarget } from 'component/common/SkipNav/SkipNavTarget';
 
 const useStyles = makeStyles(theme => ({
     container: {
@@ -35,7 +37,9 @@ export const MainLayout = ({ children }: IMainLayoutProps) => {
 
     return (
         <>
+            <SkipNavLink />
             <Header />
+            <SkipNavTarget />
             <Grid container className={muiStyles.container}>
                 <main className={classnames(styles.contentWrapper)}>
                     <Grid item className={styles.content} xs={12} sm={12}>

frontend/src/component/menu/Header/Header.tsx

@@ -61,34 +61,32 @@ const Header = () => {
 
     if (smallScreen) {
         return (
-            <>
+            <AppBar className={styles.header} position="static">
-                <AppBar className={styles.header} position="static">
+                <Container className={styles.container}>
-                    <Container className={styles.container}>
+                    <Tooltip title="Menu">
-                        <Tooltip title="Menu">
+                        <IconButton
-                            <IconButton
+                            className={styles.drawerButton}
-                                className={styles.drawerButton}
+                            onClick={toggleDrawer}
-                                onClick={toggleDrawer}
+                            aria-controls="header-drawer"
-                                aria-controls="header-drawer"
+                            aria-expanded={openDrawer}
-                                aria-expanded={openDrawer}
+                        >
-                            >
+                            <MenuIcon />
-                                <MenuIcon />
+                        </IconButton>
-                            </IconButton>
+                    </Tooltip>
-                        </Tooltip>
+                    <DrawerMenu
-                        <DrawerMenu
+                        title={name}
-                            title={name}
+                        flags={flags}
-                            flags={flags}
+                        links={links}
-                            links={links}
+                        open={openDrawer}
-                            open={openDrawer}
+                        toggleDrawer={toggleDrawer}
-                            toggleDrawer={toggleDrawer}
+                        admin={admin}
-                            admin={admin}
+                        routes={filteredMainRoutes}
-                            routes={filteredMainRoutes}
+                    />
-                        />
+                    <div className={styles.userContainer}>
-                        <div className={styles.userContainer}>
+                        <UserProfile />
-                            <UserProfile />
+                    </div>
-                        </div>
+                </Container>
-                    </Container>
+            </AppBar>
-                </AppBar>
-            </>
         );
     }