Twenty Twelve: improve menu navigation for keyboard and voice-over interactions by properly focusing on submenu items when they are open. See #24839, props dannydehaan, joedolson, lancewillett.
Built from https://develop.svn.wordpress.org/trunk@27606 git-svn-id: http://core.svn.wordpress.org/trunk@27449 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett
parent
e63404bb21
commit
8b8455a26c
19
css/ie.css
19
css/ie.css
|
|
@ -104,23 +104,38 @@ body.full-width .site-content {
|
|||
position: relative;
|
||||
}
|
||||
.main-navigation li ul {
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 1;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
.ie7 .main-navigation li ul {
|
||||
clip: inherit;
|
||||
display: none;
|
||||
left: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
.main-navigation li ul ul,
|
||||
.ie7 .main-navigation li ul ul {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.main-navigation ul li:hover > ul {
|
||||
.main-navigation ul li:hover > ul,
|
||||
.main-navigation ul li:focus > ul,
|
||||
.main-navigation .focus > ul {
|
||||
border-left: 0;
|
||||
clip: inherit;
|
||||
overflow: inherit;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
.ie7 .main-navigation ul li:hover > ul,
|
||||
.ie7 .main-navigation ul li:focus > ul {
|
||||
display: block;
|
||||
}
|
||||
.main-navigation li ul li a {
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ function twentytwelve_scripts_styles() {
|
|||
wp_enqueue_script( 'comment-reply' );
|
||||
|
||||
// Adds JavaScript for handling the navigation menu hide-and-show behavior.
|
||||
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
|
||||
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140318', true );
|
||||
|
||||
$font_url = twentytwelve_get_font_url();
|
||||
if ( ! empty( $font_url ) )
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
/**
|
||||
* navigation.js
|
||||
*
|
||||
* Handles toggling the navigation menu for small screens.
|
||||
* Handles toggling the navigation menu for small screens and
|
||||
* accessibility for submenu items.
|
||||
*/
|
||||
( function() {
|
||||
var nav = document.getElementById( 'site-navigation' ), button, menu;
|
||||
if ( ! nav )
|
||||
if ( ! nav ) {
|
||||
return;
|
||||
}
|
||||
|
||||
button = nav.getElementsByTagName( 'h3' )[0];
|
||||
menu = nav.getElementsByTagName( 'ul' )[0];
|
||||
if ( ! button )
|
||||
if ( ! button ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide button if menu is missing or empty.
|
||||
if ( ! menu || ! menu.childNodes.length ) {
|
||||
|
|
@ -19,10 +21,11 @@
|
|||
}
|
||||
|
||||
button.onclick = function() {
|
||||
if ( -1 == menu.className.indexOf( 'nav-menu' ) )
|
||||
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
|
||||
menu.className = 'nav-menu';
|
||||
}
|
||||
|
||||
if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
|
||||
if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
|
||||
button.className = button.className.replace( ' toggled-on', '' );
|
||||
menu.className = menu.className.replace( ' toggled-on', '' );
|
||||
} else {
|
||||
|
|
@ -30,4 +33,11 @@
|
|||
menu.className += ' toggled-on';
|
||||
}
|
||||
};
|
||||
} )();
|
||||
} )();
|
||||
|
||||
// Better focus for hidden submenu items for accessibility.
|
||||
( function( $ ) {
|
||||
$( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve blur.twentytwelve', function() {
|
||||
$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
|
||||
} );
|
||||
} )( jQuery );
|
||||
|
|
|
|||
23
style.css
23
style.css
|
|
@ -590,7 +590,8 @@ a:hover {
|
|||
.main-navigation a {
|
||||
color: #5e5e5e;
|
||||
}
|
||||
.main-navigation a:hover {
|
||||
.main-navigation a:hover,
|
||||
.main-navigation a:focus {
|
||||
color: #21759b;
|
||||
}
|
||||
.main-navigation ul.nav-menu,
|
||||
|
|
@ -1509,7 +1510,8 @@ img#wpstats {
|
|||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.main-navigation li a:hover {
|
||||
.main-navigation li a:hover,
|
||||
.main-navigation li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
.main-navigation li {
|
||||
|
|
@ -1518,20 +1520,28 @@ img#wpstats {
|
|||
position: relative;
|
||||
}
|
||||
.main-navigation li ul {
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 1;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
.main-navigation li ul ul {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.main-navigation ul li:hover > ul {
|
||||
.main-navigation ul li:hover > ul,
|
||||
.main-navigation ul li:focus > ul,
|
||||
.main-navigation .focus > ul {
|
||||
border-left: 0;
|
||||
display: block;
|
||||
clip: inherit;
|
||||
overflow: inherit;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
.main-navigation li ul li a {
|
||||
background: #efefef;
|
||||
|
|
@ -1546,7 +1556,8 @@ img#wpstats {
|
|||
width: 12.85714286rem;
|
||||
white-space: normal;
|
||||
}
|
||||
.main-navigation li ul li a:hover {
|
||||
.main-navigation li ul li a:hover,
|
||||
.main-navigation li ul li a:focus {
|
||||
background: #e3e3e3;
|
||||
color: #444;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue