Add skip-link (wagtail#504)

Author: albinazs

bakerydemo/static/css/main.css

@@ -455,6 +455,18 @@ blockquote .attribute-name {
   z-index: 10;
 }
 
+.skip-link {
+  z-index: 20;
+  position: absolute;
+  top: -100%;
+  padding: 20px;
+  background-color: var(--white);
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
 .index-header__title {
   color: var(--dark);
   font-weight: 400;

bakerydemo/templates/base.html

@@ -41,7 +41,7 @@
         {% endblock breadcrumbs %}
 
 
-        <main>
+        <main id="main-content">
             {% block messages %}
                 {% include "includes/messages.html" %}
             {% endblock messages %}

bakerydemo/templates/includes/header.html

@@ -1,6 +1,7 @@
 {% load navigation_tags %}
 
 <header class="header clearfix">
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <div class="container">
         <div class="navigation" data-navigation>
             <a href="/" class="navigation__logo">The Wagtail Bakery</a>