Ticket #29958: 29958.5.diff

src/wp-admin/css/admin-menu.css

@@ -264 +264 @@
 .folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
 .folded #adminmenu a.menu-top:focus + .wp-submenu,
 .folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
-.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu  {
+.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
         top: 0;
         left: 36px;
 }
@@ -383 +383 @@
 }
 
 .folded #adminmenu div.wp-menu-image {
-        width: 35px;
         height: 30px;
         position: absolute;
         z-index: 25;
@@ -533 +532 @@
         display: none;
 }
 
-#collapse-menu {
-        font-size: 13px;
-        line-height: 34px;
-        margin-top: 10px;
-        color: #00b9eb;
+#collapse-button {
+        display: block;
+        width: 100%;
+        height: 34px;
+        margin: 0;
+        border: none;
+        padding: 0;
+        position: relative;
+        overflow: visible;
+        line-height: 34px;
+        background: none;
+        color: #9ba1a6;
         color: rgba(240,245,250,0.6);
-        -webkit-transition: all .1s ease-in-out;
-        transition: all .1s ease-in-out;
+        cursor: pointer;
+        outline: 0;
+        text-align: center;
 }
 
-#collapse-menu:hover,
-#collapse-menu:hover #collapse-button div:after {
-        color: #00b9eb;
+#collapse-button:hover,
+#collapse-button:focus {
+        color: #00b9eb;
 }
 
-.folded #collapse-menu span {
-        display: none;
+#collapse-button .collapse-button-icon,
+#collapse-button .collapse-button-label {
+        /* absolutely positioned to avoid 1px shift in IE when button is pressed */
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+}
+
+#collapse-button .collapse-button-icon {
+        width: 36px;
+        height: 34px;
+        line-height: 34px;
 }
 
-#collapse-button,
-#collapse-button div {
-        width: 15px;
-        height: 15px;
+#collapse-button .collapse-button-label {
+        padding: 0 0 0 36px;
+        line-height: 34px;
 }
 
-#collapse-button {
-        float: left;
-        height: 15px;
-        margin: 10px 8px 10px 11px;
-        width: 15px;
-        -webkit-border-radius: 10px;
-        border-radius: 10px;
+.folded #collapse-button .collapse-button-label,
+#collapse-button .screen-reader-text {
+        /* screen-reader-text hidden also for screen readers, read out when folded or auto-fold */
+        display: none;
 }
 
-#wpwrap #collapse-button div {
-        padding: 0;
+.folded #collapse-button .screen-reader-text {
+        display: inline;
 }
 
-#collapse-button div:after {
+#collapse-button .collapse-button-icon:after {
         content: '\f148';
         display: block;
-        line-height: 15px;
-        left: -3px;
-        top: -3px;
-        color: #00b9eb;
-        color: rgba(240,245,250,0.6);
-        font: normal 20px/1 'dashicons' !important;
-        speak: none;
-        margin: 0 auto;
-        padding: 0 !important;
         position: relative;
+        top: 7px;
         text-align: center;
-        width: 20px;
-        -webkit-transition: all .1s ease-in-out;
-        transition: all .1s ease-in-out;
+        font: normal 20px/1 'dashicons' !important;
+        speak: none;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
 }
 
 /* rtl:ignore */
-.folded #collapse-button div:after,
-.rtl #collapse-button div:after {
+.folded #collapse-button .collapse-button-icon:after,
+.rtl #collapse-button .collapse-button-icon:after {
         -webkit-transform: rotate(180deg);
         -ms-transform: rotate(180deg);
         transform: rotate(180deg);
 }
 
-.rtl.folded #collapse-button div:after {
+.rtl.folded #collapse-button .collapse-button-icon:after {
         -webkit-transform: none;
         -ms-transform: none;
         transform: none;
 }
 
+#collapse-button .collapse-button-icon:after,
+#collapse-button .collapse-button-label {
+        -webkit-transition: all .1s ease-in-out;
+        transition: all .1s ease-in-out;
+}
+
 /**
  * Toolbar menu toggle
  */
@@ -638 +649 @@
         .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
         .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
         .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
-        .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu  {
+        .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
                 top: 0px;
                 left: 36px;
         }
