adds skip links

laws-africa · Aug 1, 2024 · 8227e8e · 8227e8e
1 parent 80edbfb
commit 8227e8e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/liiweb/templates/liiweb/_hero_search.html b/liiweb/templates/liiweb/_hero_search.html
@@ -1,12 +1,11 @@
 {% load i18n %}
-<div class="row justify-content-center">
+<div id="search" class="row justify-content-center">
   <div class="col col-md-10 col-lg-8">
     <form method="get" action="{% url 'search:search' %}" class="d-flex mb-2">
       <input type="text"
              class="form-control form-control-lg flex-grow-1"
              placeholder="{% blocktrans %}Search {{ APP_NAME }}{% endblocktrans %}"
              aria-label="{% blocktrans %}Search {{ APP_NAME }}{% endblocktrans %}"
-             autofocus=""
              name="q"/>
       <input type="submit"
              class="btn btn-primary ms-2 btn-lg"

diff --git a/peachjam/static/stylesheets/_global.scss b/peachjam/static/stylesheets/_global.scss
@@ -179,3 +179,14 @@ html[data-user-agent*='pocketlaw'] .pocketlaw-hidden {
   max-height: 25vh;
   overflow-y: auto;
 }
+
+#skip-links li {
+  list-style-type: none;
+}
+#skip-links a {
+  position: absolute;
+  top: -201px;
+}
+#skip-links a:focus {
+  top: -1px;
+}
diff --git a/peachjam/templates/peachjam/_header.html b/peachjam/templates/peachjam/_header.html
@@ -1,7 +1,14 @@
 {% load static i18n %}
 <header>
+  {% block skip-links %}
+    <div id="skip-links">
+      <a href="#top">Go to page content</a>
+      <a href="#main-nav">Go to main menu</a>
+      <a href="#search">Go to the search field</a>
+    </div>
+  {% endblock %}
   {% block top-bar %}<div>Top bar content</div>{% endblock %}
-  <nav class="navbar navbar-expand-lg shadow-sm">
+  <nav id="main-nav" class="navbar navbar-expand-lg shadow-sm">
     <div class="container">
       <a class="navbar-brand" href="{% url 'home_page' %}">
         {% block navbar-logo %}Logo image{% endblock %}