WordPress.org

Make WordPress Core

Ticket #25054: 25054.socialfocus.diff

File 25054.socialfocus.diff, 1.4 KB (added by joedolson, 8 months ago)

Allow keyboard focus to activate social links toggle

  • header.php

     
    6767                        <div class="header-extra"> 
    6868                                <?php if ( $social_links ) : ?> 
    6969                                <div class="social-links-toggle"> 
    70                                         <span class="genericon"><?php _e( 'Connect', 'twentyfourteen' ); ?></span> 
     70                                        <a href='#social-links-container'> 
     71                                                <span class="genericon"><?php _e( 'Connect', 'twentyfourteen' ); ?></span> 
     72                                        </a> 
    7173                                </div> 
    7274                                <?php endif; ?> 
    7375 
     
    8789                <div id="mobile-navigations" class="hide"></div> 
    8890 
    8991                <?php if ( $social_links ) : ?> 
    90                         <div class="social-links-wrapper hide"> 
     92                        <div class="social-links-wrapper hide" id="social-links-container"> 
    9193                                <ul class="social-links clear"> 
    9294                                        <?php if ( is_email( $email_link ) ) : ?> 
    9395                                        <li class="email-link"> 
     
    180182                        </div> 
    181183                <?php endif; ?> 
    182184 
    183                 <div class="search-box-wrapper hide"> 
     185                <div class="search-box-wrapper hide" id="search-container"> 
    184186                        <div class="search-box clear"> 
    185187                        <?php get_search_form(); ?> 
    186188                        </div> 
  • style.css

     
    659659        text-align: center; 
    660660        text-transform: uppercase; 
    661661} 
     662.social-links-toggle a { 
     663        color: #fff; 
     664} 
    662665.social-links-toggle:hover, 
    663666.search-toggle:hover, 
    664667.social-links-toggle.active,