Feature/3401 skip links

cms/sass/components/_skip-to-main-content.scss

@@ -0,0 +1,35 @@
+/* Back to main content button */
+
+.skip-to-main {
+  position: absolute;
+  z-index: 10000;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: min-content;
+  padding: 5px;
+  top: 10px;
+  left: 10px;
+  background-color: $grapefruit;
+
+  svg {
+    display: block;
+    margin: 0 auto;
+    stroke: $warm-black;
+    margin-rigth: 10px;
+  }
+  &:hover, &:focus {
+    svg {
+      margin-right: 10px;
+    }
+  }
+  &:hover:after, &:focus:after {
+    content: "  Skip to main content";
+    color: $warm-black;
+    vertical-align: bottom;
+    -webkit-font-feature-settings: 'liga' 1;
+    -moz-font-feature-settings: 'liga' 1;
+    font-feature-settings: 'liga' 1;
+    transition: 0.5 smooth;
+  }
+}

cms/sass/main.scss

@@ -52,6 +52,7 @@
   "components/review-table",
   "components/select2",
   "components/search-results",
+  "components/skip-to-main-content",
   "components/stat",
   "components/stretch-list",
   "components/tabs",

doajtest/testbook/public_site/home_page.yml

@@ -120,3 +120,22 @@ tests:
       bottom right-hand corner.
     results:
     - You are returned to the top of the home page
+- title: Skip to main content button (Accessibility)
+  context:
+    role: anonymous
+  steps:
+  - step: Refresh the page
+  - step: Click tab key on the keyboard once
+    results:
+      - Skip to the main content button is unfolded and focused
+  - step: Click enter
+    results:
+    - Focus is moved to the main content
+  - step: Turn on screen reader
+  - step: With the keyboard navigate to Skip to main content button
+    results:
+      - Screen reader reads the button title
+  - step: Click enter
+    results:
+      - Focus is moved to the main content
+

portality/templates/account/forgot.html

@@ -3,7 +3,7 @@
 {% block page_title %}Reset your password{% endblock %}
 
 {% block content %}
-<main class="page-content">
+<div class="page-content">
     <section class="container">
         <div class="row">
             <div class="col-md-6">
@@ -23,5 +23,5 @@ <h1>Reset your password</h1>
             </div>
         </div>
     </section>
-</main>
+</div>
 {% endblock %}

portality/templates/account/login.html

@@ -3,7 +3,7 @@
 {% block page_title %}Login to your account{% endblock %}
 
 {% block content %}
-<main class="page-content">
+<div class="page-content">
     <section class="container">
         <div class="row">
             <div class="col-md-6">
@@ -17,5 +17,5 @@ <h1>Login</h1>
             </div>
         </div>
     </section>
-</main>
+</div>
 {% endblock %}

portality/templates/account/login_to_apply.html

@@ -3,7 +3,7 @@
 {% block page_title %}Login to apply{% endblock %}
 
 {% block content %}
-    <main class="container">
+    <div class="container">
       <div class="row">
           <div class="col-md-8">
               <section class="page-content" id="apply">
@@ -46,5 +46,5 @@ <h2 class="label">Related help</h2>
               </div>
           </div>
       </div>
-    </main>
+    </div>
 {% endblock %}

portality/templates/account/register.html

@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block content %}
-<main class="page-content">
+<div class="page-content">
     <section class="container">
         <div class="row">
             <div class="col-md-6">
@@ -30,7 +30,7 @@ <h1>Register</h1>
             </div>
         </div>
     </section>
-</main>
+</div>
 {% endblock %}
 
 {% block extra_js_bottom %}

portality/templates/account/reset.html

@@ -4,7 +4,7 @@
 
 {% block content %}
 
-    <main class="page-content">
+    <div class="page-content">
         <section class="container">
             <div class="row">
                 <div class="col-md-8">
@@ -20,6 +20,6 @@ <h3>Hi {{ account.name or account.email }}</h3>
                 </div>
             </div>
         </section>
-      </main>
+      </div>
 
 {% endblock %}

portality/templates/api/current/api_docs.html

