Ticket #33754: 33754.2.patch

src/wp-admin/css/common.css

@@ -1831 +1831 @@
 }
 
 .postbox .handlediv {
+        display: none;
         float: right;
-        width: 33px;
+        width: 36px;
         height: 36px;
+        padding: 0;
 }
 
 .js .postbox .handlediv {
-        cursor: pointer;
+        display: block;
 }
 
 .sortable-placeholder {
@@ -2770 +2772 @@
 
 /* Metabox collapse arrow indicators */
 .js .sidebar-name .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox .handlediv:before {
-        right: 12px;
+.js .meta-box-sortables .postbox .toggle-indicator:before {
+        position: relative;
+        left: -1px; /* fix the dashicon horizontal alignment */
+        display: inline-block;
         font: normal 20px/1 dashicons;
         speak: none;
-        display: inline-block;
-        padding: 8px 10px;
-        top: 0;
-        position: relative;
+        padding: 8px;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         text-decoration: none !important;
 }
 
+.js .sidebar-name .sidebar-name-arrow:before {
+        padding: 10px;
+        left: 0;
+}
+
 .js #widgets-left .sidebar-name .sidebar-name-arrow {
         display: none;
 }
@@ -2794 +2800 @@
 
 /* Show the arrow only on hover */
 .js .sidebar-name .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox .handlediv:before {
+.js .meta-box-sortables .postbox .toggle-indicator:before {
         content: "\f142";
 }
 
 .js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox.closed .handlediv:before {
+.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
         content: "\f140";
 }
 
@@ -2925 +2931 @@
 
 .widget-action:hover,
 .handlediv:hover,
+.handlediv:focus,
 .item-edit:hover,
 .sidebar-name:hover .sidebar-name-arrow,
 .accordion-section-title:hover:after {

src/wp-admin/css/widgets.css

@@ -147 +147 @@
         margin: 0 10px 0 0;
 }
 
-div#widgets-left .sidebar-name .sidebar-name-arrow:before {
-        right: 0;
-        top: 4px;
-        padding: 4px 6px 4px 4px;
+#widgets-left .sidebar-name .sidebar-name-arrow:before {
+        padding: 9px;
 }
 
 #widgets-left #available-widgets,
@@ -250 +248 @@
 }
 
 div#widgets-right .sidebar-name .sidebar-name-arrow:before {
-        right: 0;
-        top: 4px;
+        top: 2px;
 }
 
 div#widgets-right .widget-top {

src/wp-admin/includes/template-functions.php

@@ -984 +984 @@
                                         $hidden_class = in_array($box['id'], $hidden) ? ' hide-if-js' : '';
                                         echo '<div id="' . $box['id'] . '" class="postbox ' . postbox_classes($box['id'], $page) . $hidden_class . '" ' . '>' . "\n";
                                         if ( 'dashboard_browser_nag' != $box['id'] ) {
-                                                echo '<button class="handlediv button-link" title="' . esc_attr__( 'Click to toggle' ) . '" aria-expanded="true">';
-                                                echo '<span class="screen-reader-text">' . sprintf( __( 'Click to toggle %s panel' ), $box['title'] ) . '</span><br />';
+                                                echo '<button type="button" class="handlediv button-link" aria-expanded="true">';
+                                                echo '<span class="screen-reader-text">' . sprintf( __( 'Toggle panel: %s' ), $box['title'] ) . '</span>';
+                                                echo '<span class="toggle-indicator" aria-hidden="true"></span>';
                                                 echo '</button>';
                                         }
                                         echo "<h3 class='hndle'><span>{$box['title']}</span></h3>\n";

src/wp-admin/js/postbox.js

@@ -7 +7 @@
 
         postboxes = {
                 add_postbox_toggles : function(page, args) {
-                        var self = this;
+                        var self = this,
+                                $handles = $( '.postbox .hndle, .postbox .handlediv' );
 
                         self.init(page, args);
 
-                        $('.postbox .hndle, .postbox .handlediv').bind('click.postboxes', function( e ) {
-                                var p = $(this).parent('.postbox'), id = p.attr('id');
+                        $handles.on( 'click.postboxes', function() {
+                                var $el = $( this ),
+                                        p = $el.parent( '.postbox' ),
+                                        id = p.attr( 'id' ),
+                                        ariaExpandedValue;
 
                                 if ( 'dashboard_browser_nag' == id )
                                         return;
 
-                                e.preventDefault();
-
                                 p.toggleClass( 'closed' );
-                                $(this).attr( 'aria-expanded', ! p.hasClass( 'closed' ) );
 
+                                ariaExpandedValue = ! p.hasClass( 'closed' );
+
+                                if ( $el.hasClass( 'handlediv' ) ) {
+                                        // The handle button was clicked.
+                                        $el.attr( 'aria-expanded', ariaExpandedValue );
+                                } else {
+                                        // The handle heading was clicked.
+                                        $el.closest( '.postbox' ).find( 'button.handlediv' ).attr( 'aria-expanded', ariaExpandedValue );
+                                }
+
                                 if ( page != 'press-this' )
                                         self.save_state(page);
 
@@ -74 +85 @@
                 },
 
                 init : function(page, args) {
-                        var isMobile = $(document.body).hasClass('mobile');
+                        var isMobile = $( document.body ).hasClass( 'mobile' ),
+                                $handleButtons = $( '.postbox .handlediv' );
 
                         $.extend( this, args || {} );
                         $('#wpbody-content').css('overflow','hidden');
@@ -112 +124 @@
                         }
 
                         this._mark_area();
+
+                        // Set the handle buttons `aria-expanded` attribute initial value on page load.
+                        $handleButtons.each( function() {
+                                $( this ).attr( 'aria-expanded', ! $( this ).parent( '.postbox' ).hasClass( 'closed' ) );
+                        });
                 },
 
                 save_state : function(page) {