Skip to content

Commit

Permalink
fix(component): megamenu accessibility
Browse files Browse the repository at this point in the history 
menu + menu-item pattern
no right arrow for simple links
  • Loading branch information
@ygatesoupe
ygatesoupe committed Feb 1, 2017
1 parent 1570a1b commit 698917c
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 20 deletions.
30 changes: 15 additions & 15 deletions docs-orange/examples/orange-news/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
</div>
</nav>

<nav class="navbar navbar-toggleable-sm navbar-inverse">
<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"/>
Expand Down Expand Up @@ -95,17 +95,17 @@
<a class="nav-link" href="">Sub link 1</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="">Sub link 1</a></li>
<li class="nav-item"><a class="nav-link" href>Sub sub link 1</a></li>
<li class="nav-item"><a class="nav-link" href>Sub sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href>Sub sub link 3</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 3</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href>Sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href>Sub link 3</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub link 3</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href>Plans</a></li>
<li class="nav-item"><a class="nav-link" href>Accessories</a></li>
<li class="nav-item"><a class="nav-link" href="">Plans</a></li>
<li class="nav-item"><a class="nav-link" href="">Accessories</a></li>
</ul>
</li>
<li class="nav-item">
Expand All @@ -120,17 +120,17 @@
<a class="nav-link" href="">Sub link 1</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="">Sub link 1</a></li>
<li class="nav-item"><a class="nav-link" href>Sub sub link 1</a></li>
<li class="nav-item"><a class="nav-link" href>Sub sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href>Sub sub link 3</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 3</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href>Sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href>Sub link 3</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub link 3</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href>Shared plans</a></li>
<li class="nav-item"><a class="nav-link" href>Orange TV</a></li>
<li class="nav-item"><a class="nav-link" href="">Shared plans</a></li>
<li class="nav-item"><a class="nav-link" href="">Orange TV</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href>Link 3</a></li>
Expand Down
11 changes: 8 additions & 3 deletions js/src/o-megamenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const MegaMenu = (($) => {
const Selector = {
MEGAMENU : '.mega-menu',
ROOT_NAV : '.mega-menu > .navbar-nav',
MEGAMENU_PANEL : '.mega-menu-panel',
MEGAMENU_PANEL_NAV : '.mega-menu-panel > .container > .navbar-nav',
MEGAMENU_NAV : '.nav-link + .navbar-nav',
NAV_MENU : '.navbar-nav',
Expand Down Expand Up @@ -78,15 +79,19 @@ const MegaMenu = (($) => {
_addAriaAttributes(element) {
const $subNavs = $(element).find('.nav-link + .navbar-nav')

$(element).attr('role', 'menu')
$(element).find(Selector.MEGAMENU_PANEL).attr('role', 'menu')
$(element).find('.nav-link[data-toggle=collapse]').attr('role', 'menu-item')

$subNavs.each(function() {
const navId = Util.getUID(NAME)
const $thisNavToggler = $(this).prev(Selector.NAV_LINK)
const $thisNav = $(this)
const $thisNavBackLink = $thisNav.find(Selector.NAV_BACK_LINK)

$thisNav.attr('id', navId)
$thisNavToggler.attr({'aria-controls': navId, 'aria-expanded': false, 'aria-haspopup': true})
$thisNavBackLink.attr({'aria-controls': navId, 'aria-expanded': false, 'aria-haspopup': true})
$thisNav.attr({'id': navId, 'role': 'menu'})
$thisNavToggler.attr({'role': 'menu-item', 'aria-controls': navId, 'aria-expanded': false, 'aria-haspopup': true})
$thisNavBackLink.attr({'role': 'menu-item', 'aria-controls': navId, 'aria-expanded': false, 'aria-haspopup': true})
})
}

Expand Down
3 changes: 2 additions & 1 deletion scss/_o-nav-local.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,9 @@
display: none;
flex-flow: column;
width: 100%;
margin-top: 1px;
margin-top: -1px;
background-color: #fff;
border: 2px solid $gray-light-o;

&.show {
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion scss/_o-navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@
margin-top: 0;
}

.nav-item .nav-link::before {
.nav-item .nav-link[role="menu-item"]::before {
float: right;
margin-right: 1.25rem;
font-family: icon-orange;
Expand Down

0 comments on commit 698917c

Please sign in to comment.