Changeset 22249

Timestamp:

10/16/2012 09:26:59 PM (12 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 {