Changeset 42727

Timestamp:

02/21/2018 11:03:57 PM (7 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();
         }
     },