WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2014-03-19 05:29:16 +00:00
parent 1e6f48044c
commit 393381d3e4
4 changed files with 53 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
wp-content/themes/twentytwelve/css/ie.css
View File

@ -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 {

2
wp-content/themes/twentytwelve/functions.php
View File

@ -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 ) )

26
wp-content/themes/twentytwelve/js/navigation.js
View File

@ -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
wp-content/themes/twentytwelve/style.css
View File

@ -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;
}