Changeset 21435

Timestamp:

08/05/2012 09:37:57 PM (14 years ago)

Author:

azaozz

Message:

Accessibility: fix the Skip to content link, show it on :focus, improve the styling of the skip links when shown, see #21310, see #21471

Location:

trunk

Files:

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

trunk/wp-admin/admin-header.php

@@ -108 +108 @@
 
 <div id="wpwrap">
-<a id="wpbody-content-shortcut" tabindex="5" href="#wpbody-content" class="hide-if-no-js screen-reader-text"><?php _e('Skip to main content'); ?></a>
+<a tabindex="1" href="#wpbody-content" class="screen-reader-text screen-reader-shortcut"><?php _e('Skip to main content'); ?></a>
 <?php require(ABSPATH . 'wp-admin/menu-header.php'); ?>
 <div id="wpcontent">
@@ -124 +124 @@
 ?>
 
-<div id="wpbody-content" tabindex="-1" aria-label="<?php esc_attr_e('Main content'); ?>">
+<div id="wpbody-content" aria-label="<?php esc_attr_e('Main content'); ?>">
 <?php
 

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

@@ -197 +197 @@
         width: 1px;
         overflow: hidden;
+}
+
+.screen-reader-shortcut:focus {
+        left: 5px;
+        top: 5px;
+        height: auto;
+        width: auto;
+        display: block;
+        padding: 10px 15px;
+        background: #fff;
+        color: #000;
+        border: 2px solid #333;
+        border-radius: 3px;
+        z-index: 100000;
 }
 

trunk/wp-admin/js/common.dev.js

@@ -375 +375 @@
                 });
         }
-
-        $('#wpbody-content-shortcut').bind('click.wp-skip-to-content', function(e){
-                $('#wpbody-content').focus();
-                e.preventDefault();
-        });
 });
 

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

@@ -620 +620 @@
 
 #wpadminbar #wpadminbar-shortcut:focus {
-        left: 0;
-        top: 0;
+        left: 5px;
+        top: 5px;
         height: auto;
         width: auto;
@@ -628 +628 @@
         background: #fff;
         color: #000;
-        outline: none;
+        border: 2px solid #333;
+        border-radius: 3px;
         z-index: 100000;
         text-shadow: none;
+        line-height: normal;
 }