_s: Tabbable dropdown menus.

Fixes #540.
This commit is contained in:
Christopher Crouch 2014-06-30 23:19:39 +01:00 committed by Konstantin Obenland
parent 31144c7dbb
commit 18f843ed03
3 changed files with 60 additions and 13 deletions

View File

@ -1,10 +1,11 @@
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
* Handles toggling the navigation menu for small screens and enables tab
* support for dropdown menus.
*/
( function() {
var container, button, menu;
var container, button, menu, links, subMenus;
container = document.getElementById( 'site-navigation' );
if ( ! container ) {
@ -25,7 +26,6 @@
}
menu.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className += ' nav-menu';
}
@ -41,4 +41,41 @@
menu.setAttribute( 'aria-expanded', 'true' );
}
};
// Get all the link elements within the menu.
links = menu.getElementsByTagName( 'a' );
subMenus = menu.getElementsByTagName( 'ul' );
// Set menu items with submenus to aria-haspopup="true".
for ( var i = 0, len = subMenus.length; i < len; i++ ) {
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}
// Each time a menu link is focused or blurred, toggle focus.
for ( i = 0, len = links.length; i < len; i++ ) {
links[i].addEventListener( 'focus', toggleFocus, true );
links[i].addEventListener( 'blur', toggleFocus, true );
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocus() {
var self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
if ( -1 !== self.className.indexOf( 'focus' ) ) {
self.className = self.className.replace( ' focus', '' );
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
}
} )();

View File

@ -23,7 +23,8 @@
}
li {
&:hover > ul {
&:hover > ul,
&.focus > ul {
left: 100%;
}
}
@ -32,14 +33,17 @@
width: 200px;
}
:hover > a {
:hover > a,
.focus > a {
}
a:hover {
a:hover,
a.focus {
}
}
li:hover > ul {
li:hover > ul,
li.focus > ul {
left: auto;
}
}
@ -47,7 +51,8 @@
float: left;
position: relative;
&:hover > a {
&:hover > a,
&.focus > a {
}
}
a {

View File

@ -564,20 +564,25 @@ a:active {
}
.main-navigation li:hover > a {
.main-navigation li:hover > a,
.main-navigation li.focus > a {
}
.main-navigation ul ul :hover > a {
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}
.main-navigation ul ul a:hover {
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}
.main-navigation ul li:hover > ul {
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation ul ul li:hover > ul {
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}