make menu responsive on mobile + track aria-expanded status

Author: sarahfossheim

src/js/components/filters.js

@@ -206,8 +206,6 @@ class Filters {
 
   /* Duplicate the technology dropdowns */
   addTechnologySelector(event) {
-    console.log('add tech selector');
-
     event.preventDefault();
 
     const selectorTemplate = document.getElementById('tech-selector').content.cloneNode(true);

src/js/main.js

@@ -1,11 +1,13 @@
-const nav = document.querySelector('header nav');
+const nav = document.querySelector('#desktop');
 const mobileNav = document.querySelector('nav#mobile');
-const hamburger = document.querySelector('header .hamburger');
+const hamburger = document.querySelector('.hamburger');
 
 if (mobileNav) {
   if (hamburger) {
     hamburger.addEventListener('click', (e) => {
+      const expanded = hamburger.getAttribute('aria-expanded');
       mobileNav.classList.toggle('active');
+      hamburger.ariaExpanded = expanded === 'true' ? 'false' : 'true';
     });
   }
 

static/css/techreport/techreport.css

@@ -98,7 +98,7 @@
 /* ------------------------- */
 
 /* Page header and footer */
-body > :is(header, footer) {
+body footer {
   background-color: var(--color-card-background);
 }
 
@@ -284,6 +284,23 @@ nav {
   transform: translateY(-50%);
 }
 
+.report-navigation .hamburger {
+  padding: 1rem;
+  color: var(--color-text-lighter);
+}
+
+.report-navigation .hamburger:is(:hover, :focus-visible) {
+  color: var(--color-text-darker);
+}
+
+.report-navigation .hamburger:focus-visible {
+  outline: 1px solid var(--color-text-darker);
+}
+
+.report-navigation .hamburger svg {
+  height: 1.75rem;
+}
+
 /* Page Filters */
 #page-filters {
   padding: 1.5rem 1rem;

templates/main.html

@@ -102,7 +102,7 @@
         </div>
 
         <div class="col-lg-10 col-md-9 col-sm-9 col-xs-2 clearfix">
-          <nav class="hidden-xs pull-right text-right" aria-label="Header Menu">
+          <nav id="desktop" class="hidden-xs pull-right text-right" aria-label="Header Menu">
             <ul>
               <li>
                 <span class="dropdown-target" aria-haspopup="true" tabindex="0" role="button" title="Reports menu">

templates/techreport/techreport.html

@@ -15,45 +15,56 @@
     <a href="{{ url_for('index') }}">
       <img class="logo" src="/static/img/ha.png" width="320" height="160" alt="HTTP Archive"/>
     </a>
-    {% set params = "?geo=ALL&rank=ALL" %}
-    {% if tech_report_page.params %}
-      {% set filterObj = tech_report_page.params %}
-      {% set params = "?geo=" + filterObj.geo + "&rank=" + filterObj.rank %}
-    {% endif %}
-    <ul class="navigation-items">
-      <li class="all-reports"><a href="/reports/"><span>All reports</span></a></li>
-      <li>
-        {% set ariaCurrent = "false" %}
-        {% if active_page == "landing" %}{% set ariaCurrent = "page" %}{% endif %}
-        <a
-          href="/reports/techreport/landing"
-          aria-current="{{ ariaCurrent }}"
-        >
-          <span>Home</span>
-        </a>
-      </li>
-      <li>
-        {% set ariaCurrent = "false" %}
-        {% if active_page == "technology" or requested_page == "technology" %}{% set ariaCurrent = "page" %}{% endif %}
-        <a
-          href="/reports/techreport/tech{{ params }}&tech=ALL"
-          aria-current="{{ ariaCurrent }}"
-        >
-          <span>Technologies</span>
-        </a>
-      </li>
-      <li>
-        {% set ariaCurrent = "false" %}
-        {% if active_page == "category" %}{% set ariaCurrent = "page" %}{% endif %}
-        <a
-          href="/reports/techreport/category{{ params }}&category=CMS"
-          aria-current="{{ ariaCurrent }}"
-        >
-          <span>Categories</span>
-        </a>
-      </li>
-    </ul>
+    <div class="hidden-xs">
+      {% set params = "?geo=ALL&rank=ALL" %}
+      {% if tech_report_page.params %}
+        {% set filterObj = tech_report_page.params %}
+        {% set params = "?geo=" + filterObj.geo + "&rank=" + filterObj.rank %}
+      {% endif %}
+      <ul id="desktop" class="navigation-items">
+        <li class="all-reports"><a href="/reports/"><span>All reports</span></a></li>
+        <li>
+          {% set ariaCurrent = "false" %}
+          {% if active_page == "landing" %}{% set ariaCurrent = "page" %}{% endif %}
+          <a
+            href="/reports/techreport/landing"
+            aria-current="{{ ariaCurrent }}"
+          >
+            <span>Home</span>
+          </a>
+        </li>
+        <li>
+          {% set ariaCurrent = "false" %}
+          {% if active_page == "technology" or requested_page == "technology" %}{% set ariaCurrent = "page" %}{% endif %}
+          <a
+            href="/reports/techreport/tech{{ params }}&tech=ALL"
+            aria-current="{{ ariaCurrent }}"
+          >
+            <span>Technologies</span>
+          </a>
+        </li>
+        <li>
+          {% set ariaCurrent = "false" %}
+          {% if active_page == "category" %}{% set ariaCurrent = "page" %}{% endif %}
+          <a
+            href="/reports/techreport/category{{ params }}&category=CMS"
+            aria-current="{{ ariaCurrent }}"
+          >
+            <span>Categories</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="visible-xs">
+      <button class="hamburger">
+        <span class="sr-only">Menu</span>
+        <svg aria-hidden="true" version="1.1" viewBox="0 0 32 32" height="32px" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
+        </svg>
+      </button>
+    </div>
   </nav>
+  <nav id="mobile" class="hidden-sm hidden-md hidden-lg" aria-label="Mobile Menu"></nav>
 {% endblock %}
 
 {% block main %}