From 5d05c757b3158995623d7611677289aeeb0cdf33 Mon Sep 17 00:00:00 2001 From: Lance Willett Date: Wed, 19 Mar 2014 05:29:29 +0000 Subject: [PATCH] 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 --- .../twentythirteen/css/editor-style.css | 2 +- wp-content/themes/twentythirteen/css/ie.css | 12 +++++++--- .../themes/twentythirteen/functions.php | 2 +- .../themes/twentythirteen/js/functions.js | 21 +++++++++++----- wp-content/themes/twentythirteen/style.css | 24 ++++++++++++++----- 5 files changed, 44 insertions(+), 17 deletions(-) diff --git a/wp-content/themes/twentythirteen/css/editor-style.css b/wp-content/themes/twentythirteen/css/editor-style.css index f7665a8793..ec393ea944 100644 --- a/wp-content/themes/twentythirteen/css/editor-style.css +++ b/wp-content/themes/twentythirteen/css/editor-style.css @@ -366,7 +366,7 @@ img { } .mceTemp + ul, -.mceTemp + ol { +.mceTemp + ol { list-style-position: inside; } diff --git a/wp-content/themes/twentythirteen/css/ie.css b/wp-content/themes/twentythirteen/css/ie.css index c815a14a65..2ea67d4f90 100644 --- a/wp-content/themes/twentythirteen/css/ie.css +++ b/wp-content/themes/twentythirteen/css/ie.css @@ -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"], diff --git a/wp-content/themes/twentythirteen/functions.php b/wp-content/themes/twentythirteen/functions.php index 1aeeb497dd..6b9d440ef5 100644 --- a/wp-content/themes/twentythirteen/functions.php +++ b/wp-content/themes/twentythirteen/functions.php @@ -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 ); diff --git a/wp-content/themes/twentythirteen/js/functions.js b/wp-content/themes/twentythirteen/js/functions.js index 777a5cf468..78c8c848c8 100644 --- a/wp-content/themes/twentythirteen/js/functions.js +++ b/wp-content/themes/twentythirteen/js/functions.js @@ -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(); } diff --git a/wp-content/themes/twentythirteen/style.css b/wp-content/themes/twentythirteen/style.css index 0ad8a2c5f6..975d68083d 100644 --- a/wp-content/themes/twentythirteen/style.css +++ b/wp-content/themes/twentythirteen/style.css @@ -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,