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.

Built from https://develop.svn.wordpress.org/trunk@34893


git-svn-id: http://core.svn.wordpress.org/trunk@34858 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -1831,13 +1831,15 @@ html.wp-toolbar {
 }
 
 .postbox .handlediv {
+	display: none;
 	float: left;
-	width: 33px;
+	width: 36px;
 	height: 36px;
+	padding: 0;
 }
 
 .js .postbox .handlediv {
-	cursor: pointer;
+	display: block;
 }
 
 .sortable-placeholder {
@@ -2770,19 +2772,23 @@ img {
 
 /* Metabox collapse arrow indicators */
 .js .sidebar-name .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox .handlediv:before {
+.js .meta-box-sortables .postbox .toggle-indicator:before {
-	left: 12px;
+	position: relative;
+	right: -1px; /* fix the dashicon horizontal alignment */
+	display: inline-block;
 	font: normal 20px/1 dashicons;
 	speak: none;
-	display: inline-block;
+	padding: 8px;
-	padding: 8px 10px;
-	top: 0;
-	position: relative;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	text-decoration: none !important;
 }
 
+.js .sidebar-name .sidebar-name-arrow:before {
+	padding: 10px;
+	right: 0;
+}
+
 .js #widgets-left .sidebar-name .sidebar-name-arrow {
 	display: none;
 }
@@ -2794,12 +2800,12 @@ img {
 
 /* 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,6 +2931,7 @@ img {
 
 .widget-action:hover,
 .handlediv:hover,
+.handlediv:focus,
 .item-edit:hover,
 .sidebar-name:hover .sidebar-name-arrow,
 .accordion-section-title:hover:after {

wp-admin/css/common.css

@@ -1831,13 +1831,15 @@ html.wp-toolbar {
 }
 
 .postbox .handlediv {
+	display: none;
 	float: right;
-	width: 33px;
+	width: 36px;
 	height: 36px;
+	padding: 0;
 }
 
 .js .postbox .handlediv {
-	cursor: pointer;
+	display: block;
 }
 
 .sortable-placeholder {
@@ -2770,19 +2772,23 @@ img {
 
 /* Metabox collapse arrow indicators */
 .js .sidebar-name .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox .handlediv:before {
+.js .meta-box-sortables .postbox .toggle-indicator:before {
-	right: 12px;
+	position: relative;
+	left: -1px; /* fix the dashicon horizontal alignment */
+	display: inline-block;
 	font: normal 20px/1 dashicons;
 	speak: none;
-	display: inline-block;
+	padding: 8px;
-	padding: 8px 10px;
-	top: 0;
-	position: relative;
 	-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,12 +2800,12 @@ img {
 
 /* 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,6 +2931,7 @@ img {
 
 .widget-action:hover,
 .handlediv:hover,
+.handlediv:focus,
 .item-edit:hover,
 .sidebar-name:hover .sidebar-name-arrow,
 .accordion-section-title:hover:after {

wp-admin/css/widgets-rtl.css

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

wp-admin/css/widgets.css

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

wp-admin/includes/template-functions.php

@@ -989,8 +989,9 @@ function do_meta_boxes( $screen, $context, $object ) {
 					$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 '<button type="button" class="handlediv button-link" aria-expanded="true">';
-						echo '<span class="screen-reader-text">' . sprintf( __( 'Click to toggle %s panel' ), $box['title'] ) . '</span><br />';
+						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";

wp-admin/js/postbox.js

@@ -6,34 +6,51 @@ var postboxes;
 	var $document = $( document );
 
 	postboxes = {
-		add_postbox_toggles : function(page, args) {
+		handle_click : function () {
-			var self = this;
+			var $el = $( this ),
+				p = $el.parent( '.postbox' ),
+				id = p.attr( 'id' ),
+				ariaExpandedValue;
 
-			self.init(page, args);
+			if ( 'dashboard_browser_nag' === id ) {
-
-			$('.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' )
+			ariaExpandedValue = ! p.hasClass( 'closed' );
-					self.save_state(page);
+
+			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) )
+				if ( !p.hasClass('closed') && $.isFunction( postboxes.pbshow ) ) {
-						self.pbshow(id);
+					postboxes.pbshow( id );
-					else if ( p.hasClass('closed') && $.isFunction(postboxes.pbhide) )
+				} else if ( p.hasClass('closed') && $.isFunction( postboxes.pbhide ) ) {
-						self.pbhide(id);
+					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) {
 				e.stopPropagation();
@@ -46,20 +63,23 @@ var postboxes;
 			});
 
 			$('.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 ) )
+					if ( $.isFunction( postboxes.pbshow ) ) {
-						self.pbshow( boxId );
+						postboxes.pbshow( boxId );
+					}
 				} else {
 					$postbox.hide();
-					if ( $.isFunction( postboxes.pbhide ) )
+					if ( $.isFunction( postboxes.pbhide ) ) {
-						self.pbhide( boxId );
+						postboxes.pbhide( boxId );
 					}
-				self.save_state(page);
+				}
-				self._mark_area();
+				postboxes.save_state( page );
+				postboxes._mark_area();
 				$document.trigger( 'postbox-toggled', $postbox );
 			});
 
@@ -67,14 +87,15 @@ var postboxes;
 				var n = parseInt($(this).val(), 10);
 
 				if ( n ) {
-					self._pb_edit(n);
+					postboxes._pb_edit(n);
-					self.save_order(page);
+					postboxes.save_order( page );
 				}
 			});
 		},
 
 		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');
@@ -91,8 +112,10 @@ var postboxes;
 				helper: 'clone',
 				opacity: 0.65,
 				stop: function() {
-					if ( $(this).find('#dashboard_browser_nag').is(':visible') && 'dashboard_browser_nag' != this.firstChild.id ) {
+					var $el = $( this );
-						$(this).sortable('cancel');
+
+					if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
+						$el.sortable('cancel');
 						return;
 					}
 
@@ -112,6 +135,12 @@ var postboxes;
 			}
 
 			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' ) );
+			});
 		},
 
 		save_state : function(page) {

wp-admin/js/postbox.min.js

@@ -1 +1 @@
-var postboxes;!function(a){var b=a(document);postboxes={add_postbox_toggles:function(c,d){var e=this;e.init(c,d),a(".postbox .hndle, .postbox .handlediv").bind("click.postboxes",function(d){var f=a(this).parent(".postbox"),g=f.attr("id");"dashboard_browser_nag"!=g&&(d.preventDefault(),f.toggleClass("closed"),a(this).attr("aria-expanded",!f.hasClass("closed")),"press-this"!=c&&e.save_state(c),g&&(!f.hasClass("closed")&&a.isFunction(postboxes.pbshow)?e.pbshow(g):f.hasClass("closed")&&a.isFunction(postboxes.pbhide)&&e.pbhide(g)),b.trigger("postbox-toggled",f))}),a(".postbox .hndle a").click(function(a){a.stopPropagation()}),a(".postbox a.dismiss").bind("click.postboxes",function(){var b=a(this).parents(".postbox").attr("id")+"-hide";return a("#"+b).prop("checked",!1).triggerHandler("click"),!1}),a(".hide-postbox-tog").bind("click.postboxes",function(){var d=a(this).val(),f=a("#"+d);a(this).prop("checked")?(f.show(),a.isFunction(postboxes.pbshow)&&e.pbshow(d)):(f.hide(),a.isFunction(postboxes.pbhide)&&e.pbhide(d)),e.save_state(c),e._mark_area(),b.trigger("postbox-toggled",f)}),a('.columns-prefs input[type="radio"]').bind("click.postboxes",function(){var b=parseInt(a(this).val(),10);b&&(e._pb_edit(b),e.save_order(c))})},init:function(b,c){var d=a(document.body).hasClass("mobile");a.extend(this,c||{}),a("#wpbody-content").css("overflow","hidden"),a(".meta-box-sortables").sortable({placeholder:"sortable-placeholder",connectWith:".meta-box-sortables",items:".postbox",handle:".hndle",cursor:"move",delay:d?200:0,distance:2,tolerance:"pointer",forcePlaceholderSize:!0,helper:"clone",opacity:.65,stop:function(){return a(this).find("#dashboard_browser_nag").is(":visible")&&"dashboard_browser_nag"!=this.firstChild.id?void a(this).sortable("cancel"):void postboxes.save_order(b)},receive:function(b,c){"dashboard_browser_nag"==c.item[0].id&&a(c.sender).sortable("cancel"),postboxes._mark_area()}}),d&&(a(document.body).bind("orientationchange.postboxes",function(){postboxes._pb_change()}),this._pb_change()),this._mark_area()},save_state:function(b){var c=a(".postbox").filter(".closed").map(function(){return this.id}).get().join(","),d=a(".postbox").filter(":hidden").map(function(){return this.id}).get().join(",");a.post(ajaxurl,{action:"closed-postboxes",closed:c,hidden:d,closedpostboxesnonce:jQuery("#closedpostboxesnonce").val(),page:b})},save_order:function(b){var c,d=a(".columns-prefs input:checked").val()||0;c={action:"meta-box-order",_ajax_nonce:a("#meta-box-order-nonce").val(),page_columns:d,page:b},a(".meta-box-sortables").each(function(){c["order["+this.id.split("-")[0]+"]"]=a(this).sortable("toArray").join(",")}),a.post(ajaxurl,c)},_mark_area:function(){var b=a("div.postbox:visible").length,c=a("#post-body #side-sortables");a("#dashboard-widgets .meta-box-sortables:visible").each(function(){var c=a(this);1==b||c.children(".postbox:visible").length?c.removeClass("empty-container"):c.addClass("empty-container")}),c.length&&(c.children(".postbox:visible").length?c.removeClass("empty-container"):"280px"==a("#postbox-container-1").css("width")&&c.addClass("empty-container"))},_pb_edit:function(b){var c=a(".metabox-holder").get(0);c&&(c.className=c.className.replace(/columns-\d+/,"columns-"+b)),a(document).trigger("postboxes-columnchange")},_pb_change:function(){var b=a('label.columns-prefs-1 input[type="radio"]');switch(window.orientation){case 90:case-90:b.length&&b.is(":checked")||this._pb_edit(2);break;case 0:case 180:a("#poststuff").length?this._pb_edit(1):b.length&&b.is(":checked")||this._pb_edit(2)}},pbshow:!1,pbhide:!1}}(jQuery);
+var postboxes;!function(a){var b=a(document);postboxes={handle_click:function(){var c,d=a(this),e=d.parent(".postbox"),f=e.attr("id");"dashboard_browser_nag"!==f&&(e.toggleClass("closed"),c=!e.hasClass("closed"),d.hasClass("handlediv")?d.attr("aria-expanded",c):d.closest(".postbox").find("button.handlediv").attr("aria-expanded",c),"press-this"!==postboxes.page&&postboxes.save_state(postboxes.page),f&&(!e.hasClass("closed")&&a.isFunction(postboxes.pbshow)?postboxes.pbshow(f):e.hasClass("closed")&&a.isFunction(postboxes.pbhide)&&postboxes.pbhide(f)),b.trigger("postbox-toggled",e))},add_postbox_toggles:function(c,d){var e=a(".postbox .hndle, .postbox .handlediv");this.page=c,this.init(c,d),e.on("click.postboxes",this.handle_click),a(".postbox .hndle a").click(function(a){a.stopPropagation()}),a(".postbox a.dismiss").bind("click.postboxes",function(){var b=a(this).parents(".postbox").attr("id")+"-hide";return a("#"+b).prop("checked",!1).triggerHandler("click"),!1}),a(".hide-postbox-tog").bind("click.postboxes",function(){var d=a(this),e=d.val(),f=a("#"+e);d.prop("checked")?(f.show(),a.isFunction(postboxes.pbshow)&&postboxes.pbshow(e)):(f.hide(),a.isFunction(postboxes.pbhide)&&postboxes.pbhide(e)),postboxes.save_state(c),postboxes._mark_area(),b.trigger("postbox-toggled",f)}),a('.columns-prefs input[type="radio"]').bind("click.postboxes",function(){var b=parseInt(a(this).val(),10);b&&(postboxes._pb_edit(b),postboxes.save_order(c))})},init:function(b,c){var d=a(document.body).hasClass("mobile"),e=a(".postbox .handlediv");a.extend(this,c||{}),a("#wpbody-content").css("overflow","hidden"),a(".meta-box-sortables").sortable({placeholder:"sortable-placeholder",connectWith:".meta-box-sortables",items:".postbox",handle:".hndle",cursor:"move",delay:d?200:0,distance:2,tolerance:"pointer",forcePlaceholderSize:!0,helper:"clone",opacity:.65,stop:function(){var c=a(this);return c.find("#dashboard_browser_nag").is(":visible")&&"dashboard_browser_nag"!=this.firstChild.id?void c.sortable("cancel"):void postboxes.save_order(b)},receive:function(b,c){"dashboard_browser_nag"==c.item[0].id&&a(c.sender).sortable("cancel"),postboxes._mark_area()}}),d&&(a(document.body).bind("orientationchange.postboxes",function(){postboxes._pb_change()}),this._pb_change()),this._mark_area(),e.each(function(){var b=a(this);b.attr("aria-expanded",!b.parent(".postbox").hasClass("closed"))})},save_state:function(b){var c=a(".postbox").filter(".closed").map(function(){return this.id}).get().join(","),d=a(".postbox").filter(":hidden").map(function(){return this.id}).get().join(",");a.post(ajaxurl,{action:"closed-postboxes",closed:c,hidden:d,closedpostboxesnonce:jQuery("#closedpostboxesnonce").val(),page:b})},save_order:function(b){var c,d=a(".columns-prefs input:checked").val()||0;c={action:"meta-box-order",_ajax_nonce:a("#meta-box-order-nonce").val(),page_columns:d,page:b},a(".meta-box-sortables").each(function(){c["order["+this.id.split("-")[0]+"]"]=a(this).sortable("toArray").join(",")}),a.post(ajaxurl,c)},_mark_area:function(){var b=a("div.postbox:visible").length,c=a("#post-body #side-sortables");a("#dashboard-widgets .meta-box-sortables:visible").each(function(){var c=a(this);1==b||c.children(".postbox:visible").length?c.removeClass("empty-container"):c.addClass("empty-container")}),c.length&&(c.children(".postbox:visible").length?c.removeClass("empty-container"):"280px"==a("#postbox-container-1").css("width")&&c.addClass("empty-container"))},_pb_edit:function(b){var c=a(".metabox-holder").get(0);c&&(c.className=c.className.replace(/columns-\d+/,"columns-"+b)),a(document).trigger("postboxes-columnchange")},_pb_change:function(){var b=a('label.columns-prefs-1 input[type="radio"]');switch(window.orientation){case 90:case-90:b.length&&b.is(":checked")||this._pb_edit(2);break;case 0:case 180:a("#poststuff").length?this._pb_edit(1):b.length&&b.is(":checked")||this._pb_edit(2)}},pbshow:!1,pbhide:!1}}(jQuery);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.4-alpha-34892';
+$wp_version = '4.4-alpha-34893';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.