From c729ca4171a0a019ccd1a904cd7c9405beedd4da Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Wed, 21 Feb 2018 22:30:34 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@42725 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../includes/class-wp-posts-list-table.php    |  2 +-
 src/wp-admin/js/inline-edit-post.js           | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/includes/class-wp-posts-list-table.php b/src/wp-admin/includes/class-wp-posts-list-table.php
index 18eccc78c0..a09d76c4e4 100644
--- a/src/wp-admin/includes/class-wp-posts-list-table.php
+++ b/src/wp-admin/includes/class-wp-posts-list-table.php
@@ -1267,7 +1267,7 @@ if ( $this->is_trash && current_user_can( get_post_type_object( $this->screen->p
 				__( 'Edit' )
 			);
 			$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 ) ),
 				__( 'Quick&nbsp;Edit' )
diff --git a/src/wp-admin/js/inline-edit-post.js b/src/wp-admin/js/inline-edit-post.js
index b49ac03c1b..665f3fe355 100644
--- a/src/wp-admin/js/inline-edit-post.js
+++ b/src/wp-admin/js/inline-edit-post.js
@@ -119,11 +119,11 @@ var inlineEditPost;
 		});
 
 		/**
-		 * Binds click event to the .editinline link which opens the quick editor.
+		 * Binds click event to the .editinline button which opens the quick editor.
 		 */
-		$('#the-list').on( 'click', 'a.editinline', function( e ) {
-			e.preventDefault();
-			inlineEditPost.edit(this);
+		$( '#the-list' ).on( 'click', '.editinline', function() {
+			$( this ).attr( 'aria-expanded', 'true' );
+			inlineEditPost.edit( this );
 		});
 
 		$('#bulk-edit').find('fieldset:first').after(
@@ -422,8 +422,10 @@ var inlineEditPost;
 						$(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
 						$('#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 );
 						});
 					} else {
@@ -477,8 +479,10 @@ var inlineEditPost;
 				$('#'+id).siblings('tr.hidden').addBack().remove();
 				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();
 			}
 		}