Changeset 22249

Timestamp:

10/16/2012 09:26:59 PM (14 years ago)

Author:

azaozz

Message:

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

Location:

trunk

Files:

• wp-admin/admin-header.php (modified) (1 diff)
• wp-admin/css/wp-admin.css (modified) (2 diffs)
• wp-admin/js/common.js (modified) (1 diff)
• wp-includes/class-wp-admin-bar.php (modified) (1 diff)
• wp-includes/css/admin-bar.css (modified) (1 diff)
• wp-includes/js/admin-bar.js (modified) (1 diff)

trunk/wp-admin/admin-header.php

@@ -127 +127 @@
 ?>
 
-<div id="wpbody-content" aria-label="<?php esc_attr_e('Main content'); ?>">
+<div id="wpbody-content" aria-label="<?php esc_attr_e('Main content'); ?>" tabindex="0">
 <?php
 

trunk/wp-admin/css/wp-admin.css

@@ -193 +193 @@
         position: absolute;
         left: -1000em;
+        top: -1000em;
         height: 1px;
         width: 1px;
@@ -199 +200 @@
 
 .screen-reader-shortcut:focus {
-        left: 5px;
-        top: 5px;
+        left: 6px;
+        top: -21px;
         height: auto;
         width: auto;
         display: block;
-        padding: 10px 15px;
-        background: #fff;
-        color: #000;
-        border: 2px solid #333;
+        font-size: 14px;
+        font-weight: bold;
+        padding: 15px 23px 14px;
+        background: #8cc1ea;
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#8cc1ea), to(#72a7cf));
+        background-image: -webkit-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:    -moz-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:      -o-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:   linear-gradient(to bottom, #8cc1ea, #72a7cf);
+        color: #fff;
         border-radius: 3px;
         z-index: 100000;
+        text-shadow: 0 -1px 0 rgba(22, 57, 81, 0.3);
+        line-height: normal;
+        -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+        box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+        text-decoration: none;
 }
 

trunk/wp-admin/js/common.js

@@ -370 +370 @@
                 $(this).blur();
         });
+
+        // Scroll into view when focused
+        $('#contextual-help-link, #show-settings-link').on( 'focus.scroll-into-view', function(e){
+                if ( e.target.scrollIntoView )
+                        e.target.scrollIntoView(false);
+        });
 });
 

trunk/wp-includes/class-wp-admin-bar.php

@@ -350 +350 @@
                 <div id="wpadminbar" class="<?php echo $class; ?>" role="navigation">
                         <a class="screen-reader-text screen-reader-shortcut" href="#wp-toolbar" tabindex="1"><?php _e('Skip to toolbar'); ?></a>
-                        <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="<?php esc_attr_e('Top navigation toolbar.'); ?>">
+                        <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="<?php esc_attr_e('Top navigation toolbar.'); ?>" tabindex="0">
                                 <?php foreach ( $root->children as $group ) {
                                         $this->_render_group( $group );

trunk/wp-includes/css/admin-bar.css

@@ -609 +609 @@
 
 #wpadminbar .screen-reader-shortcut:focus {
-        left: 5px;
-        top: 5px;
+        left: 6px;
+        top: 7px;
         height: auto;
         width: auto;
         display: block;
-        padding: 10px 15px;
-        background: #fff;
-        color: #000;
-        border: 2px solid #333;
+        font-size: 14px;
+        font-weight: bold;
+        padding: 15px 23px 14px;
+        background: #8cc1ea;
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#8cc1ea), to(#72a7cf));
+        background-image: -webkit-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:    -moz-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:      -o-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:   linear-gradient(to bottom, #8cc1ea, #72a7cf);
+        color: #fff;
         border-radius: 3px;
         z-index: 100000;
-        text-shadow: none;
+        text-shadow: 0 -1px 0 rgba(22, 57, 81, 0.3);
         line-height: normal;
-}
-
-#wpadminbar a.screen-reader-shortcut {
-        text-decoration: underline;
+        -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+        box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+        text-decoration: none;
 }
 

trunk/wp-includes/js/admin-bar.js

@@ -68 +68 @@
                 });
 
+                // fix focus bug in WebKit
+                $('.screen-reader-shortcut').keydown( function(e) {
+                        if ( 13 != e.which )
+                                return;
+
+                        var id = $(this).attr('href');
+
+                        if ( $.browser.webkit && id && id.charAt(0) == '#' ) {
+                                setTimeout(function () {
+                                        $(id).focus();
+                                }, 100);
+                        }
+                });
         });
 } else {