Changeset 35605

Timestamp:

11/11/2015 12:23:15 AM (9 years ago)

Author:

afercia

Message:

Accessibility: improvements for the taxonomies Quick Edit form.

Changes the "Cancel" and "Update" controls in buttons for better semantics and
accessibility. On cancel and successful saving, moves focus back to the term title
to avoid a focus loss. Dispatches error and success messages to wp.a11y.speak
to give assistive technologies users an audible feedback.

Patch prepared at #wpcdit, first Italian WordPress Contributor Day.

Props garusky, chiara_09.
Fixes #34613.

Location:

trunk/src

Files:

• wp-admin/includes/class-wp-terms-list-table.php (modified) (1 diff)
• wp-admin/js/inline-edit-tax.js (modified) (6 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/wp-admin/includes/class-wp-terms-list-table.php

@@ -589 +589 @@
 
         <p class="inline-edit-save submit">
-            <a href="#inline-edit" class="cancel button-secondary alignleft"><?php _e( 'Cancel' ); ?></a>
-            <a href="#inline-edit" class="save button-primary alignright"><?php echo $tax->labels->update_item; ?></a>
+            <button type="button" class="cancel button-secondary alignleft"><?php _e( 'Cancel' ); ?></button>
+            <button type="button" class="save button-primary alignright"><?php echo $tax->labels->update_item; ?></button>
             <span class="spinner"></span>
             <span class="error" style="display:none;"></span>

trunk/src/wp-admin/js/inline-edit-tax.js

@@ -1 +1 @@
 /* global inlineEditL10n, ajaxurl */
+window.wp = window.wp || {};
 
 var inlineEditTax;
-(function($) {
+( function( $, wp ) {
 inlineEditTax = {
 
@@ -23 +24 @@
         });
 
-        $( 'a.cancel', row ).click( function() {
+        $( '.cancel', row ).click( function() {
             return inlineEditTax.revert();
         });
-        $( 'a.save', row ).click( function() {
+        $( '.save', row ).click( function() {
             return inlineEditTax.save(this);
         });
@@ -97 +98 @@
         $.post( ajaxurl, params,
             function(r) {
-                var row, new_id, option_value;
+                var row, new_id, option_value,
+                    $errorSpan = $( '#edit-' + id + ' .inline-edit-save .error' );
+
                 $( 'table.widefat .spinner' ).removeClass( 'is-active' );
 
@@ -118 +121 @@
                         $( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
 
-                        row.hide().fadeIn();
+                        row.hide().fadeIn( 400, function() {
+                            // Move focus back to the taxonomy title.
+                            row.find( '.row-title' ).focus();
+                            wp.a11y.speak( inlineEditL10n.saved );
+                        });
+
                     } else {
-                        $('#edit-'+id+' .inline-edit-save .error').html(r).show();
+                        $errorSpan.html( r ).show();
+                        // Some error strings may contain HTML entities (e.g. `&#8220`), let's use the HTML element's text.
+                        wp.a11y.speak( $errorSpan.text() );
                     }
                 } else {
-                    $('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
+                    $errorSpan.html( inlineEditL10n.error ).show();
+                    wp.a11y.speak( inlineEditL10n.error );
                 }
             }
         );
-        return false;
     },
 
@@ -137 +147 @@
             $('#'+id).siblings('tr.hidden').addBack().remove();
             id = id.substr( id.lastIndexOf('-') + 1 );
-            $(this.what+id).show();
+            // Show the taxonomy listing and move focus back to the taxonomy title.
+            $( this.what + id ).show().find( '.row-title' ).focus();
         }
-
-        return false;
     },
 
@@ -150 +159 @@
 
 $(document).ready(function(){inlineEditTax.init();});
-})(jQuery);
+})( jQuery, window.wp );

trunk/src/wp-includes/script-loader.php

@@ -563 +563 @@
         ) );
 
-        $scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery' ), false, 1 );
+        $scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery', 'wp-a11y' ), false, 1 );
         did_action( 'init' ) && $scripts->localize( 'inline-edit-tax', 'inlineEditL10n', array(
-            'error' => __('Error while saving the changes.')
+            'error' => __( 'Error while saving the changes.' ),
+            'saved' => __( 'Changes saved.' ),
         ) );