WordPress.org

Make WordPress Core

Changeset 27594


Ignore:
Timestamp:
03/18/2014 10:36:12 PM (7 years ago)
Author:
lancewillett
Message:

Twenty Fourteen: make small-screen menu accessible to keyboard commands and voice-driven software by using a focusable button element rather than h1 for the toggle element. Fixes #27147, props jartes and joedolson.

Location:
trunk/src/wp-content/themes/twentyfourteen
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfourteen/header.php

    r26810 r27594  
    5050
    5151            <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
    52                 <h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
     52                <button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
    5353                <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
    5454                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
  • trunk/src/wp-content/themes/twentyfourteen/style.css

    r27587 r27594  
    821821
    822822/* Ensure that there is no gap between the header and
    823   the admin bar for WordPress versions before 3.8. */
     823    the admin bar for WordPress versions before 3.8. */
    824824#wpadminbar {
    825825    min-height: 32px;
     
    987987
    988988.menu-toggle {
     989    background-color: #000;
     990    border-radius: 0;
    989991    cursor: pointer;
    990992    font-size: 0;
     
    992994    margin: 0;
    993995    overflow: hidden;
     996    padding: 0;
    994997    position: absolute;
    995998    top: 0;
     
    10021005    color: #fff;
    10031006    content: "\f419";
     1007    display: inline;
    10041008    margin-top: 16px;
     1009}
     1010
     1011.menu-toggle:active,
     1012.menu-toggle:focus,
     1013.menu-toggle:hover {
     1014    background-color: #444;
     1015}
     1016
     1017.menu-toggle:focus {
     1018    outline: 1px dotted;
    10051019}
    10061020
Note: See TracChangeset for help on using the changeset viewer.