From e5e8349593e251733a3a030227eec6611060624a Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Thu, 21 Apr 2022 10:07:49 +0200
Subject: [PATCH] feat: add skip nav link (#894)

---
 .../common/SkipNav/SkipNavLink.styles.ts      | 33 ++++++++++++
 .../component/common/SkipNav/SkipNavLink.tsx  | 12 +++++
 .../common/SkipNav/SkipNavTarget.tsx          |  5 ++
 .../layout/MainLayout/MainLayout.tsx          |  4 ++
 frontend/src/component/menu/Header/Header.tsx | 54 +++++++++----------
 5 files changed, 80 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/component/common/SkipNav/SkipNavLink.styles.ts
 create mode 100644 frontend/src/component/common/SkipNav/SkipNavLink.tsx
 create mode 100644 frontend/src/component/common/SkipNav/SkipNavTarget.tsx

diff --git a/frontend/src/component/common/SkipNav/SkipNavLink.styles.ts b/frontend/src/component/common/SkipNav/SkipNavLink.styles.ts
new file mode 100644
index 0000000000..41cb554534
--- /dev/null
+++ b/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,
+        },
+    },
+}));
diff --git a/frontend/src/component/common/SkipNav/SkipNavLink.tsx b/frontend/src/component/common/SkipNav/SkipNavLink.tsx
new file mode 100644
index 0000000000..2c8df0c237
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/frontend/src/component/common/SkipNav/SkipNavTarget.tsx b/frontend/src/component/common/SkipNav/SkipNavTarget.tsx
new file mode 100644
index 0000000000..feeff614fe
--- /dev/null
+++ b/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} />;
+};
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index 4379fd9ca4..73e51b117f 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/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}>
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index 845e3697ad..2596251696 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -61,34 +61,32 @@ const Header = () => {
 
     if (smallScreen) {
         return (
-            <>
-                <AppBar className={styles.header} position="static">
-                    <Container className={styles.container}>
-                        <Tooltip title="Menu">
-                            <IconButton
-                                className={styles.drawerButton}
-                                onClick={toggleDrawer}
-                                aria-controls="header-drawer"
-                                aria-expanded={openDrawer}
-                            >
-                                <MenuIcon />
-                            </IconButton>
-                        </Tooltip>
-                        <DrawerMenu
-                            title={name}
-                            flags={flags}
-                            links={links}
-                            open={openDrawer}
-                            toggleDrawer={toggleDrawer}
-                            admin={admin}
-                            routes={filteredMainRoutes}
-                        />
-                        <div className={styles.userContainer}>
-                            <UserProfile />
-                        </div>
-                    </Container>
-                </AppBar>
-            </>
+            <AppBar className={styles.header} position="static">
+                <Container className={styles.container}>
+                    <Tooltip title="Menu">
+                        <IconButton
+                            className={styles.drawerButton}
+                            onClick={toggleDrawer}
+                            aria-controls="header-drawer"
+                            aria-expanded={openDrawer}
+                        >
+                            <MenuIcon />
+                        </IconButton>
+                    </Tooltip>
+                    <DrawerMenu
+                        title={name}
+                        flags={flags}
+                        links={links}
+                        open={openDrawer}
+                        toggleDrawer={toggleDrawer}
+                        admin={admin}
+                        routes={filteredMainRoutes}
+                    />
+                    <div className={styles.userContainer}>
+                        <UserProfile />
+                    </div>
+                </Container>
+            </AppBar>
         );
     }