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




git-svn-id: https://develop.svn.wordpress.org/trunk@39141 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Aaron Jorbin
2016-11-04 16:01:24 +00:00
parent f7e5811287
commit 9768ec2b97
6 changed files with 265 additions and 107 deletions

View File

@@ -234,9 +234,11 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
echo "</li>";
}
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>';
}
?>