@@ -677 +688 @@
 
         .auto-fold #adminmenu div.wp-menu-image {
                 height: 30px;
-                width: 34px;
                 position: absolute;
                 z-index: 25;
         }
@@ -716 +726 @@
                 z-index: 10000;
         }
 
-        .auto-fold #collapse-menu span {
+        .auto-fold #collapse-menu .collapse-button-label {
                 display: none;
         }
 
-        .auto-fold #collapse-button div {
-                background: none;
+        .auto-fold #collapse-button .screen-reader-text {
+                display: inline;
         }
 
         /* rtl:ignore */
-        .auto-fold #collapse-button div:after {
+        .auto-fold #collapse-button .collapse-button-icon:after {
                 -webkit-transform: rotate(180deg);
                 -ms-transform: rotate(180deg);
                 transform: rotate(180deg);
         }
 
-        .rtl.auto-fold #collapse-button div:after {
+        .rtl.auto-fold #collapse-button .collapse-button-icon:after {
                 -webkit-transform: none;
                 -ms-transform: none;
                 transform: none;

src/wp-admin/css/colors/_admin.scss

@@ -235 +235 @@
 
 /* Admin Menu: collapse button */
 
-#collapse-menu {
-    color: $menu-collapse-text;
+#collapse-button {
+        color: $menu-collapse-text;
 }
 
-#collapse-menu:hover {
-    color: $menu-collapse-focus-text;
+#collapse-button:hover,
+#collapse-button:focus {
+        color: $menu-collapse-focus-icon;
 }
 
-#collapse-button div:after {
-    color: $menu-collapse-icon;
+#collapse-button .collapse-button-icon:after {
+        color: $menu-collapse-icon;
 }
 
-#collapse-menu:hover #collapse-button div:after {
-    color: $menu-collapse-focus-icon;
+#collapse-menu:hover #collapse-button .collapse-button-icon:after {
+        color: $menu-collapse-focus-icon;
 }
 
 

src/wp-admin/js/common.js

@@ -208 +208 @@
                 $(e.target).parent().siblings('a').get(0).click();
         });
 
-        $('#collapse-menu').on('click.collapse-menu', function() {
-                var body = $( document.body ), respWidth, state;
+        $( '#collapse-button' ).on( 'click.collapse-menu', function() {
+                var body = $( document.body ),
+                        collapseMenu = commonL10n.collapseMenu || '',
+                        expandMenu = commonL10n.expandMenu || '',
+                        label = $(this).find( '.collapse-button-label' ),
+                        respWidth,
+                        state;
+
+                // Remove focus so the button doesn't remain highlighted
+                $(this).blur();
 
                 // reset any compensation for submenus near the bottom of the screen
                 $('#adminmenu div.wp-submenu').css('margin-top', '');
@@ -245 +253 @@
                         }
                 }
 
+                if ( state == 'folded' ) {
+                        label.text( expandMenu );
+                } else {
+                        label.text( collapseMenu );
+                }
+
                 $( document ).trigger( 'wp-collapse-menu', { state: state } );
         });
 

src/wp-admin/menu-header.php

@@ -212 +212 @@
                 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 id="collapse-menu" class="hide-if-no-js">';
+                echo '<button type="button" id="collapse-button" aria-live="polite" aria-relevant="all" aria-atomic="true">';
+                        echo '<span class="collapse-button-icon"></span>';
+                        echo '<span class="collapse-button-label">' . __( 'Collapse menu' ) . '</span>';
+                echo '</button>';
         echo '</li>';
 }
 

src/wp-includes/script-loader.php

@@ -79 +79 @@
 
         $scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), false, 1 );
         did_action( 'init' ) && $scripts->localize( 'common', 'commonL10n', array(
-                'warnDelete' => __("You are about to permanently delete the selected items.\n  'Cancel' to stop, 'OK' to delete.")
+                'warnDelete'   => __( "You are about to permanently delete the selected items.\n  'Cancel' to stop, 'OK' to delete." ),
+                'collapseMenu' => __( 'Collapse menu' ),
+                'expandMenu'   => __( 'Expand menu' )
         ) );
 
         $scripts->add( 'wp-a11y', "/wp-includes/js/wp-a11y$suffix.js", array( 'jquery' ), false, 1 );