Move nav to top, use checkbox, better keyboard.

mysociety · Jan 5, 2021 · 07dc51a · 07dc51a
1 parent 03c55bb
commit 07dc51a
Show file tree

Hide file tree

Showing 23 changed files with 102 additions and 69 deletions.
diff --git a/t/app/controller/admin/stats.t b/t/app/controller/admin/stats.t
@@ -24,7 +24,7 @@ subtest "test refused stats page works" => sub {
     }, sub {
         $mech->get_ok('/admin/stats/refused');
     };
-    $mech->content =~ /class="content"(.*)class="nav-wrapper/s;
+    $mech->content =~ /class="content"(.*)<!-- .content/s;
     my @lines = split /<li>/, $1;
     is @lines, 7;
     like $lines[1], qr/Edinburgh/;

diff --git a/templates/web/base/footer.html b/templates/web/base/footer.html
@@ -6,12 +6,6 @@
                 </div><!-- .content role=main -->
             </div><!-- .container -->
         </div><!-- .table-cell -->
-
-        <div class="nav-wrapper">
-            <div class="container">
-                [% INCLUDE "main_nav.html" %]
-            </div>
-        </div>
     </div> <!-- .wrapper -->
 
     [% INCLUDE 'common_footer_tags.html' %]

diff --git a/templates/web/base/header_site.html b/templates/web/base/header_site.html
@@ -1,6 +1,12 @@
 <header id="site-header" role="banner">
     <div class="container">
         [% INCLUDE 'header_logo.html' %]
-        <a href="#main-nav" id="nav-link">Main Navigation</a>
+        <label id="nav-link" for="main-nav-btn" aria-expanded="false">[% loc('Main Navigation') %]</label>
     </div>
 </header>
+
+<div class="nav-wrapper">
+    <div class="container">
+        [% INCLUDE 'main_nav.html' %]
+    </div>
+</div>
diff --git a/templates/web/base/main_nav.html b/templates/web/base/main_nav.html
@@ -15,6 +15,7 @@
 
 [% UNLESS omit_wrapper %]
     <div id="js-menu-open-modal"></div>
+    <input role="button" type="checkbox" id="main-nav-btn" autocomplete="off">
     <nav id="main-nav" role="navigation">
 [% END %]
 

diff --git a/templates/web/bathnes/header_site.html b/templates/web/bathnes/header_site.html
@@ -15,7 +15,7 @@
             </div>
 
             <a href="[% c.cobrand.base_url IF admin %]/" id="report-cta" title="[%- loc('Report a problem') -%]">[%- loc('Report') -%]</a>
-            <a href="#main-nav" class="navigation-trigger">Menu</a>
+            <label class="navigation-trigger" for="main-nav-btn" aria-expanded="false">Menu</label>
 
             <div class="header-search header-search--desktop">
                 <form id="search" class="site-search" action="https://www.bathnes.gov.uk/search/site/" method="post">
@@ -34,3 +34,9 @@
 
     <div class="header-marque"></div>
 </header>
+
+<div class="nav-wrapper">
+    <div class="container">
+        [% INCLUDE 'main_nav.html' %]
+    </div>
+</div>
diff --git a/templates/web/borsetshire/header_site.html b/templates/web/borsetshire/header_site.html
@@ -12,7 +12,7 @@
 <header id="site-header" role="banner">
     <div class="container">
         [% INCLUDE 'header_logo.html' %]
-        <a href="#main-nav" id="nav-link">Main Navigation</a>
+        <label id="nav-link" for="main-nav-btn" aria-expanded="false">Main Navigation</label>
 
         <!-- hide this on mobile and on map page -->
         <ul class="site-header__fake-nav">
@@ -23,6 +23,12 @@
     </div>
 </header>
 
+<div class="nav-wrapper">
+    <div class="container">
+        [% INCLUDE 'main_nav.html' %]
+    </div>
+</div>
+
 <!-- hide this on mobile and on map page -->
 <div id="site-subheader">
     <div class="container">

diff --git a/templates/web/bromley/footer.html b/templates/web/bromley/footer.html
@@ -13,12 +13,6 @@
                 </div><!-- .content role=main -->
             </div><!-- .container -->
         </div><!-- .table-cell -->
-
-        <div class="nav-wrapper">
-            <div class="container">
-                [% INCLUDE "main_nav.html" hide_privacy_link=1 %]
-            </div>
-        </div>
     </div> <!-- .wrapper -->
 
     [% INCLUDE 'common_footer_tags.html' %]

diff --git a/templates/web/bromley/header_extra.html b/templates/web/bromley/header_extra.html
@@ -1 +1,2 @@
+[% SET hide_privacy_link = 1 ~%]
 <link rel="stylesheet" href="/vendor/govuk-frontend/govuk-frontend-3.5.0.min.css">
diff --git a/templates/web/eastherts/header_site.html b/templates/web/eastherts/header_site.html
@@ -1,10 +1,16 @@
 <header class="eh-header">
     <div class="container">
         <a href="https://www.eastherts.gov.uk/" class="eh-header__logo">East Herts District Council</a>
