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
parent
393381d3e4
commit
5d05c757b3
|
|
@ -366,7 +366,7 @@ img {
|
|||
}
|
||||
|
||||
.mceTemp + ul,
|
||||
.mceTemp + ol {
|
||||
.mceTemp + ol {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
|
|
|||
|
|
@ -16,11 +16,12 @@
|
|||
$( 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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -753,7 +753,7 @@ img.wp-smiley,
|
|||
}
|
||||
|
||||
.wp-caption.alignleft + ul,
|
||||
.wp-caption.alignleft + ol {
|
||||
.wp-caption.alignleft + ol {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue