WordPress.org

Make WordPress Core

Changeset 27607


Ignore:
Timestamp:
03/19/2014 05:28:36 AM (6 years ago)
Author:
lancewillett
Message:

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.

Location:
trunk/src/wp-content/themes/twentythirteen
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentythirteen/css/editor-style.css

    r24785 r27607  
    367367
    368368.mceTemp + ul,
    369 .mceTemp + ol  {
     369.mceTemp + ol {
    370370    list-style-position: inside;
    371371}
  • trunk/src/wp-content/themes/twentythirteen/css/ie.css

    r24542 r27607  
    221221}
    222222
    223 .ie7 .nav-menu li ul ul {
    224     left: 100%;
    225     top: 0;
     223.ie7 .nav-menu .sub-menu,
     224.ie7 .nav-menu .children {
     225    display: none;
     226    overflow: visible;
     227}
     228
     229.ie7 ul.nav-menu li:hover > ul,
     230.ie7 .nav-menu ul li:hover > ul {
     231    display: block;
    226232}
    227233
  • trunk/src/wp-content/themes/twentythirteen/functions.php

    r27598 r27607  
    169169
    170170    // Loads JavaScript file with functionality specific to Twenty Thirteen.
    171     wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '2013-07-18', true );
     171    wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '2014-03-18', true );
    172172
    173173    // Add Source Sans Pro and Bitter fonts, used in the main stylesheet.
  • trunk/src/wp-content/themes/twentythirteen/js/functions.js

    r24514 r27607  
    1717        if ( body.is( '.sidebar' ) ) {
    1818            var sidebar   = $( '#secondary .widget-area' ),
    19                 secondary = ( 0 == sidebar.length ) ? -40 : sidebar.height(),
     19                secondary = ( 0 === sidebar.length ) ? -40 : sidebar.height(),
    2020                margin    = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;
    2121
    22             if ( margin > 0 && _window.innerWidth() > 999 )
     22            if ( margin > 0 && _window.innerWidth() > 999 ) {
    2323                $( '#colophon' ).css( 'margin-top', margin + 'px' );
     24            }
    2425        }
    2526    } );
     
    3031    ( function() {
    3132        var nav = $( '#site-navigation' ), button, menu;
    32         if ( ! nav )
     33        if ( ! nav ) {
    3334            return;
     35        }
    3436
    3537        button = nav.find( '.menu-toggle' );
    36         if ( ! button )
     38        if ( ! button ) {
    3739            return;
     40        }
    3841
    3942        // Hide button if menu is missing or empty.
     
    4447        }
    4548
    46         $( '.menu-toggle' ).on( 'click.twentythirteen', function() {
     49        button.on( 'click.twentythirteen', function() {
    4750            nav.toggleClass( 'toggled-on' );
     51        } );
     52
     53        // Better focus for hidden submenu items for accessibility.
     54        menu.find( 'a' ).on( 'focus.twentythirteen blur.twentythirteen', function() {
     55            $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
    4856        } );
    4957    } )();
     
    5967
    6068        if ( element ) {
    61             if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) )
     69            if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
    6270                element.tabIndex = -1;
     71            }
    6372
    6473            element.focus();
  • trunk/src/wp-content/themes/twentythirteen/style.css

    r26714 r27607  
    754754
    755755.wp-caption.alignleft + ul,
    756 .wp-caption.alignleft + ol  {
     756.wp-caption.alignleft + ol {
    757757    list-style-position: inside;
    758758}
     
    868868
    869869.nav-menu li:hover > a,
    870 .nav-menu li a:hover {
     870.nav-menu li a:hover,
     871.nav-menu li:focus > a,
     872.nav-menu li a:focus {
    871873    background-color: #220e10;
    872874    color: #fff;
     
    878880    border: 2px solid #f7f5e7;
    879881    border-top: 0;
    880     display: none;
    881882    padding: 0;
    882883    position: absolute;
    883884    left: -2px;
    884885    z-index: 99999;
     886    height: 1px;
     887    width: 1px;
     888    overflow: hidden;
     889    clip: rect(1px, 1px, 1px, 1px);
    885890}
    886891
     
    900905
    901906ul.nav-menu ul a:hover,
    902 .nav-menu ul ul a:hover {
     907.nav-menu ul ul a:hover,
     908ul.nav-menu ul a:focus,
     909.nav-menu ul ul a:focus {
    903910    background-color: #db572f;
    904911}
    905912
    906913ul.nav-menu li:hover > ul,
    907 .nav-menu ul li:hover > ul {
    908     display: block;
     914.nav-menu ul li:hover > ul,
     915ul.nav-menu .focus > ul,
     916.nav-menu .focus > ul {
     917    clip: inherit;
     918    overflow: inherit;
     919    height: inherit;
     920    width: inherit;
    909921}
    910922
Note: See TracChangeset for help on using the changeset viewer.