Restore collapsible child menus in primary nav.

* Remove modernizr references that broke the menu when removed. * Provide more aria attributes for expanded and controls states. * Adjust child item margins. * Redo icon glyphs as to not be read by screen readers. * Remove adobe accessible megamenu as it has not been maintained for over a decade.
omeka · Jan 8, 2025 · f7e168b · f7e168b
1 parent 64acc88
commit f7e168b
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 1,108 deletions.
diff --git a/common/footer.php b/common/footer.php
@@ -21,7 +21,6 @@
     jQuery(document).ready(function () {
         Omeka.showAdvancedForm();
         Omeka.skipNav();
-        Omeka.megaMenu('.no-touchevents #primary-nav');
         ThanksRoy.mobileMenu();
     });
     </script>

diff --git a/common/header.php b/common/header.php
@@ -131,7 +131,7 @@
         </header>
 
         <div id="wrap">
-            <button type="button" class="menu-button button" aria-expanded="false" aria-controls="primary-nav">Menu</button>
+            <button type="button" class="menu-button button" aria-expanded="false" aria-controls="primary-nav"><?php echo __('Menu'); ?> <span class="menu-icon" aria-hidden="true"></span></button>
             <nav id="primary-nav" role="navigation" aria-label="Main navigation">
                 <?php echo public_nav_main(array('role' => 'navigation')); ?>
                 <div id="search-container" role="search">

diff --git a/css/sass/_screen.scss b/css/sass/_screen.scss
@@ -112,6 +112,7 @@ blockquote {
     padding: 0;
     position: absolute;
     width: 1px;
+    background-color: #fff;
 }
 
 #skipnav a:focus {
@@ -739,13 +740,11 @@ ul.navigation { padding-left: 0; }
     text-align: left;
 }
 
-.button.menu-button:after {
-    content: "";
+.button.menu-button .menu-icon:after {
+    content: "\f0c9";
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
     display: inline-block;
-    width: 12px;
-    height: 12px;
-    background-image: url('../images/menu.png');
-    background-size: contain;
     margin-left: 10px;
 }
 
@@ -769,7 +768,7 @@ ul.navigation { padding-left: 0; }
             box-sizing: border-box;
             margin: 0;
 
-            a { padding: (.5 * $spacing-unit) $gutter-width (.5 * $spacing-unit) gutter(2); }
+            a { padding: (.5 * $spacing-unit) $gutter-width (.5 * $spacing-unit) (2 * $gutter-width); }
 
             ul li a { padding-left: 4em; }
         }
@@ -784,7 +783,7 @@ ul.navigation { padding-left: 0; }
         top: 0;
         left: 0;
         width: 100%;
-        overflow: hidden;
+        list-style: none;
     }
 
     & > li {
@@ -801,13 +800,6 @@ ul.navigation { padding-left: 0; }
             display:block;
             padding: (.5 * $spacing-unit) $gutter-width;
 
-            &:before {
-                content: "\f0da";
-                display: inline-block;
-                margin-right: .25 * $spacing-unit;
-                font-family: "Font Awesome 5 Free";
-                font-weight: 900;
-            }
             &:focus {
               outline: 1px dotted;
             }
@@ -818,8 +810,7 @@ ul.navigation { padding-left: 0; }
         position: relative;
     }
 
-    .sub-nav-toggle:after,
-    [aria-haspopup="true"]:after {
+    .sub-nav-toggle:after {
         font-family: "Font Awesome 5 Free";
         content: "\f055";
         font-weight: 900;
@@ -829,8 +820,7 @@ ul.navigation { padding-left: 0; }
         transition: .5s ease;
     }
 
-    .open .sub-nav-toggle:after,
-    [aria-haspopup="true"].open:after {
+    .open .sub-nav-toggle:after {
         transform: rotate(405deg);
     }
 
@@ -840,10 +830,12 @@ ul.navigation { padding-left: 0; }
         right: 0;
         height: (2 * $spacing-unit);
         width: (2 * $spacing-unit);
+        background-color: transparent;
 
         &:after {
             float: none;
             text-align: center;
+            display: block;
         }
     }
 }

