Changeset 42727

Timestamp:

02/21/2018 11:03:57 PM (9 years ago)

Author:

afercia

Message:

Accessibility: Change the terms "Quick Edit" link to a button.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation.
See #38677 / [42725].

Fixes #43382.

Location:

trunk/src/wp-admin

Files:

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

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

@@ -456 +456 @@
                         );
                         $actions['inline hide-if-no-js'] = sprintf(
-                                '<a href="#" class="editinline aria-button-if-js" aria-label="%s">%s</a>',
+                                '<button type="button" class="button-link editinline" aria-label="%s" aria-expanded="false">%s</button>',
                                 /* translators: %s: taxonomy term name */
                                 esc_attr( sprintf( __( 'Quick edit &#8220;%s&#8221; inline' ), $tag->name ) ),

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

@@ -37 +37 @@
                 t.what = '#'+t.type+'-';
 
-                $('#the-list').on('click', 'a.editinline', function(){
-                        inlineEditTax.edit(this);
-                        return false;
+                $( '#the-list' ).on( 'click', '.editinline', function() {
+                        $( this ).attr( 'aria-expanded', 'true' );
+                        inlineEditTax.edit( this );
                 });
 
@@ -220 +220 @@
 
                                                 row.hide().fadeIn( 400, function() {
-                                                        // Move focus back to the Quick Edit link.
-                                                        row.find( '.editinline' ).focus();
+                                                        // Move focus back to the Quick Edit button.
+                                                        row.find( '.editinline' )
+                                                                .attr( 'aria-expanded', 'false' )
+                                                                .focus();
                                                         wp.a11y.speak( inlineEditL10n.saved );
                                                 });
@@ -263 +265 @@
                         id = id.substr( id.lastIndexOf('-') + 1 );
 
-                        // Show the taxonomy row and move focus back to the Quick Edit link.
-                        $( this.what + id ).show().find( '.editinline' ).focus();
+                        // Show the taxonomy row and move focus back to the Quick Edit button.
+                        $( this.what + id ).show().find( '.editinline' )
+                                .attr( 'aria-expanded', 'false' )
+                                .focus();
                 }
         },