fix(component): megamenu accessibility

role application for keyboard management role presentation on nav-items
Orange-OpenSource · Feb 6, 2017 · 67f74cb · 67f74cb
1 parent ef0eb5d
commit 67f74cb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/docs-orange/examples/orange-news/index.html b/docs-orange/examples/orange-news/index.html
@@ -67,12 +67,12 @@
                 </div>
             </nav>
 
-			<nav class="navbar navbar-toggleable-md navbar-inverse" role="navigation">
+			    <nav class="navbar navbar-toggleable-md navbar-inverse" role="navigation">
               <div class="container" >
                 <a class="navbar-brand" href>
                     <img src="dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Go to homepage"/>
                 </a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbarHead">
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbarHead">
                   <span class="sr-only">toggle navigation</span>
                   <span class="icon-menu"></span>
                 </button>

diff --git a/js/src/o-megamenu.js b/js/src/o-megamenu.js
@@ -44,6 +44,7 @@ const MegaMenu = (($) => {
     MEGAMENU_PANEL_NAV : '.mega-menu-panel > .container > .navbar-nav',
     MEGAMENU_NAV : '.nav-link + .navbar-nav',
     NAV_MENU : '.navbar-nav',
+    NAV_ITEM : '.nav-item',
     NAV_LINK : '.nav-link',
     NAV_LINK_COLLAPSE : '.nav-link[data-toggle=collapse]',
     NAV_LINK_BACK : '.nav-link.back',
@@ -87,10 +88,12 @@ const MegaMenu = (($) => {
     _addAriaAttributes(element) {
       const $subNavs = $(element).find('.nav-link + .navbar-nav')
 
-      $(element).attr('role', 'menu')
+      $(element).attr('role', 'application')
+      $(element).find('> .navbar-nav').attr('role', 'menu')
       $(element).find(Selector.MEGAMENU_PANEL).attr('role', 'menu')
       $(element).find('.nav-link[data-toggle=collapse]').attr('role', 'menuitem')
       $(element).find(Selector.NAV_LINK_BACK).attr({'aria-hidden': true, 'tabindex': -1})
+      $(element).find(Selector.NAV_ITEM).attr('role', 'presentation')
 
       $subNavs.each(function() {
         const navId = Util.getUID(NAME)