diff --git a/css/style.css b/css/style.css
@@ -510,6 +510,7 @@ th {
     padding: 0;
     position: absolute;
     width: 1px;
+    background-color: #fff;
   }
 
   #skipnav a:focus {
@@ -1218,13 +1219,11 @@ select[multiple] {
   }
 }
 @media screen {
-  .button.menu-button:after {
-    content: "";
+  .button.menu-button .menu-icon:after {
+    content: "";
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
     display: inline-block;
-    width: 12px;
-    height: 12px;
-    background-image: url("../images/menu.png");
-    background-size: contain;
     margin-left: 10px;
   }
 }
@@ -1249,7 +1248,7 @@ select[multiple] {
     margin: 0;
   }
   #primary-nav ul.navigation ul li a {
-    padding: 12px 1em 12px 11.1111111111%;
+    padding: 12px 1em 12px 2em;
   }
   #primary-nav ul.navigation ul li ul li a {
     padding-left: 4em;
@@ -1262,7 +1261,7 @@ select[multiple] {
     top: 0;
     left: 0;
     width: 100%;
-    overflow: hidden;
+    list-style: none;
   }
   #primary-nav ul.navigation > li {
     padding: 0;
@@ -1281,13 +1280,6 @@ select[multiple] {
     display: block;
     padding: 12px 1em;
   }
-  #primary-nav ul.navigation > li a:before {
-    content: "";
-    display: inline-block;
-    margin-right: 6px;
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-  }
   #primary-nav ul.navigation > li a:focus {
     outline: 1px dotted;
   }
@@ -1298,8 +1290,7 @@ select[multiple] {
   }
 }
 @media screen {
-  #primary-nav ul.navigation .sub-nav-toggle:after,
-#primary-nav ul.navigation [aria-haspopup=true]:after {
+  #primary-nav ul.navigation .sub-nav-toggle:after {
     font-family: "Font Awesome 5 Free";
     content: "";
     font-weight: 900;
@@ -1310,8 +1301,7 @@ select[multiple] {
   }
 }
 @media screen {
-  #primary-nav ul.navigation .open .sub-nav-toggle:after,
-#primary-nav ul.navigation [aria-haspopup=true].open:after {
+  #primary-nav ul.navigation .open .sub-nav-toggle:after {
     transform: rotate(405deg);
   }
 }
@@ -1322,10 +1312,12 @@ select[multiple] {
     right: 0;
     height: 48px;
     width: 48px;
+    background-color: transparent;
   }
   #primary-nav ul.navigation .sub-nav-toggle:after {
     float: none;
     text-align: center;
+    display: block;
   }
 }
 @media screen {

diff --git a/javascripts/default.js b/javascripts/default.js
@@ -5,17 +5,28 @@ if (!ThanksRoy) {
 (function ($) {
 
     ThanksRoy.mobileMenu = function() {
-        $('.supports.touchevents #primary-nav li ul').each(function() {
+        var subNavId = 1;
+        $('#primary-nav li ul').each(function() {
             var childMenu = $(this);
-            var subnavToggle = $('<button type="button" class="sub-nav-toggle" aria-label="Show subnavigation"></button>');
-            subnavToggle.click(function() {
-                $(this).parent('.parent').toggleClass('open');
-            });
+            var subnavToggle = $('<button type="button" class="sub-nav-toggle" aria-label="Toggle subnavigation" aria-expanded="false"></button>');
             childMenu.parent().addClass('parent');
+            childMenu.attr('id', 'sub-nav-' + subNavId);
+            subnavToggle.attr('aria-controls', 'sub-nav-' + subNavId);
+            subNavId++;
             childMenu.addClass('sub-nav').before(subnavToggle);
         });
 
-        $('.menu-button').click( function(e) {
+        $('#primary-nav').on('click', '.sub-nav-toggle', function() {
+            var subnavToggle = $(this);
+            subnavToggle.parent('.parent').toggleClass('open');
+            if (subnavToggle.attr('aria-expanded', 'false')) {
+                subnavToggle.attr('aria-expanded', 'true');
+            } else {
+                subnavToggle.attr('aria-expanded', 'false');
+            }
+        });
+
+        $(document).on('click', '.menu-button', function(e) {
             e.preventDefault();
             var toggle = $(this);
             var navigation = $('#primary-nav ul.navigation');