Changeset 31925

Timestamp:

03/30/2015 03:08:30 AM (10 years ago)

Author:

azaozz

Message:

Press This: fix accessibility for the post options "sidebar". Fix size of the Add Category button.
Part props afercis, joedolson. Fixes #31575.

Location:

trunk/src/wp-admin

Files:

• css/press-this.css (modified) (3 diffs)
• includes/class-wp-press-this.php (modified) (1 diff)
• js/press-this.js (modified) (4 diffs)

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

@@ -855 +855 @@
 .add-cat-toggle {
     float: right;
-    margin-top: -33px;
+    margin-top: -45px;
+    line-height: 20px;
+    padding: 12px 10px 8px;
 }
 
@@ -864 +866 @@
 
 .add-cat-toggle.is-toggled {
-    margin-top: -36px;
+    padding: 10px;
 }
 
@@ -1186 +1188 @@
 }
 
-.options-open,
-.options-close {
+.options,
+.options.open .on-closed,
+.options.closed .on-open {
     display: none;
 }
 
 @media (max-width: 900px) {
-    .options-open,
-    .options-close {
+    .options {
         display: block;
     }
 }
 
-.options-open.is-hidden,
-.options-close.is-hidden,
 .options-panel-back.is-hidden {
     display: none;
 }
 
-.options-open:focus .dashicons {
+.options:focus .dashicons {
     color: #fff;
     text-decoration: none;
 }
 
-.options-open .dashicons {
+.options .dashicons {
     margin-top: 3px;
 }
 
-.options-close {
+.options {
     color: #2ea2cc;
 }

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

@@ -1202 +1202 @@
             </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 button-subtle closed">
+            <span class="dashicons dashicons-tag on-closed"></span>
+            <span class="screen-reader-text on-closed"><?php _e( 'Show post options' ); ?></span>
+            <span aria-hidden="true" class="on-open"><?php _e( 'Done' ); ?></span>
+            <span class="screen-reader-text on-open"><?php _e( 'Hide post options' ); ?></span>
         </button>
-        <button type="button" class="options-close button-subtle is-hidden"><?php _e( 'Done' ); ?></button>
     </div>
 

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

@@ -489 +489 @@
             sidebarIsOpen = true;
 
-            $( '.options-open, .press-this-actions, #scanbar' ).addClass( isHidden );
-            $( '.options-close, .options-panel-back' ).removeClass( isHidden );
+            $( '.options' ).removeClass( 'closed' ).addClass( 'open' );
+            $( '.press-this-actions, #scanbar' ).addClass( isHidden );
+            $( '.options-panel-back' ).removeClass( isHidden );
 
             $( '.options-panel' ).removeClass( offscreenHidden )
-                .one( 'transitionend', function() {
+                .one( transitionEndEvent, function() {
                     $( '.post-option:first' ).focus();
                 } );
@@ -501 +502 @@
             sidebarIsOpen = false;
 
-            $( '.options-close, .options-panel-back' ).addClass( isHidden );
-            $( '.options-open, .press-this-actions, #scanbar' ).removeClass( isHidden );
+            $( '.options' ).removeClass( 'open' ).addClass( 'closed' );
+            $( '.options-panel-back' ).addClass( isHidden );
+            $( '.press-this-actions, #scanbar' ).removeClass( isHidden );
 
             $( '.options-panel' ).addClass( isOffScreen )
-                .one( 'transitionend', function() {
+                .one( transitionEndEvent, function() {
                     $( this ).addClass( isHidden );
                     // Reset to options list
@@ -621 +623 @@
             monitorCatList();
 
-            $( '.options-open' ).on( 'click.press-this', openSidebar );
-            $( '.options-close' ).on( 'click.press-this', closeSidebar );
+            $( '.options' ).on( 'click.press-this', function() {
+                if ( $( this ).hasClass( 'open' ) ) {
+                    closeSidebar();
+                } else {
+                    openSidebar();
+                }
+            });
 
             // Close the sidebar when focus moves outside of it.
@@ -633 +640 @@
                         ( node.nodeName === 'BODY' ||
                             ( ! $node.closest( '.options-panel' ).length &&
-                            ! $node.closest( '.options-open' ).length ) ) ) {
+                            ! $node.closest( '.options' ).length ) ) ) {
 
                         closeSidebar();