Changeset 39141 for trunk/src/wp-admin/menu-header.php

Timestamp:

11/04/2016 04:01:24 PM (9 years ago)

Author:

jorbin

Message:

Administration: Ensure collapse menu is usable with a keyboard

Currently, the "Collapse menu" item is not focusable and keyboard users can't collapse/expand the admin menu. This aims to fix it so that screen readers no longer announce it as a clickable but it remains unfocusable and thus unusable. So it's now a button.

Quoting joedolson at WordCamp Chicago 2014:
"If it's supposed to act like a button, it should be a button."

Also includes a grunt:precommit run that picked up some postcss changes to src/wp-includes/css/customize-preview.css

Fixes #29958.
Props ajercia, ipm-frommen for an iterative patch, valendesigns for an iterative patch, GaryJ for feedback, joedolson for feedback, helen for feedback

File:

• trunk/src/wp-admin/menu-header.php (modified) (1 diff)

trunk/src/wp-admin/menu-header.php

@@ -235 +235 @@
     }
 
-    echo '<li id="collapse-menu" class="hide-if-no-js"><div id="collapse-button"><div></div></div>';
-    echo '<span>' . esc_html__( 'Collapse menu' ) . '</span>';
-    echo '</li>';
+    echo '<li id="collapse-menu" class="hide-if-no-js">' .
+        '<button type="button" id="collapse-button" aria-label="' . esc_attr__( 'Collapse Main menu' ) . '" aria-expanded="true">' .
+        '<span class="collapse-button-icon" aria-hidden="true"></span>' .
+        '<span class="collapse-button-label">' . __( 'Collapse menu' ) . '</span>' .
+        '</button></li>';
 }