-        <a href="#main-nav" class="eh-header__nav-link">Main Navigation</a>
+        <label class="eh-header__nav-link" for="main-nav-btn" aria-expanded="false">[% loc('Main Navigation') %]</label>
         <form class="eh-header__form" action="https://www.eastherts.gov.uk/search/content" method="get">
             <input class="eh-header__search" type="text" placeholder="Search and discover help, advice and information" name="search" size="30" maxlength="128">
             <button class="eh-header__button" type="submit" value="Search"><i></i> <span>Search</span></button>
         </form>
     </div>
 </header>
+
+<div class="nav-wrapper">
+    <div class="container">
+        [% INCLUDE 'main_nav.html' %]
+    </div>
+</div>
diff --git a/templates/web/hart/header_site.html b/templates/web/hart/header_site.html
@@ -2,10 +2,16 @@
     <div class="mobile-header-nav">
         <ul>
             <li> <a href="http://www.hart.gov.uk/"><div class="home-icon">&nbsp;</div></a>
-            <li> <a href="#main-nav"><div class="menu-icon">&nbsp;</div></a>
+            <li> <label for="main-nav-btn" aria-expanded="false"><div class="menu-icon">&nbsp;</div></label>
         </ul>
     </div>
     <div class="container">
         <a id="site-logo" href="http://www.hart.gov.uk">Hart District Council</a>
     </div>
 </header>
+
+<div class="nav-wrapper">
+    <div class="container">
+        [% INCLUDE 'main_nav.html' %]
+    </div>
+</div>
diff --git a/templates/web/highwaysengland/header_site.html b/templates/web/highwaysengland/header_site.html
@@ -1,10 +1,16 @@
 <header id="site-header" role="banner">
     <div class="container">
         [% INCLUDE 'header_logo.html' %]
-        <a href="#main-nav" id="nav-link">Main Navigation</a>
+        <label id="nav-link" for="main-nav-btn" aria-expanded="false">[% loc('Main Navigation') %]</label>
     </div>
 </header>
 
+<div class="nav-wrapper">
+    <div class="container">
+        [% INCLUDE 'main_nav.html' %]
+    </div>
+</div>
+
 [% IF c.req.uri.path == '/' %]
     <div class="front-warning">
         <div class="container">

diff --git a/templates/web/oxfordshire/footer.html b/templates/web/oxfordshire/footer.html
@@ -1,12 +1,6 @@
                 </div><!-- .content role=main -->
             </div><!-- .container -->
         </div><!-- .table-cell -->
-
-        <div class="nav-wrapper">
-            <div class="container">
-                [% INCLUDE "main_nav.html" hide_privacy_link=1 %]
-            </div>
-        </div>
     </div> <!-- .wrapper -->
 
     [% INCLUDE 'common_footer_tags.html' %]

diff --git a/templates/web/oxfordshire/header_extra.html b/templates/web/oxfordshire/header_extra.html
@@ -1,2 +1,3 @@
+[% SET hide_privacy_link = 1 ~%]
 <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700,900|Open+Sans:300,400,600,700" rel="stylesheet">
 [% INCLUDE 'tracking_code.html' %]
diff --git a/templates/web/oxfordshire/header_site.html b/templates/web/oxfordshire/header_site.html
@@ -1,8 +1,14 @@
 <header id="site-header" role="banner">
     <div class="container">
         [% INCLUDE 'header_logo.html' %]
-        <a href="#main-nav" id="nav-link">Main Navigation</a>
+        <label id="nav-link" for="main-nav-btn" aria-expanded="false">[% loc('Main Navigation') %]</label>
     </div>
 </header>
 
+<div class="nav-wrapper">
+    <div class="container">
+        [% INCLUDE 'main_nav.html' %]
+    </div>
+</div>
+
 <div class="nav-spacer"></div>
diff --git a/templates/web/tfl/footer.html b/templates/web/tfl/footer.html
@@ -1,12 +1,6 @@
                 </div><!-- .content role=main -->
             </div><!-- .container -->
         </div><!-- .table-cell -->
-
-        <div class="nav-wrapper">
-            <div class="container">
-                [% INCLUDE "main_nav.html" hide_privacy_link=1 %]
-            </div>
-        </div>
     </div> <!-- .wrapper -->
 
     [% INCLUDE 'common_footer_tags.html' %]

diff --git a/templates/web/tfl/header_extra.html b/templates/web/tfl/header_extra.html
@@ -1 +1,2 @@
+[% SET hide_privacy_link = 1 ~%]
 [% INCLUDE 'tracking_code.html' %]
diff --git a/templates/web/tfl/header_site.html b/templates/web/tfl/header_site.html
@@ -6,8 +6,14 @@
       </a>
     </div>
     <div class="top-row-extras">
-      <a href="#main-nav"><span>Menu</span><span class="arrow">&nbsp;</span></a>
-      <a href="/" title="Report a problem"><span>Report</span></a>
+      <label class="top-row-extras__item" for="main-nav-btn" aria-expanded="false"><span>Menu</span><span class="arrow">&nbsp;</span></label>
+      <a class="top-row-extras__item" href="/" title="Report a problem"><span>Report</span></a>
     </div>
   </div>
 </header>
