chore: add a skip to content link

3 files changed, 52 insertions, 1 deletions

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 8c5570f..35e7d27 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -3,6 +3,7 @@ import Footer from '@components/Footer/Footer';
 import Header from '@components/Header/Header';
 import Main from '@components/Main/Main';
 import Breadcrumb from '@components/Breadcrumb/Breadcrumb';
+import { t } from '@lingui/macro';
 
 const Layout = ({
   children,
@@ -13,6 +14,7 @@ const Layout = ({
 }) => {
   return (
     <>
+      <a href="#main" className="screen-reader-text">{t`Skip to content`}</a>
       <Header isHome={isHome} />
       <Main>{children}</Main>
       <Footer />
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index cc47443..8b2e822 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -3,7 +3,7 @@ import styles from './Main.module.scss';
 
 const Main: FunctionComponent = ({ children }) => {
   return (
-    <main className={styles.wrapper}>
+    <main id="main" className={styles.wrapper}>
       <div className={styles.body}>{children}</div>
     </main>
   );
diff --git a/src/styles/base/_helpers.scss b/src/styles/base/_helpers.scss
new file mode 100644
index 0000000..0c3b617
--- /dev/null
+++ b/src/styles/base/_helpers.scss
@@ -0,0 +1,49 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+/*=========================================================================
+>>> TABLE OF CONTENTS:
+===========================================================================
+	1.0 Accessibility
+	2.0. Alignments
+===========================================================================*/
+
+//=========================================================================
+// 1.0. Accessibility
+//=========================================================================
+
+/* Text meant only for screen readers. */
+.screen-reader-text {
+  width: fun.convert-px(1);
+  height: fun.convert-px(1);
+  padding: 0;
+  position: absolute !important;
+  overflow: hidden;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  word-break: normal;
+  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+
+  &:focus {
+    display: block;
+    width: auto;
+    height: auto;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    left: var(--spacing-2xs);
+    top: var(--spacing-xs);
+    z-index: 100000;
+    background: var(--color-primary);
+    box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+      var(--color-shadow);
+    clip: auto !important;
+    color: var(--color-fg-inverted);
+    font-size: var(--font-size-md);
+    font-weight: 600;
+  }
+}
+
+@include mix.motion("reduce") {
+  * {
+    transition: none !important;
+  }
+}