Changeset 42725

Timestamp:

02/21/2018 10:30:34 PM (7 years ago)

Author:

afercia

Message:

Accessibility: Change the posts "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. Also,
adds an aria-expanded attribute to the button to communicate to assistive
technologies the expanded / collapsed status of the Quick Edit form.

Props Cheffheid, audrasjb, afercia.
Fixes #38677.

Location:

trunk/src/wp-admin

Files:

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

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

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

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

@@ -120 +120 @@
 
         /**
-         * Binds click event to the .editinline link which opens the quick editor.
-         */
-        $('#the-list').on( 'click', 'a.editinline', function( e ) {
-            e.preventDefault();
-            inlineEditPost.edit(this);
+         * Binds click event to the .editinline button which opens the quick editor.
+         */
+        $( '#the-list' ).on( 'click', '.editinline', function() {
+            $( this ).attr( 'aria-expanded', 'true' );
+            inlineEditPost.edit( this );
         });
 
@@ -423 +423 @@
                         $('#edit-'+id).before(r).remove();
                         $( inlineEditPost.what + id ).hide().fadeIn( 400, function() {
-                            // Move focus back to the Quick Edit link. $( this ) is the row being animated.
-                            $( this ).find( '.editinline' ).focus();
+                            // Move focus back to the Quick Edit button. $( this ) is the row being animated.
+                            $( this ).find( '.editinline' )
+                                .attr( 'aria-expanded', 'false' )
+                                .focus();
                             wp.a11y.speak( inlineEditL10n.saved );
                         });
@@ -478 +480 @@
                 id = id.substr( id.lastIndexOf('-') + 1 );
 
-                // Show the post row and move focus back to the Quick Edit link.
-                $( this.what + id ).show().find( '.editinline' ).focus();
+                // Show the post row and move focus back to the Quick Edit button.
+                $( this.what + id ).show().find( '.editinline' )
+                    .attr( 'aria-expanded', 'false' )
+                    .focus();
             }
         }