@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block content %}
-    <main class="container page-content">
+    <div class="container page-content">
         <div class="row">
             <div class="col-md-4 col-md-push-8">
                 {# todo: this nav was bumping into swagger
@@ -58,7 +58,7 @@ <h1>API </h1>
                 </section>
             </div>
         </div>
-    </main>
+    </div>
 {% endblock %}
 
 {% block extra_js_bottom %}

portality/templates/application_form/public_application.html

@@ -23,7 +23,7 @@
 
 {% block content scoped %}
 <body id="apply">
-    <main class="container">
+    <div class="container">
         {% include "application_form/_backend_validation.html" %}
         <div class="row">
             <div class="col-md-8">
@@ -64,7 +64,7 @@
                 </div>
             </div>
         </div>
-    </main>
+    </div>
  </body>
 {% endblock %}
 

portality/templates/application_form/readonly_journal.html

@@ -20,7 +20,7 @@
 
 {% block content scoped %}
 <body id="apply">
-    <main class="container">
+    <div class="container">
         <div class="row">
             <div class="col-md-8">
                 <section class="page-content">
@@ -47,7 +47,7 @@
                 </div>
             </div>
         </div>
-    </main>
+    </div>
  </body>
 {% endblock %}
 

portality/templates/doaj/article.html

@@ -67,7 +67,7 @@
     {% set doi = bibjson.get_one_identifier("doi") %}
     {% set normalised_doi = article.get_normalised_doi() %}
 
-    <main class="page-content">
+    <div class="page-content">
         <div class="hero">
             <header class="container">
                 <p class="label">
@@ -224,5 +224,5 @@ <h2>Published in <em>{{jtitle}}</em></h2>
             </div>
 
         </div>
-    </main>
+    </div>
 {% endblock %}

portality/templates/doaj/articles_search.html

@@ -10,10 +10,10 @@
 {%- block meta_twitter_description -%}Find open access articles in DOAJ.{%- endblock -%}
 
 {% block content %}
-    <main class="container page-content">
+    <div class="container page-content">
         <div id="public-article-search"></div>
         {% include "includes/search-help-modal.html" %}
-    </main>
+    </div>
 {% endblock %}
 
 {% block extra_js_bottom %}

portality/templates/doaj/contact.html

@@ -1,7 +1,7 @@
 {% extends "layouts/public_base.html" %}
 
 {% block content %}
-    <main class="page-content">
+    <div class="page-content">
         <section class="container">
 
             <p>Submit your feedback and questions here. Feedback submitted about a particular journal is treated as confidential.</p>
@@ -52,7 +52,7 @@
             </form>
 
         </section>
-    </main>
+    </div>
 
 
 {% endblock %}

portality/templates/doaj/index.html

@@ -74,7 +74,7 @@ <h2 class="sr-only">DOAJ in numbers</h2>
 {% endblock %}
 
 {% block content %}
-<main class="page-content">
+<div class="page-content">
     <!-- About -->
     <section class="highlight bg-black homepage__about">
       <div class="container">
@@ -246,6 +246,6 @@ <h2 class="label label--secondary">Recently-added journals</h2>
             </div>
         </div>
     </section>
-</main>
+</div>
 
 {% endblock %}

portality/templates/doaj/journals_search.html

@@ -10,10 +10,10 @@
 {%- block meta_twitter_description -%}Find open access journals in DOAJ.{%- endblock -%}
 
 {% block content %}
-    <main class="container page-content">
+    <div class="container page-content">
         <div id="public-journal-search"></div>
         {% include "includes/search-help-modal.html" %}
-    </main>
+    </div>
 {% endblock %}
 
 {% block extra_js_bottom %}

portality/templates/doaj/toc.html

@@ -42,7 +42,7 @@
         }
     %}
 
-    <main class="container page-content">
+    <div class="container page-content">
         <header>
           {% if journal.last_manually_updated_since(days=30) %}
           <span class="label label--secondary">
@@ -450,7 +450,7 @@ <h3 class="label label--underlined">Journal metadata</h3>
             </p>
         </footer>
 
-    </main>
+    </div>
     {% include "includes/_hotjar.html" %}
 
 {% endblock %}

portality/templates/editor/editor_base.html

@@ -9,10 +9,15 @@
 {% endblock %}
 
 {% block content %}
-<section class="page-content">
-  {% block editor_content %}
-  {% endblock %}
-</section>
+<div class="container">
+  <h2>Editor dashboard</h2>
+  {% include 'editor/nav.html' %}
+
+  <section class="page-content">
+    {% block editor_content %}
+    {% endblock %}
+  </section>
+</div>
 
 {% include "includes/_hotjar.html" %}
 {% endblock %}

portality/templates/layouts/public_base.html

@@ -2,6 +2,7 @@
 
 {% block base_content %}
 <body class="{% block body_class %}{% endblock %}" data-spy="scroll" data-offset="70">
+<a href="#maincontent" class="skip-to-main"><span aria-hidden="true" data-feather="arrow-down"></span></a>
 
     <header class="page-header">
         {% include "includes/header.html" %}
@@ -17,7 +18,9 @@
     {% endif %}
 
     {% block main_panel %}
-        {% block content %}{% endblock %}
+        <main id="maincontent">
+            {% block content %}{% endblock %}
+        </main>
     {% endblock %}
 
     {% include "includes/footer.html" %}

portality/templates/layouts/single_col_page.html

@@ -1,11 +1,11 @@
 {% extends "layouts/public_base.html" %}
 
 {% block content %}
-<main class="container page-content">
+<div class="container page-content">
     <section class="col-md-offset-3 col-md-6">
         <h1>{% block title %}{% endblock %}</h1>
 
         {% block single_col_content %}{% endblock %}
     </section>
-</main>
+</div>
 {% endblock %}

portality/templates/openurl/404.html

@@ -1,7 +1,7 @@
 {% extends "layouts/public_base.html" %}
 
 {% block content %}
-    <main class="page-content">
+    <div class="page-content">
         <section class="container">
 
             <h2>OpenURL - no results</h2>
@@ -16,5 +16,5 @@ <h3>What next?</h3>
             </ul>
 
         </section>
-    </main>
+    </div>
 {% endblock %}

portality/templates/openurl/help.html

@@ -1,7 +1,7 @@
 {% extends "layouts/public_base.html" %}
 
 {% block content %}
-    <main class="page-content">
+    <div class="page-content">
         <section class="container">
 
             <h2>Help</h2>
@@ -33,5 +33,5 @@ <h3>Supported OpenURL version</h3>
             </p>
 
         </section>
-    </main>
+    </div>
 {% endblock %}