Changeset 34893

Timestamp:

10/07/2015 01:57:06 AM (9 years ago)

Author:

wonderboymusic

Message:

Meta Boxes: reboot some of the code in postbox.js to support aria-expanded attribute toggling and to properly reference static class properties.

Props afercia, wonderboymusic.
Fixes #33754.

Location:

trunk/src/wp-admin

Files:

• css/common.css (modified) (5 diffs)
• css/widgets.css (modified) (2 diffs)
• includes/template-functions.php (modified) (1 diff)
• js/postbox.js (modified) (6 diffs)

trunk/src/wp-admin/css/common.css

@@ -1832 +1832 @@
 
 .postbox .handlediv {
+    display: none;
     float: right;
-    width: 33px;
+    width: 36px;
     height: 36px;
+    padding: 0;
 }
 
 .js .postbox .handlediv {
-    cursor: pointer;
+    display: block;
 }
 
@@ -2771 +2773 @@
 /* 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;
@@ -2784 +2785 @@
 }
 
+.js .sidebar-name .sidebar-name-arrow:before {
+    padding: 10px;
+    left: 0;
+}
+
 .js #widgets-left .sidebar-name .sidebar-name-arrow {
     display: none;
@@ -2795 +2801 @@
 /* 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";
 }
@@ -2926 +2932 @@
 .widget-action:hover,
 .handlediv:hover,
+.handlediv:focus,
 .item-edit:hover,
 .sidebar-name:hover .sidebar-name-arrow,

trunk/src/wp-admin/css/widgets.css

@@ -148 +148 @@
 }
 
-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;
 }
 
@@ -251 +249 @@
 
 div#widgets-right .sidebar-name .sidebar-name-arrow:before {
-    right: 0;
-    top: 4px;
+    top: 2px;
 }
 

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

@@ -990 +990 @@
                     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>';
                     }

trunk/src/wp-admin/js/postbox.js

@@ -7 +7 @@
 
     postboxes = {
-        add_postbox_toggles : function(page, args) {
-            var self = this;
-
-            self.init(page, args);
-
-            $('.postbox .hndle, .postbox .handlediv').bind('click.postboxes', function( e ) {
-                var p = $(this).parent('.postbox'), id = p.attr('id');
-
-                if ( 'dashboard_browser_nag' == id )
-                    return;
-
-                e.preventDefault();
-
-                p.toggleClass( 'closed' );
-                $(this).attr( 'aria-expanded', ! p.hasClass( 'closed' ) );
-
-                if ( page != 'press-this' )
-                    self.save_state(page);
-
-                if ( id ) {
-                    if ( !p.hasClass('closed') && $.isFunction(postboxes.pbshow) )
-                        self.pbshow(id);
-                    else if ( p.hasClass('closed') && $.isFunction(postboxes.pbhide) )
-                        self.pbhide(id);
-                }
-
-                $document.trigger( 'postbox-toggled', p );
-            });
+        handle_click : function () {
+            var $el = $( this ),
+                p = $el.parent( '.postbox' ),
+                id = p.attr( 'id' ),
+                ariaExpandedValue;
+
+            if ( 'dashboard_browser_nag' === id ) {
+                return;
+            }
+
+            p.toggleClass( '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 ( postboxes.page !== 'press-this' ) {
+                postboxes.save_state( postboxes.page );
+            }
+
+            if ( id ) {
+                if ( !p.hasClass('closed') && $.isFunction( postboxes.pbshow ) ) {
+                    postboxes.pbshow( id );
+                } else if ( p.hasClass('closed') && $.isFunction( postboxes.pbhide ) ) {
+                    postboxes.pbhide( id );
+                }
+            }
+
+            $document.trigger( 'postbox-toggled', p );
+        },
+
+        add_postbox_toggles : function (page, args) {
+            var $handles = $( '.postbox .hndle, .postbox .handlediv' );
+
+            this.page = page;
+            this.init( page, args );
+
+            $handles.on( 'click.postboxes',  this.handle_click );
 
             $('.postbox .hndle a').click( function(e) {
@@ -47 +64 @@
 
             $('.hide-postbox-tog').bind('click.postboxes', function() {
-                var boxId = $(this).val(),
+                var $el = $(this),
+                    boxId = $el.val(),
                     $postbox = $( '#' + boxId );
 
-                if ( $(this).prop('checked') ) {
+                if ( $el.prop( 'checked' ) ) {
                     $postbox.show();
-                    if ( $.isFunction( postboxes.pbshow ) )
-                        self.pbshow( boxId );
+                    if ( $.isFunction( postboxes.pbshow ) ) {
+                        postboxes.pbshow( boxId );
+                    }
                 } else {
                     $postbox.hide();
-                    if ( $.isFunction( postboxes.pbhide ) )
-                        self.pbhide( boxId );
-                }
-                self.save_state(page);
-                self._mark_area();
+                    if ( $.isFunction( postboxes.pbhide ) ) {
+                        postboxes.pbhide( boxId );
+                    }
+                }
+                postboxes.save_state( page );
+                postboxes._mark_area();
                 $document.trigger( 'postbox-toggled', $postbox );
             });
@@ -68 +88 @@
 
                 if ( n ) {
-                    self._pb_edit(n);
-                    self.save_order(page);
+                    postboxes._pb_edit(n);
+                    postboxes.save_order( page );
                 }
             });
@@ -75 +95 @@
 
         init : function(page, args) {
-            var isMobile = $(document.body).hasClass('mobile');
+            var isMobile = $( document.body ).hasClass( 'mobile' ),
+                $handleButtons = $( '.postbox .handlediv' );
 
             $.extend( this, args || {} );
@@ -92 +113 @@
                 opacity: 0.65,
                 stop: function() {
-                    if ( $(this).find('#dashboard_browser_nag').is(':visible') && 'dashboard_browser_nag' != this.firstChild.id ) {
-                        $(this).sortable('cancel');
+                    var $el = $( this );
+
+                    if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
+                        $el.sortable('cancel');
                         return;
                     }
@@ -113 +136 @@
 
             this._mark_area();
+
+            // Set the handle buttons `aria-expanded` attribute initial value on page load.
+            $handleButtons.each( function () {
+                var $el = $( this );
+                $el.attr( 'aria-expanded', ! $el.parent( '.postbox' ).hasClass( 'closed' ) );
+            });
         },