WordPress.org

Make WordPress Core

Changeset 22249


Ignore:
Timestamp:
10/16/12 21:26:59 (18 months ago)
Author:
azaozz
Message:

Accessibility shortcuts: new looks and fix for the WebKit focus bug, props lessbloat, fixes #21471

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/admin-header.php

    r21574 r22249  
    127127?> 
    128128 
    129 <div id="wpbody-content" aria-label="<?php esc_attr_e('Main content'); ?>"> 
     129<div id="wpbody-content" aria-label="<?php esc_attr_e('Main content'); ?>" tabindex="0"> 
    130130<?php 
    131131 
  • trunk/wp-admin/css/wp-admin.css

    r22239 r22249  
    193193    position: absolute; 
    194194    left: -1000em; 
     195    top: -1000em; 
    195196    height: 1px; 
    196197    width: 1px; 
     
    199200 
    200201.screen-reader-shortcut:focus { 
    201     left: 5px; 
    202     top: 5px; 
     202    left: 6px; 
     203    top: -21px; 
    203204    height: auto; 
    204205    width: auto; 
    205206    display: block; 
    206     padding: 10px 15px; 
    207     background: #fff; 
    208     color: #000; 
    209     border: 2px solid #333; 
     207    font-size: 14px; 
     208    font-weight: bold; 
     209    padding: 15px 23px 14px; 
     210    background: #8cc1ea; 
     211    background-image: -webkit-gradient(linear, left top, left bottom, from(#8cc1ea), to(#72a7cf)); 
     212    background-image: -webkit-linear-gradient(top, #8cc1ea, #72a7cf); 
     213    background-image:    -moz-linear-gradient(top, #8cc1ea, #72a7cf); 
     214    background-image:      -o-linear-gradient(top, #8cc1ea, #72a7cf); 
     215    background-image:   linear-gradient(to bottom, #8cc1ea, #72a7cf); 
     216    color: #fff; 
    210217    border-radius: 3px; 
    211218    z-index: 100000; 
     219    text-shadow: 0 -1px 0 rgba(22, 57, 81, 0.3); 
     220    line-height: normal; 
     221    -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.6); 
     222    box-shadow: 0 0 2px 2px rgba(0,0,0,.6); 
     223    text-decoration: none; 
    212224} 
    213225 
  • trunk/wp-admin/js/common.js

    r21787 r22249  
    370370        $(this).blur(); 
    371371    }); 
     372 
     373    // Scroll into view when focused 
     374    $('#contextual-help-link, #show-settings-link').on( 'focus.scroll-into-view', function(e){ 
     375        if ( e.target.scrollIntoView ) 
     376            e.target.scrollIntoView(false); 
     377    }); 
    372378}); 
    373379 
  • trunk/wp-includes/class-wp-admin-bar.php

    r21608 r22249  
    350350        <div id="wpadminbar" class="<?php echo $class; ?>" role="navigation"> 
    351351            <a class="screen-reader-text screen-reader-shortcut" href="#wp-toolbar" tabindex="1"><?php _e('Skip to toolbar'); ?></a> 
    352             <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="<?php esc_attr_e('Top navigation toolbar.'); ?>"> 
     352            <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="<?php esc_attr_e('Top navigation toolbar.'); ?>" tabindex="0"> 
    353353                <?php foreach ( $root->children as $group ) { 
    354354                    $this->_render_group( $group ); 
  • trunk/wp-includes/css/admin-bar.css

    r21677 r22249  
    609609 
    610610#wpadminbar .screen-reader-shortcut:focus { 
    611     left: 5px; 
    612     top: 5px; 
     611    left: 6px; 
     612    top: 7px; 
    613613    height: auto; 
    614614    width: auto; 
    615615    display: block; 
    616     padding: 10px 15px; 
    617     background: #fff; 
    618     color: #000; 
    619     border: 2px solid #333; 
     616    font-size: 14px; 
     617    font-weight: bold; 
     618    padding: 15px 23px 14px; 
     619    background: #8cc1ea; 
     620    background-image: -webkit-gradient(linear, left top, left bottom, from(#8cc1ea), to(#72a7cf)); 
     621    background-image: -webkit-linear-gradient(top, #8cc1ea, #72a7cf); 
     622    background-image:    -moz-linear-gradient(top, #8cc1ea, #72a7cf); 
     623    background-image:      -o-linear-gradient(top, #8cc1ea, #72a7cf); 
     624    background-image:   linear-gradient(to bottom, #8cc1ea, #72a7cf); 
     625    color: #fff; 
    620626    border-radius: 3px; 
    621627    z-index: 100000; 
    622     text-shadow: none; 
     628    text-shadow: 0 -1px 0 rgba(22, 57, 81, 0.3); 
    623629    line-height: normal; 
    624 } 
    625  
    626 #wpadminbar a.screen-reader-shortcut { 
    627     text-decoration: underline; 
     630    -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.6); 
     631    box-shadow: 0 0 2px 2px rgba(0,0,0,.6); 
     632    text-decoration: none; 
    628633} 
    629634 
  • trunk/wp-includes/js/admin-bar.js

    r21592 r22249  
    6868        }); 
    6969 
     70        // fix focus bug in WebKit 
     71        $('.screen-reader-shortcut').keydown( function(e) { 
     72            if ( 13 != e.which ) 
     73                return; 
     74 
     75            var id = $(this).attr('href'); 
     76 
     77            if ( $.browser.webkit && id && id.charAt(0) == '#' ) { 
     78                setTimeout(function () { 
     79                    $(id).focus(); 
     80                }, 100); 
     81            } 
     82        }); 
    7083    }); 
    7184} else { 
Note: See TracChangeset for help on using the changeset viewer.