+
+<div class="nav-wrapper">
+    <div class="container">
+        [% INCLUDE 'main_nav.html' %]
+    </div>
+</div>
diff --git a/web/cobrands/borsetshire/_council-header.scss b/web/cobrands/borsetshire/_council-header.scss
@@ -1,5 +1,6 @@
 .nav-wrapper {
     top: 7.5em;
+    z-index: 1;
 }
 
 #main-nav {

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
@@ -824,29 +824,28 @@ $.extend(fixmystreet.set_up, {
 
     var modal = document.getElementById('js-menu-open-modal'),
         nav = document.getElementById('main-nav'),
-        nav_link = document.querySelector('[href="#main-nav"]');
+        nav_checkbox = document.getElementById('main-nav-btn');
+        nav_link = document.querySelector('label[for="main-nav-btn"]');
 
     var toggle_menu = function(e) {
       if (!html.classList.contains('mobile')) {
         return;
       }
       e.preventDefault();
-      var content = document.querySelector('.content'),
-          content_top = content.offsetTop - parseInt(getComputedStyle(content).marginTop, 10);
-      modal.style.top = content_top + 'px';
-      nav.style.top = content_top + 'px';
       var opened = html.classList.toggle('js-nav-open');
       if (opened) {
         // Set height so can scroll menu if not enough space
-        var h = window.innerHeight - content_top;
+        var nav_top = nav_checkbox.offsetTop;
+        var h = window.innerHeight - nav_top;
         nav.style.maxHeight = h + 'px';
+        modal.style.top = nav_top + 'px';
       }
       nav_link.setAttribute('aria-expanded', opened);
+      nav_checkbox.checked = opened;
     };
 
     modal.addEventListener('click', toggle_menu);
     nav_link.addEventListener('click', toggle_menu);
-    nav_link.setAttribute('aria-expanded', false);
     nav.addEventListener('click', function(e) {
         if (e.target.matches('span')) {
             toggle_menu(e);

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
@@ -712,6 +712,11 @@ ul.error {
 }
 
 // this is a skip to nav for mobile users only
+label[for="main-nav-btn"] {
+  font-weight: normal;
+  margin: 0;
+}
+
 #nav-link {
   width: 3em;
   height: 0;
@@ -762,25 +767,25 @@ html.mobile.js-nav-open #js-menu-open-modal {
 // so we want to cancel out the margin from .container
 #main-nav {
   margin: 0 -1em;
-  .mobile & {
-    display: none;
+  display: none;
+  position: absolute;
+  overflow: auto;
+  left: 1em;
+  right: 1em;
+  z-index: 1; // So appears over map
+}
+
+#main-nav-btn {
     position: absolute;
-    overflow: auto;
-    left: 1em;
-    right: 1em;
-    z-index: 1; // So appears over map
-  }
-  .mobile.js-nav-open & {
-    display: block;
-  }
+    #{$left}: -9999px;
+}
+
+#main-nav-btn:checked ~ #main-nav {
+  display: block;
 }
 
 .nav-menu {
   @include list-reset-soft;
-  border-top: 0.25em solid #333;
-  .mobile & {
-    border-top: none;
-  }
   a, span {
     display: block;
     padding: 0.5em 1em;

diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
@@ -59,6 +59,7 @@ h1 {
 }
 
 #main-nav {
+  position: static;
   min-height: $mappage-header-height; // defaults to map header height; should be height of #site-header (eg: #site-logo + any vertical padding)
   height: 1px; // flex `align-items: center` doesn't work in IE10 and IE11 unless flex container has an explicit height (even when min-height means this explicit height gets ignored!)
   @include flex-container();

diff --git a/web/cobrands/tfl/base.scss b/web/cobrands/tfl/base.scss
@@ -188,14 +188,14 @@ ol.big-numbers>li {
 
 /* Mobile navigation links */
 
-.top-row-extras a, .top-row-extras a:visited {
+.top-row-extras__item, .top-row-extras__item:visited {
   color: #fff;
 }
-.top-row-extras a:first-child {
+.top-row-extras__item:first-child {
   border-left: 1px solid #565961;
   margin-right: -1em;
 }
-.top-row-extras a {
+.top-row-extras__item {
   float: right;
   padding: 18px 8px 13px;
   text-decoration: none;
@@ -229,23 +229,23 @@ ol.big-numbers>li {
     }
 }
 
-.top-row-extras span {
+.top-row-extras__item span {
     float: left;
 }
 
-.top-row-extras a {
+.top-row-extras__item {
     display: block;
     -webkit-transition: background-color 0.3s;
     -moz-transition: background-color 0.3s;
     transition: background-color 0.3s
 }
-.top-row-extras a:hover {
+.top-row-extras__item:hover {
     -webkit-transition: none;
     -moz-transition: none;
     transition: none;
 }
 
-.top-row-extras a:hover,.top-row-extras a:focus {
+.top-row-extras__item:hover,.top-row-extras__item:focus {
     background-color: #444856;
     border-bottom: 3px solid #2070B0;
     margin-bottom: -3px