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

Twenty Thirteen: improve menu navigation for keyboard and voice-over interactions by properly focusing on submenu items when they are open. Closes #24839, props dannydehaan, joedolson, lancewillett, Frank Klein. 

Built from https://develop.svn.wordpress.org/trunk@27607


git-svn-id: http://core.svn.wordpress.org/trunk@27450 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2014-03-19 05:29:29 +00:00
parent 393381d3e4
commit 5d05c757b3
5 changed files with 44 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
wp-content/themes/twentythirteen/css/ie.css
View File

@ -220,9 +220,15 @@ img.alignleft {
top: 40px; top: 40px;
} }
.ie7 .nav-menu li ul ul { .ie7 .nav-menu .sub-menu,
left: 100%; .ie7 .nav-menu .children {
top: 0; display: none;
overflow: visible;
}
.ie7 ul.nav-menu li:hover > ul,
.ie7 .nav-menu ul li:hover > ul {
display: block;
} }
.ie7 .site-header .search-form [type="search"], .ie7 .site-header .search-form [type="search"],

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

@ -168,7 +168,7 @@ function twentythirteen_scripts_styles() {
wp_enqueue_script( 'jquery-masonry' ); wp_enqueue_script( 'jquery-masonry' );
// Loads JavaScript file with functionality specific to Twenty Thirteen. // Loads JavaScript file with functionality specific to Twenty Thirteen.
wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '2013-07-18', true ); wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '2014-03-18', true );
// Add Source Sans Pro and Bitter fonts, used in the main stylesheet. // Add Source Sans Pro and Bitter fonts, used in the main stylesheet.
wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null ); wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null );

21
wp-content/themes/twentythirteen/js/functions.js
View File

@ -16,12 +16,13 @@
$( function() { $( function() {
if ( body.is( '.sidebar' ) ) { if ( body.is( '.sidebar' ) ) {
var sidebar = $( '#secondary .widget-area' ), var sidebar = $( '#secondary .widget-area' ),
secondary = ( 0 == sidebar.length ) ? -40 : sidebar.height(), secondary = ( 0 === sidebar.length ) ? -40 : sidebar.height(),
margin = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary; margin = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;
if ( margin > 0 && _window.innerWidth() > 999 ) if ( margin > 0 && _window.innerWidth() > 999 ) {
$( '#colophon' ).css( 'margin-top', margin + 'px' ); $( '#colophon' ).css( 'margin-top', margin + 'px' );
} }
}
} ); } );
/** /**
@ -29,12 +30,14 @@
*/ */
( function() { ( function() {
var nav = $( '#site-navigation' ), button, menu; var nav = $( '#site-navigation' ), button, menu;
if ( ! nav ) if ( ! nav ) {
return; return;
}
button = nav.find( '.menu-toggle' ); button = nav.find( '.menu-toggle' );
if ( ! button ) if ( ! button ) {
return; return;
}
// Hide button if menu is missing or empty. // Hide button if menu is missing or empty.
menu = nav.find( '.nav-menu' ); menu = nav.find( '.nav-menu' );
@ -43,9 +46,14 @@
return; return;
} }
$( '.menu-toggle' ).on( 'click.twentythirteen', function() { button.on( 'click.twentythirteen', function() {
nav.toggleClass( 'toggled-on' ); nav.toggleClass( 'toggled-on' );
} ); } );
// Better focus for hidden submenu items for accessibility.
menu.find( 'a' ).on( 'focus.twentythirteen blur.twentythirteen', function() {
$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
} );
} )(); } )();
/** /**
@ -58,8 +66,9 @@
var element = document.getElementById( location.hash.substring( 1 ) ); var element = document.getElementById( location.hash.substring( 1 ) );
if ( element ) { if ( element ) {
if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
element.tabIndex = -1; element.tabIndex = -1;
}
element.focus(); element.focus();
} }

22
wp-content/themes/twentythirteen/style.css
View File

@ -867,7 +867,9 @@ div.nav-menu > ul {
} }
.nav-menu li:hover > a, .nav-menu li:hover > a,
.nav-menu li a:hover { .nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
background-color: #220e10; background-color: #220e10;
color: #fff; color: #fff;
} }
@ -877,11 +879,14 @@ div.nav-menu > ul {
background-color: #220e10; background-color: #220e10;
border: 2px solid #f7f5e7; border: 2px solid #f7f5e7;
border-top: 0; border-top: 0;
display: none;
padding: 0; padding: 0;
position: absolute; position: absolute;
left: -2px; left: -2px;
z-index: 99999; z-index: 99999;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
} }
.nav-menu .sub-menu ul, .nav-menu .sub-menu ul,
@ -899,13 +904,20 @@ ul.nav-menu ul a,
} }
ul.nav-menu ul a:hover, ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover { .nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
background-color: #db572f; background-color: #db572f;
} }
ul.nav-menu li:hover > ul, ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul { .nav-menu ul li:hover > ul,
display: block; ul.nav-menu .focus > ul,
.nav-menu .focus > ul {
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
} }
.nav-menu .current_page_item > a, .nav-menu .current_page_item > a,