From 6a32cc13e279fac1ce3307c80335de6905d4311e Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Wed, 20 Feb 2019 22:08:23 +0000
Subject: [PATCH] Accessibility: Improve buttons placement in the Comments
 Quick edit/Reply form.

Proximity of related information is an inclusive design principle that benefits everyone and it's particularly important for users with reduced visual field, low vision, or other vision or cognitive impairments. User interface controls that are logically grouped should be placed close to each other.
Also, this change makes the buttons visual order and the DOM order match.

Fixes #45972.


git-svn-id: https://develop.svn.wordpress.org/trunk@44757 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/list-tables.css   | 9 +++++++++
 src/wp-admin/includes/template.php | 7 +++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index b5d353d8eb..20eb9ca585 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -152,10 +152,19 @@
 	overflow: hidden;
 }
 
+#replysubmit .reply-submit-buttons {
+	margin-bottom: 0;
+}
+
 #replysubmit .button {
 	margin-right: 5px;
 }
 
+#replysubmit .spinner {
+	float: none;
+	margin: -4px 0 0;
+}
+
 #replyrow.inline-edit-row fieldset.comment-reply {
 	font-size: inherit;
 	line-height: inherit;
diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php
index bdd6182e2f..6deb0e2f10 100644
--- a/src/wp-admin/includes/template.php
+++ b/src/wp-admin/includes/template.php
@@ -479,16 +479,15 @@ function wp_comment_reply( $position = 1, $checkbox = false, $mode = 'single', $
 	</div>
 
 	<div id="replysubmit" class="submit">
-		<p>
-			<a href="#comments-form" class="save button button-primary alignright">
+		<p class="reply-submit-buttons">
+			<a href="#comments-form" class="save button button-primary">
 				<span id="addbtn" style="display: none;"><?php _e( 'Add Comment' ); ?></span>
 				<span id="savebtn" style="display: none;"><?php _e( 'Update Comment' ); ?></span>
 				<span id="replybtn" style="display: none;"><?php _e( 'Submit Reply' ); ?></span>
 			</a>
-			<a href="#comments-form" class="cancel button alignleft"><?php _e( 'Cancel' ); ?></a>
+			<a href="#comments-form" class="cancel button"><?php _e( 'Cancel' ); ?></a>
 			<span class="waiting spinner"></span>
 		</p>
-		<br class="clear" />
 		<div class="notice notice-error notice-alt inline hidden">
 			<p class="error"></p>
 		</div>