feat: add skip to contents link (#81)

inclusive-design · Jan 20, 2025 · 37d0dfe · 37d0dfe
1 parent 21ed613
commit 37d0dfe
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 13 deletions.
diff --git a/src/_data/translations.json b/src/_data/translations.json
@@ -15,6 +15,7 @@
     "main-menu": "Main Menu",
     "menu": "menu",
     "project-menu": "Project menu",
+    "skip-to-content": "Skip to content",
     "site-title": "<strong>Inclusive</strong><br />Standards",
     "no-projects": "No projects found."
   },
@@ -34,6 +35,7 @@
     "main-menu": "Menu principal",
     "menu": "menu",
     "project-menu": "Menu du projet",
+    "skip-to-content": "Passer au contenu",
     "site-title": "Normes<br /><strong>inclusives</strong>",
     "no-projects": "Aucun projet trouvé."
   }

diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -10,7 +10,7 @@
 <body>
   {% include "partials/global/header.njk" %}
   {% include "partials/components/navigation.njk" %}
-  <main {% if page.fileSlug == "about" %}class="sectioned"{% endif %}>
+  <main id="main" {% if page.fileSlug == "about" %}class="sectioned"{% endif %}>
     {% if hasBanner %}
     <div class="banner bg-{{ bannerBgColor }}">
       <div class="wrapper flow">

diff --git a/src/_includes/partials/global/header.njk b/src/_includes/partials/global/header.njk
@@ -1,4 +1,9 @@
 <header>
+    <div class="skip-container">
+    <div class="wrapper">
+        <a class="skip" href="#main">{% __ 'skip-to-content' %}</a>
+    </div>
+    </div>
     <div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
         <div class="fl-panelBar fl-panelBar-smallScreen" id="Editorspace">
             <span class="fl-prefsEditor-buttons">

diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
@@ -33,7 +33,7 @@ body {
     .banner {
         flex-direction: row;
     }
-    
+
     .banner__image {
         padding: unset;
         min-width: 30rem;
@@ -57,7 +57,6 @@ section .wrapper > .cards {
     max-width: 100%;
 }
 main section:nth-of-type(even) {
-
     background-color: var(--fl-bgColor, var(--color-indigo-100));
     color: var(--fl-fgColor);
 }
@@ -79,22 +78,22 @@ main section:last-of-type:not(:first-of-type) {
 .fl-theme-lgdg,
 .fl-theme-gw,
 .fl-theme-gd {
-	img {
-		filter: grayscale(1);
-	}
+    img {
+        filter: grayscale(1);
+    }
 }
 
 .fl-theme-by,
 .fl-theme-yb {
-	img {
-		filter: url("#yellow");
-	}
+    img {
+        filter: url("#yellow");
+    }
 }
 
 .fl-theme-bbr {
-	img {
-		filter: url("#brown");
-	}
+    img {
+        filter: url("#brown");
+    }
 }
 
 /* Links */
@@ -141,4 +140,4 @@ footer a:not([class]) {
         box-shadow: 0 0 0 0.25rem var(--fl-linkFgColor, var(--color-indigo-200));
         color: var(--fl-bgColor, var(--color-black));
     }
-}
+}
diff --git a/src/assets/styles/components/_navigation.css b/src/assets/styles/components/_navigation.css
@@ -3,6 +3,35 @@
     color: var(--fl-fgColor, var(--color-white));
 }
 
+.navigation__wrapper {
+    position: relative;
+}
+
+/* Skip to content */
+
+a.skip {
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    background: var(--fl-linkBgColor, var(--color-yellow));
+    color: var(--fl-linkFgColor, var(--color-black));
+    text-decoration: none;
+    font-weight: var(--font-weight-semibold);
+    display: flex;
+    padding-block: 0.625rem;
+    padding-inline: 1.875rem;
+    left: 0;
+    position: absolute;
+    block-size: 4.1875rem;
+    top: -14.1875rem;
+    width: 100vw;
+
+    &:focus {
+        top: 0;
+        outline: 0.125rem solid transparent;
+    }
+}
+
 .navigation__brand {
     display: flex;
     justify-content: space-between;
@@ -91,6 +120,38 @@ a[rel="home"] {
     }
 }
 
+@media (width >= 40em) {
+    .skip-container {
+        height: 0;
+        position: absolute;
+        width: 100%;
+        padding-inline: 0;
+        top: 2.0625rem;
+        z-index: -1;
+
+        &:focus-within {
+            z-index: 0;
+        }
+    }
+
+    .skip-container .wrapper {
+        height: 0;
+        position: relative;
+    }
+
+    a.skip {
+        height: 3.5625rem;
+        width: 60%;
+        max-width: 31.25em;
+        top: -5.625rem;
+        position: absolute;
+
+        &:focus {
+            top: 0;
+        }
+    }
+}
+
 @media (width >= 46.625rem) {
     .navigation {
         height: 5.5rem;