From dae3ea83cbc7e2ffdbe82ceacb7b7d7f41faf1a0 Mon Sep 17 00:00:00 2001 From: Scott Taylor Date: Wed, 7 Oct 2015 01:57:06 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@34893 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/common.css | 27 +++--- src/wp-admin/css/widgets.css | 9 +- src/wp-admin/includes/template-functions.php | 5 +- src/wp-admin/js/postbox.js | 95 +++++++++++++------- 4 files changed, 85 insertions(+), 51 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index a5c0b402f5..2bc8771cec 100644 --- a/src/wp-admin/css/common.css +++ b/src/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 { - 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,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 { diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index d9481ad974..ccdfa9b469 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/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 { - right: 0; - top: 4px; - padding: 4px 6px 4px 4px; +#widgets-left .sidebar-name .sidebar-name-arrow:before { + padding: 9px; } #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: 4px; + top: 2px; } div#widgets-right .widget-top { diff --git a/src/wp-admin/includes/template-functions.php b/src/wp-admin/includes/template-functions.php index 515b7f1869..e3abbf93b0 100644 --- a/src/wp-admin/includes/template-functions.php +++ b/src/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 '
' . "\n"; if ( 'dashboard_browser_nag' != $box['id'] ) { - echo ''; } echo "

{$box['title']}

\n"; diff --git a/src/wp-admin/js/postbox.js b/src/wp-admin/js/postbox.js index bee20cbc03..23bad8e80e 100644 --- a/src/wp-admin/js/postbox.js +++ b/src/wp-admin/js/postbox.js @@ -6,34 +6,51 @@ var postboxes; var $document = $( document ); postboxes = { - add_postbox_toggles : function(page, args) { - var self = this; + handle_click : function () { + var $el = $( this ), + p = $el.parent( '.postbox' ), + id = p.attr( 'id' ), + ariaExpandedValue; - self.init(page, args); + if ( 'dashboard_browser_nag' === id ) { + return; + } - $('.postbox .hndle, .postbox .handlediv').bind('click.postboxes', function( e ) { - var p = $(this).parent('.postbox'), id = p.attr('id'); + p.toggleClass( 'closed' ); - if ( 'dashboard_browser_nag' == id ) - return; + ariaExpandedValue = ! p.hasClass( 'closed' ); - e.preventDefault(); + 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 ); + } - p.toggleClass( 'closed' ); - $(this).attr( 'aria-expanded', ! p.hasClass( 'closed' ) ); + if ( postboxes.page !== 'press-this' ) { + postboxes.save_state( postboxes.page ); + } - 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); + 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 ); - }); + $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 ) ) - self.pbshow( boxId ); + if ( $.isFunction( postboxes.pbshow ) ) { + postboxes.pbshow( boxId ); + } } else { $postbox.hide(); - if ( $.isFunction( postboxes.pbhide ) ) - self.pbhide( boxId ); + if ( $.isFunction( postboxes.pbhide ) ) { + 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); - self.save_order(page); + postboxes._pb_edit(n); + 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 ) { - $(this).sortable('cancel'); + var $el = $( this ); + + 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) {