Changeset 27010

Timestamp:

01/22/2014 08:02:13 PM (13 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' ),
-                        ),
                 ) );
         }