Ticket #31575: 31575.2.patch

src/wp-admin/css/press-this.css

@@ -854 +854 @@
 
 .add-cat-toggle {
         float: right;
-        margin-top: -33px;
+        margin-top: -45px;
+        line-height: 20px;
+        padding: 12px 10px 8px;
 }
 
+.add-cat-toggle.is-toggled {
+          padding: 10px;
+}
+
 .add-cat-toggle:focus {
         text-decoration: none;
         color: #2ea2cc;
 }
 
-.add-cat-toggle.is-toggled {
-        margin-top: -36px;
-}
-
 .add-cat-toggle.is-toggled .dashicons:before {
         content: "\f179";
 }
@@ -1185 +1187 @@
         vertical-align: middle;
 }
 
-.options-open,
-.options-close {
+.options-toggle {
         display: none;
 }
 
 @media (max-width: 900px) {
-        .options-open,
-        .options-close {
+        .options-toggle {
                 display: block;
         }
 }
 
-.options-open.is-hidden,
-.options-close.is-hidden,
+.options-open-label.is-hidden,
+.options-close-label.is-hidden,
 .options-panel-back.is-hidden {
         display: none;
 }
 
-.options-open:focus .dashicons {
+.options-toggle:hover .dashicons,
+.options-toggle:focus .dashicons {
         color: #fff;
         text-decoration: none;
 }
 
-.options-open .dashicons {
+.options-toggle .dashicons {
         margin-top: 3px;
 }
 
-.options-close {
+.options-close-label {
         color: #2ea2cc;
 }
 

src/wp-admin/includes/class-wp-press-this.php

@@ -1201 +1201 @@
                                 <span class="current-site-name"><?php bloginfo( 'name' ); ?></span>
                         </a>
                 </h1>
-                <button type="button" class="options-open button-subtle">
-                        <span class="dashicons dashicons-tag"></span><span class="screen-reader-text"><?php _e( 'Show post options' ); ?></span>
+                <button type="button" class="options-toggle button-subtle" aria-expanded="false" aria-controls="options-panel">
+                        <span class="options-open-label"><span class="dashicons dashicons-tag"></span><span class="screen-reader-text"><?php _e( 'Show post options' ); ?></span></span>
+                        <span class="options-close-label is-hidden"><span aria-hidden="true"><?php _e( 'Done' ); ?></span><span class="screen-reader-text"><?php _e( 'Close post options' ); ?></span></span>
                 </button>
-                <button type="button" class="options-close button-subtle is-hidden"><?php _e( 'Done' ); ?></button>
         </div>
 
         <div id="scanbar" class="scan">
@@ -1273 +1273 @@
                 </div>
 
                 <div class="options-panel-back is-hidden" tabindex="-1"></div>
-                <div class="options-panel is-off-screen is-hidden" tabindex="-1">
+                <div class="options-panel is-off-screen is-hidden" tabindex="-1" id="options-panel">
                         <div class="post-options">
 
                                 <?php if ( $supports_formats ) : ?>

src/wp-admin/js/press-this.js

@@ -470 +470 @@
 
                 /**
                  * Interactive behavior for the sidebar toggle, to show the options modals
+                 *
+                 * @param action string Optional toggle|close (defaults to toggle)
                  */
-                function openSidebar() {
-                        sidebarIsOpen = true;
+                function toggleSidebar( event, action ) {
 
-                        $( '.options-open, .press-this-actions, #scanbar' ).addClass( isHidden );
-                        $( '.options-close, .options-panel-back' ).removeClass( isHidden );
+                        if ( ! action ) {
+                                action = 'toggle';
+                        }
 
-                        $( '.options-panel' ).removeClass( offscreenHidden )
-                                .one( 'transitionend', function() {
-                                        $( '.post-option:first' ).focus();
-                                } );
-                }
+                        if ( ! sidebarIsOpen ) {
+                                sidebarIsOpen = true;
 
-                function closeSidebar() {
-                        sidebarIsOpen = false;
+                                $( '.options-toggle' ).attr( 'aria-expanded', 'true' );
+                                $( '.options-open-label, .press-this-actions, #scanbar' ).addClass( isHidden );
+                                $( '.options-close-label, .options-panel-back' ).removeClass( isHidden );
 
-                        $( '.options-close, .options-panel-back' ).addClass( isHidden );
-                        $( '.options-open, .press-this-actions, #scanbar' ).removeClass( isHidden );
+                                $( '.options-panel' ).removeClass( offscreenHidden )
+                                        .one( 'transitionend', function() {
+                                                $( '.post-option:first' ).focus();
+                                        } );
+                                return;
+                        }
 
-                        $( '.options-panel' ).addClass( isOffScreen )
-                                .one( 'transitionend', function() {
-                                        $( this ).addClass( isHidden );
-                                        // Reset to options list
-                                        $( '.post-options' ).removeClass( offscreenHidden );
-                                        $( '.setting-modal').addClass( offscreenHidden );
-                                });
+                        if ( 'close' === action || sidebarIsOpen ) {
+                                sidebarIsOpen = false;
+
+                                $( '.options-toggle' ).attr( 'aria-expanded', 'false' );
+                                $( '.options-close-label, .options-panel-back' ).addClass( isHidden );
+                                $( '.options-open-label, .press-this-actions, #scanbar' ).removeClass( isHidden );
+
+                                $( '.options-panel' ).addClass( isOffScreen )
+                                        .one( 'transitionend', function() {
+                                                $( this ).addClass( isHidden );
+                                                // Reset to options list
+                                                $( '.post-options' ).removeClass( offscreenHidden );
+                                                $( '.setting-modal').addClass( offscreenHidden );
+                                        } );
+                                return;
+                        }
                 }
 
                 /**
@@ -598 +611 @@
                         monitorPlaceholder();
                         monitorCatList();
 
-                        $( '.options-open' ).on( 'click.press-this', openSidebar );
-                        $( '.options-close' ).on( 'click.press-this', closeSidebar );
+                        $( '.options-toggle' ).on( 'click.press-this', toggleSidebar );
 
                         // Close the sidebar when focus moves outside of it.
-                        $( '.options-panel, .options-panel-back' ).on( 'focusout.press-this', function() {
+                        $( '.options-panel, .options-panel-back' ).on( 'focusout.press-this', function( event ) {
                                 setTimeout( function() {
                                         var node = document.activeElement,
                                                 $node = $( node );
@@ -610 +622 @@
                                         if ( sidebarIsOpen && node && ! $node.hasClass( 'options-panel-back' ) &&
                                                 ( node.nodeName === 'BODY' ||
                                                         ( ! $node.closest( '.options-panel' ).length &&
-                                                        ! $node.closest( '.options-open' ).length ) ) ) {
+                                                        ! $node.closest( '.options-toggle' ).length ) ) ) {
 
-                                                closeSidebar();
+                                                toggleSidebar( event, 'close' );
                                         }
                                 }, 50 );
                         });