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;
}
.ie7 .nav-menu li ul ul {
left: 100%;
top: 0;
.ie7 .nav-menu .sub-menu,
.ie7 .nav-menu .children {
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"],

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

@ -168,7 +168,7 @@ function twentythirteen_scripts_styles() {
wp_enqueue_script( 'jquery-masonry' );
// 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.
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() {
if ( body.is( '.sidebar' ) ) {
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;
if ( margin > 0 && _window.innerWidth() > 999 )
if ( margin > 0 && _window.innerWidth() > 999 ) {
$( '#colophon' ).css( 'margin-top', margin + 'px' );
}
}
} );
/**
@ -29,12 +30,14 @@
*/
( function() {
var nav = $( '#site-navigation' ), button, menu;
if ( ! nav )
if ( ! nav ) {
return;
}
button = nav.find( '.menu-toggle' );
if ( ! button )
if ( ! button ) {
return;
}
// Hide button if menu is missing or empty.
menu = nav.find( '.nav-menu' );
@ -43,9 +46,14 @@
return;
}
$( '.menu-toggle' ).on( 'click.twentythirteen', function() {
button.on( 'click.twentythirteen', function() {
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 ) );
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.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 a:hover {
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
background-color: #220e10;
color: #fff;
}
@ -877,11 +879,14 @@ div.nav-menu > ul {
background-color: #220e10;
border: 2px solid #f7f5e7;
border-top: 0;
display: none;
padding: 0;
position: absolute;
left: -2px;
z-index: 99999;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.nav-menu .sub-menu ul,
@ -899,13 +904,20 @@ ul.nav-menu ul a,
}
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;
}
ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
display: block;
.nav-menu ul li:hover > ul,
ul.nav-menu .focus > ul,
.nav-menu .focus > ul {
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}
.nav-menu .current_page_item > a,