new: Add a "skip to main content" accessibility anchor

Probesys · Dec 9, 2022 · 63c6d9d · 63c6d9d
1 parent 8ed7599
commit 63c6d9d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 1 deletion.
diff --git a/assets/stylesheets/application.css b/assets/stylesheets/application.css
@@ -96,6 +96,26 @@ body {
     }
 }
 
+.accessibility-nav {
+    position: absolute;
+
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+
+    width: 1px;
+    height: 1px;
+}
+
+.accessibility-nav:focus {
+    top: 1rem;
+    left: 1rem;
+
+    clip: auto;
+
+    width: auto;
+    height: auto;
+}
+
 .turbo-progress-bar {
     position: fixed;
     top: 0;

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -28,6 +28,15 @@
     </head>
 
     <body>
+        <a
+            class="no-mobile accessibility-nav anchor--action"
+            href="#main-content"
+            tabindex="0"
+            data-turbo="false"
+        >
+            {{ 'Skip to main content' | trans }}
+        </a>
+
         <div class="layout" id="layout">
             <noscript>
                 <div class="layout__banner layout__banner--alert">
@@ -121,7 +130,9 @@
                 </div>
             {% endif %}
 
-            {% block body %}{% endblock %}
+            <div id="main-content">
+                {% block body %}{% endblock %}
+            </div>
         </div>
 
         {{ include('_modal_dialog.html.twig') }}

diff --git a/translations/messages.en_GB.yaml b/translations/messages.en_GB.yaml
@@ -84,3 +84,4 @@ Type: Type
 'This ticket is closed.': 'This ticket is closed.'
 'assign yourself': 'assign yourself'
 (yourself): (yourself)
+'Skip to main content': 'Skip to main content'
diff --git a/translations/messages.fr_FR.yaml b/translations/messages.fr_FR.yaml
@@ -84,3 +84,4 @@ Type: Type
 'This ticket is closed.': 'Ce ticket est clos.'
 'assign yourself': attribuez-vous
 (yourself): (vous)
+'Skip to main content': 'Accéder au contenu principal'