Changeset 34893

Timestamp:

10/07/2015 01:57:06 AM (11 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' ) );
+                        });
                 },