Changeset 21435

Timestamp:

08/05/2012 09:37:57 PM (12 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;
 }