Make WordPress Core

Changeset 29181


Ignore:
Timestamp:
07/15/2014 11:09:41 PM (10 years ago)
Author:
lancewillett
Message:

Twenty Thirteen: make small-screen menu accessible to keyboard commands and voice-driven software by using a focusable button element rather than h3 for the toggle element. Fixes #28293, props rclations and obenland.

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

Legend:

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

    r28341 r29181  
    4141            <div id="navbar" class="navbar">
    4242                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
    43                     <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
     43                    <button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
    4444                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
    4545                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
  • trunk/src/wp-content/themes/twentythirteen/style.css

    r28701 r29181  
    28542854        font: bold 16px/1.3 "Source Sans Pro", Helvetica, sans-serif;
    28552855        margin: 0;
     2856    }
     2857
     2858    .menu-toggle,
     2859    .menu-toggle:hover,
     2860    .menu-toggle:focus,
     2861    .menu-toggle:active {
     2862        background: none;
     2863        border: none;
     2864        color: #141412;
    28562865        padding: 12px 0 12px 20px;
     2866    }
     2867
     2868    .menu-toggle:focus {
     2869        outline: thin dotted;
    28572870    }
    28582871
     
    29062919    .toggled-on .nav-menu > ul a:hover {
    29072920        background-color: #db572f;
     2921        color: #fff;
     2922    }
     2923
     2924    .toggled-on .nav-menu > li a:focus,
     2925    .toggled-on .nav-menu > ul a:focus {
     2926        background-color: #220e10;
    29082927        color: #fff;
    29092928    }
Note: See TracChangeset for help on using the changeset viewer.