Make WordPress Core

Changeset 35605


Ignore:
Timestamp:
11/11/2015 12:23:15 AM (8 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/class-wp-terms-list-table.php

    r35241 r35605  
    589589
    590590        <p class="inline-edit-save submit">
    591             <a href="#inline-edit" class="cancel button-secondary alignleft"><?php _e( 'Cancel' ); ?></a>
    592             <a href="#inline-edit" class="save button-primary alignright"><?php echo $tax->labels->update_item; ?></a>
     591            <button type="button" class="cancel button-secondary alignleft"><?php _e( 'Cancel' ); ?></button>
     592            <button type="button" class="save button-primary alignright"><?php echo $tax->labels->update_item; ?></button>
    593593            <span class="spinner"></span>
    594594            <span class="error" style="display:none;"></span>
  • trunk/src/wp-admin/js/inline-edit-tax.js

    r33015 r35605  
    11/* global inlineEditL10n, ajaxurl */
     2window.wp = window.wp || {};
    23
    34var inlineEditTax;
    4 (function($) {
     5( function( $, wp ) {
    56inlineEditTax = {
    67
     
    2324        });
    2425
    25         $( 'a.cancel', row ).click( function() {
     26        $( '.cancel', row ).click( function() {
    2627            return inlineEditTax.revert();
    2728        });
    28         $( 'a.save', row ).click( function() {
     29        $( '.save', row ).click( function() {
    2930            return inlineEditTax.save(this);
    3031        });
     
    9798        $.post( ajaxurl, params,
    9899            function(r) {
    99                 var row, new_id, option_value;
     100                var row, new_id, option_value,
     101                    $errorSpan = $( '#edit-' + id + ' .inline-edit-save .error' );
     102
    100103                $( 'table.widefat .spinner' ).removeClass( 'is-active' );
    101104
     
    118121                        $( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
    119122
    120                         row.hide().fadeIn();
     123                        row.hide().fadeIn( 400, function() {
     124                            // Move focus back to the taxonomy title.
     125                            row.find( '.row-title' ).focus();
     126                            wp.a11y.speak( inlineEditL10n.saved );
     127                        });
     128
    121129                    } else {
    122                         $('#edit-'+id+' .inline-edit-save .error').html(r).show();
     130                        $errorSpan.html( r ).show();
     131                        // Some error strings may contain HTML entities (e.g. `&#8220`), let's use the HTML element's text.
     132                        wp.a11y.speak( $errorSpan.text() );
    123133                    }
    124134                } else {
    125                     $('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
     135                    $errorSpan.html( inlineEditL10n.error ).show();
     136                    wp.a11y.speak( inlineEditL10n.error );
    126137                }
    127138            }
    128139        );
    129         return false;
    130140    },
    131141
     
    137147            $('#'+id).siblings('tr.hidden').addBack().remove();
    138148            id = id.substr( id.lastIndexOf('-') + 1 );
    139             $(this.what+id).show();
     149            // Show the taxonomy listing and move focus back to the taxonomy title.
     150            $( this.what + id ).show().find( '.row-title' ).focus();
    140151        }
    141 
    142         return false;
    143152    },
    144153
     
    150159
    151160$(document).ready(function(){inlineEditTax.init();});
    152 })(jQuery);
     161})( jQuery, window.wp );
  • trunk/src/wp-includes/script-loader.php

    r35466 r35605  
    563563        ) );
    564564
    565         $scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery' ), false, 1 );
     565        $scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery', 'wp-a11y' ), false, 1 );
    566566        did_action( 'init' ) && $scripts->localize( 'inline-edit-tax', 'inlineEditL10n', array(
    567             'error' => __('Error while saving the changes.')
     567            'error' => __( 'Error while saving the changes.' ),
     568            'saved' => __( 'Changes saved.' ),
    568569        ) );
    569570
Note: See TracChangeset for help on using the changeset viewer.