WordPress.org

Make WordPress Core

Changeset 27606


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

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

Location:
trunk/src/wp-content/themes/twentytwelve
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentytwelve/css/ie.css

    r25715 r27606  
    105105}
    106106.main-navigation li ul {
    107     display: none;
    108107    margin: 0;
    109108    padding: 0;
     
    111110    top: 100%;
    112111    z-index: 1;
     112    height: 1px;
     113    width: 1px;
     114    overflow: hidden;
     115    clip: rect(1px, 1px, 1px, 1px);
    113116}
    114117.ie7 .main-navigation li ul {
     118    clip: inherit;
     119    display: none;
    115120    left: 0;
     121    overflow: visible;
    116122}
    117123.main-navigation li ul ul,
     
    120126    left: 100%;
    121127}
    122 .main-navigation ul li:hover > ul {
     128.main-navigation ul li:hover > ul,
     129.main-navigation ul li:focus > ul,
     130.main-navigation .focus > ul {
    123131    border-left: 0;
     132    clip: inherit;
     133    overflow: inherit;
     134    height: inherit;
     135    width: inherit;
     136}
     137.ie7 .main-navigation ul li:hover > ul,
     138.ie7 .main-navigation ul li:focus > ul {
    124139    display: block;
    125140}
  • trunk/src/wp-content/themes/twentytwelve/functions.php

    r27599 r27606  
    141141
    142142    // Adds JavaScript for handling the navigation menu hide-and-show behavior.
    143     wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
     143    wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140318', true );
    144144
    145145    $font_url = twentytwelve_get_font_url();
  • trunk/src/wp-content/themes/twentytwelve/js/navigation.js

    r22574 r27606  
    11/**
    2  * navigation.js
    3  *
    4  * Handles toggling the navigation menu for small screens.
     2 * Handles toggling the navigation menu for small screens and
     3 * accessibility for submenu items.
    54 */
    65( function() {
    76    var nav = document.getElementById( 'site-navigation' ), button, menu;
    8     if ( ! nav )
     7    if ( ! nav ) {
    98        return;
     9    }
     10
    1011    button = nav.getElementsByTagName( 'h3' )[0];
    1112    menu   = nav.getElementsByTagName( 'ul' )[0];
    12     if ( ! button )
     13    if ( ! button ) {
    1314        return;
     15    }
    1416
    1517    // Hide button if menu is missing or empty.
     
    2022
    2123    button.onclick = function() {
    22         if ( -1 == menu.className.indexOf( 'nav-menu' ) )
     24        if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
    2325            menu.className = 'nav-menu';
     26        }
    2427
    25         if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
     28        if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
    2629            button.className = button.className.replace( ' toggled-on', '' );
    2730            menu.className = menu.className.replace( ' toggled-on', '' );
     
    3235    };
    3336} )();
     37
     38// Better focus for hidden submenu items for accessibility.
     39( function( $ ) {
     40    $( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve blur.twentytwelve', function() {
     41        $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
     42    } );
     43} )( jQuery );
  • trunk/src/wp-content/themes/twentytwelve/style.css

    r27572 r27606  
    591591    color: #5e5e5e;
    592592}
    593 .main-navigation a:hover {
     593.main-navigation a:hover,
     594.main-navigation a:focus {
    594595    color: #21759b;
    595596}
     
    15101511        white-space: nowrap;
    15111512    }
    1512     .main-navigation li a:hover {
     1513    .main-navigation li a:hover,
     1514    .main-navigation li a:focus {
    15131515        color: #000;
    15141516    }
     
    15191521    }
    15201522    .main-navigation li ul {
    1521         display: none;
    15221523        margin: 0;
    15231524        padding: 0;
     
    15251526        top: 100%;
    15261527        z-index: 1;
     1528        height: 1px;
     1529        width: 1px;
     1530        overflow: hidden;
     1531        clip: rect(1px, 1px, 1px, 1px);
    15271532    }
    15281533    .main-navigation li ul ul {
     
    15301535        left: 100%;
    15311536    }
    1532     .main-navigation ul li:hover > ul {
     1537    .main-navigation ul li:hover > ul,
     1538    .main-navigation ul li:focus > ul,
     1539    .main-navigation .focus > ul {
    15331540        border-left: 0;
    1534         display: block;
     1541        clip: inherit;
     1542        overflow: inherit;
     1543        height: inherit;
     1544        width: inherit;
    15351545    }
    15361546    .main-navigation li ul li a {
     
    15471557        white-space: normal;
    15481558    }
    1549     .main-navigation li ul li a:hover {
     1559    .main-navigation li ul li a:hover,
     1560    .main-navigation li ul li a:focus {
    15501561        background: #e3e3e3;
    15511562        color: #444;
Note: See TracChangeset for help on using the changeset viewer.