From a06097a2b7cb0133f5dac814d8fecd7bca0ec3e3 Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Tue, 29 Mar 2022 19:06:54 +0000
Subject: [PATCH] Quick/Bulk Edit: Position action buttons in close proximity.

Move the Submit and Cancel buttons in quick edit forms to be next to each other and change the order of the buttons. Improve accessibility for low vision and cognitive impairments for quick editing.

Props afercia, marybaum.
Fixes #55364.


git-svn-id: https://develop.svn.wordpress.org/trunk@53023 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/list-tables.css                   | 14 ++++++++++++++
 .../includes/class-wp-posts-list-table.php         | 14 ++++++++------
 .../includes/class-wp-terms-list-table.php         |  5 ++---
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 37bf3da948..e9a97680b9 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -914,12 +914,26 @@ tr.inline-edit-row td,
 }
 
 .inline-edit-row .submit {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
 	clear: both;
 	padding: 0.5em;
 	margin: 0.5em 0 0;
 }
 
+.inline-edit-save.submit .button {
+	margin-right: 8px;
+}
+
+.inline-edit-save .spinner {
+	float: none;
+	margin: 0;
+}
+
 .inline-edit-row .notice-error {
+	box-sizing: border-box;
+	min-width: 100%;
 	margin-top: 1em;
 }
 
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 7fd4bf89ac..c98bfbc98c 100644
--- a/src/wp-admin/includes/class-wp-posts-list-table.php
+++ b/src/wp-admin/includes/class-wp-posts-list-table.php
@@ -2007,14 +2007,17 @@ class WP_Posts_List_Table extends WP_List_Table {
 			?>
 
 			<div class="submit inline-edit-save">
-				<button type="button" class="button cancel alignleft"><?php _e( 'Cancel' ); ?></button>
-
 				<?php if ( ! $bulk ) : ?>
 					<?php wp_nonce_field( 'inlineeditnonce', '_inline_edit', false ); ?>
-					<button type="button" class="button button-primary save alignright"><?php _e( 'Update' ); ?></button>
-					<span class="spinner"></span>
+					<button type="button" class="button button-primary save"><?php _e( 'Update' ); ?></button>
 				<?php else : ?>
-					<?php submit_button( __( 'Update' ), 'primary alignright', 'bulk_edit', false ); ?>
+					<?php submit_button( __( 'Update' ), 'primary', 'bulk_edit', false ); ?>
+				<?php endif; ?>
+
+				<button type="button" class="button cancel"><?php _e( 'Cancel' ); ?></button>
+
+				<?php if ( ! $bulk ) : ?>
+					<span class="spinner"></span>
 				<?php endif; ?>
 
 				<input type="hidden" name="post_view" value="<?php echo esc_attr( $m ); ?>" />
@@ -2022,7 +2025,6 @@ class WP_Posts_List_Table extends WP_List_Table {
 				<?php if ( ! $bulk && ! post_type_supports( $screen->post_type, 'author' ) ) : ?>
 					<input type="hidden" name="post_author" value="<?php echo esc_attr( $post->post_author ); ?>" />
 				<?php endif; ?>
-				<br class="clear" />
 
 				<div class="notice notice-error notice-alt inline hidden">
 					<p class="error"></p>
diff --git a/src/wp-admin/includes/class-wp-terms-list-table.php b/src/wp-admin/includes/class-wp-terms-list-table.php
index 8d0217d40f..4c5da449b3 100644
--- a/src/wp-admin/includes/class-wp-terms-list-table.php
+++ b/src/wp-admin/includes/class-wp-terms-list-table.php
@@ -696,14 +696,13 @@ class WP_Terms_List_Table extends WP_List_Table {
 			?>
 
 			<div class="inline-edit-save submit">
-				<button type="button" class="cancel button alignleft"><?php _e( 'Cancel' ); ?></button>
-				<button type="button" class="save button button-primary alignright"><?php echo $tax->labels->update_item; ?></button>
+				<button type="button" class="save button button-primary"><?php echo $tax->labels->update_item; ?></button>
+				<button type="button" class="cancel button"><?php _e( 'Cancel' ); ?></button>
 				<span class="spinner"></span>
 
 				<?php wp_nonce_field( 'taxinlineeditnonce', '_inline_edit', false ); ?>
 				<input type="hidden" name="taxonomy" value="<?php echo esc_attr( $this->screen->taxonomy ); ?>" />
 				<input type="hidden" name="post_type" value="<?php echo esc_attr( $this->screen->post_type ); ?>" />
-				<br class="clear" />
 
 				<div class="notice notice-error notice-alt inline hidden">
 					<p class="error"></p>