Changeset 27010

Timestamp:

01/22/2014 08:02:13 PM (11 years ago)

Author:

azaozz

Message:

Improve keyboard accessibility for the admin menu when in responsive mode, props SergeyBiryukov, fixes #26639 for 3.8.1.

Location:

branches/3.8/src

Files:

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

branches/3.8/src/wp-admin/css/wp-admin.css

@@ -11852 +11852 @@
     .auto-fold #adminmenuwrap {
         position: absolute;
-        left: 0;
+        width: 190px;
         z-index: 100;
     }
@@ -11858 +11858 @@
     .auto-fold #adminmenuback,
     .auto-fold #adminmenuwrap {
-        left: -200px;
-    }
-
-    .auto-fold #adminmenuwrap,
-    .auto-fold #adminmenu,
-    .auto-fold #adminmenuback {
-        width: 190px;
+        display: none;
     }
 
@@ -11970 +11964 @@
     .auto-fold .wp-responsive-open #adminmenuback,
     .auto-fold .wp-responsive-open #adminmenuwrap {
-        left: 0;
+        display: block;
     }
 

branches/3.8/src/wp-admin/js/common.js

@@ -554 +554 @@
             });
 
+            $( '#wp-admin-bar-menu-toggle a' ).attr( 'aria-expanded', 'false' );
+
             // Toggle sidebar when toggle is clicked
             $( '#wp-admin-bar-menu-toggle' ).on( 'click.wp-responsive', function( event ) {
                 event.preventDefault();
                 $wpwrap.toggleClass( 'wp-responsive-open' );
+                if ( $wpwrap.hasClass( 'wp-responsive-open' ) ) {
+                    $(this).find('a').attr( 'aria-expanded', 'true' );
+                    $( '#adminmenu a:first' ).focus();
+                } else {
+                    $(this).find('a').attr( 'aria-expanded', 'false' );
+                }
             } );
 

branches/3.8/src/wp-includes/admin-bar.php

@@ -167 +167 @@
         $wp_admin_bar->add_menu( array(
             'id'    => 'menu-toggle',
-            'title' => '<span class="ab-icon"></span>',
+            'title' => '<span class="ab-icon"></span><span class="screen-reader-text">' . __( 'Menu' ) . '</span>',
             'href'  => '#',
-            'meta'  => array(
-                'title' => __( 'Menu' ),
-            ),
         ) );
     }