feat(megamenu): use aria-current + CSS to indicate current item and i…

…ts active parents, related to #254 and #252
Orange-OpenSource · Jan 7, 2020 · eb863ba · eb863ba
1 parent da743b5
commit eb863ba
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 15 deletions.
diff --git a/js/src/o-megamenu.js b/js/src/o-megamenu.js
@@ -29,7 +29,8 @@ const PERCENTAGE = 100 // Width slide proportion
 const SPLITLENGHT = 4
 
 const ClassName = {
-  TRANSITIONING: 'transitioning'
+  TRANSITIONING: 'transitioning',
+  ACTIVE: 'active'
 }
 
 const Selector = {
@@ -42,7 +43,8 @@ const Selector = {
   NAV_LINK : '.nav-link',
   NAV_LINK_COLLAPSE : '.nav-link[data-toggle=collapse]',
   NAV_LINK_BACK : '.nav-link.back',
-  NAV_LINK_EXPANDED : '.nav-link[aria-expanded=true]'
+  NAV_LINK_EXPANDED : '.nav-link[aria-expanded=true]',
+  CURRENT: '.nav-link[aria-current="page"]'
 }
 
 
@@ -90,7 +92,8 @@ class MegaMenu {
   }
 
   _addAriaAttributes(element) {
-    const $subNavs = $(element).find('.nav-link + .navbar-nav')
+    const $subNavs = $(element).find(Selector.MEGAMENU_NAV)
+    const $parents = $(element).find(Selector.CURRENT).parents(Selector.NAV_ITEM)
 
     $(element).attr('role', 'application')
     $(element).find('> .navbar-nav').attr('role', 'menu')
@@ -99,6 +102,10 @@ class MegaMenu {
     $(element).find(Selector.NAV_LINK_BACK).attr('aria-hidden', 'true')
     $(element).find(Selector.NAV_ITEM).attr('role', 'presentation')
 
+    $parents.each(function () {
+      $(this).find(Selector.NAV_LINK).first().attr('aria-current', 'true')
+    })
+
     $subNavs.each(function () {
       const navId = Util.getUID(NAME)
       const $thisNavToggler = $(this).prev(Selector.NAV_LINK)
@@ -135,15 +142,18 @@ class MegaMenu {
     const $rootNav = $target.closest(Selector.ROOT_NAV)
 
     $rootNav.addClass(ClassName.TRANSITIONING)
+    this._$navLinkCollapses.removeClass(ClassName.ACTIVE)
 
     // open collapse
     if ($target.attr('data-toggle') === 'collapse') {
       $target.siblings(Selector.MEGAMENU_PANEL).collapse('show')
+      $target.addClass(ClassName.ACTIVE)
       this._$topCollapseMenus.not($target.siblings(Selector.MEGAMENU_PANEL)).collapse('hide')
       $(this._element).height('auto')
       $rootNav.css('transform', 'translateX(0%)')
     } else {
       $target.closest(Selector.MEGAMENU_PANEL).collapse('show')
+      $target.closest(Selector.NAV_LINK_COLLAPSE).addClass(ClassName.ACTIVE)
       this._$topCollapseMenus.not($target.closest(Selector.MEGAMENU_PANEL)).collapse('hide')
 
       // show menu and hide other
@@ -213,7 +223,9 @@ class MegaMenu {
     const $this = $(e.target)
     const $thisCollapse = $($this.attr('href'))
 
-    this._$topCollapseMenus.not($thisCollapse).collapse('hide')
+    $this.addClass(ClassName.ACTIVE)
+    this._$navLinkCollapses.not($this).removeClass(ClassName.ACTIVE)
+    this._$topCollapseMenus.not($thisCollapse).removeClass(ClassName.ACTIVE).collapse('hide')
   }
 
   _goForward(e) {

diff --git a/scss/_o-megamenu.scss b/scss/_o-megamenu.scss
@@ -2,8 +2,25 @@
 // Mega menu
 //
 
-.mega-menu-panel [role="menu"] {
-  flex-direction: column;
+.mega-menu-panel {
+  [role="menu"] {
+    flex-direction: column;
+  }
+
+  .nav-link.active {
+    text-decoration: underline;
+    // stylelint-disable-next-line property-no-unknown
+    text-decoration-thickness: $border-width;
+    text-underline-offset: $border-width * 2;
+
+    &::before {
+      display: none;
+    }
+  }
+}
+
+.mega-menu .nav-link[aria-expanded="true"] {
+  color: $navbar-dark-hover-color;
 }
 
 .nav-heading {
@@ -58,13 +75,9 @@
             }
           }
 
-          [aria-expanded="true"] {
-            color: $navbar-dark-hover-color;
-
-            &::after {
-              background-image: escape-svg($o-megamenu-arrow-icon-hover);
-              transform: rotateZ(180deg);
-            }
+          [aria-expanded="true"]::after {
+            background-image: escape-svg($o-megamenu-arrow-icon-hover);
+            transform: rotateZ(180deg);
           }
 
           [data-toggle="collapse"] {
@@ -172,7 +185,7 @@
           }
 
           [role="menu"] .nav-link {
-            padding: map-get($spacers, 1) 0;
+            padding: map-get($spacers, 1) map-get($spacers, 5) map-get($spacers, 1) 0;
           }
 
           .back {

diff --git a/site/docs/4.4/components/orange-megamenu.md b/site/docs/4.4/components/orange-megamenu.md
@@ -47,7 +47,7 @@ HTML markup and especially `<ul>` menu structure must follow this example:
                           <li class="nav-item"><a class="nav-link back" href="#">Back</a></li>
                           <li class="nav-item"><span class="nav-heading text-primary">Mobile</span></li>
                           <li class="nav-item"><a class="nav-link" href="#">Phones</a></li>
-                          <li class="nav-item"><a class="nav-link" href="#">Plans</a></li>
+                          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Plans</a></li>
                           <li class="nav-item"><a class="nav-link" href="#">Accessories</a></li>
                         </ul>
                       </li>