WordPress.org

Make WordPress Core

Changeset 22249


Ignore:
Timestamp:
10/16/2012 09:26:59 PM (6 years 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.