From d932659aba34e5fc38af663a346f42311a98408f Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Sat, 24 Jun 2023 14:30:31 +0000
Subject: [PATCH] Editor: Improve accessibility of new custom field UI.

Add labels; change Enter new/Cancel link to a button; move focus to input when creating new field; move Add Custom Field out of fields table.

Props jane, batmoo, karmatosed, franrosa, sabernhardt, annashopina, oglekler, joedolson.
Fixes #15631.

git-svn-id: https://develop.svn.wordpress.org/trunk@56018 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/_enqueues/lib/lists.js      |  2 +-
 src/wp-admin/css/edit.css          |  7 ++++++-
 src/wp-admin/includes/template.php | 26 ++++++++++----------------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/js/_enqueues/lib/lists.js b/src/js/_enqueues/lib/lists.js
index 70e054fda8..d7e888c85b 100644
--- a/src/js/_enqueues/lib/lists.js
+++ b/src/js/_enqueues/lib/lists.js
@@ -747,7 +747,7 @@ wpList = {
 			return list.wpList.add( this );
 		} );
 
-		$element.on( 'click', 'a[data-wp-lists^="add:' + list.id + ':"], input[data-wp-lists^="add:' + list.id + ':"]', function() {
+		$element.on( 'click', '[data-wp-lists^="add:' + list.id + ':"], input[data-wp-lists^="add:' + list.id + ':"]', function() {
 			return list.wpList.add( this );
 		} );
 
diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index 2033113664..f808cf1c7f 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/wp-admin/css/edit.css
@@ -1068,6 +1068,10 @@ form#tags-filter {
 	padding: 0 8px 8px;
 }
 
+#postcustom #postcustomstuff .add-custom-field {
+	padding: 12px 8px 8px;
+}
+
 #side-sortables #postcustom #postcustomstuff .submit {
 	margin: 0;
 	padding: 0;
@@ -1118,7 +1122,8 @@ form#tags-filter {
 	width: auto;
 }
 
-#postcustomstuff #newmetaleft a {
+#postcustomstuff #newmetaleft a,
+#postcustomstuff #newmeta-button {
 	display: inline-block;
 	margin: 0 8px 8px;
 	text-decoration: none;
diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php
index 791fe8253a..6024d8f607 100644
--- a/src/wp-admin/includes/template.php
+++ b/src/wp-admin/includes/template.php
@@ -724,16 +724,13 @@ function meta_form( $post = null ) {
 
 	if ( $keys ) {
 		natcasesort( $keys );
-		$meta_key_input_id = 'metakeyselect';
-	} else {
-		$meta_key_input_id = 'metakeyinput';
 	}
 	?>
 <p><strong><?php _e( 'Add New Custom Field:' ); ?></strong></p>
 <table id="newmeta">
 <thead>
 <tr>
-<th class="left"><label for="<?php echo $meta_key_input_id; ?>"><?php _ex( 'Name', 'meta name' ); ?></label></th>
+<th class="left"><label for="metakeyselect"><?php _ex( 'Name', 'meta name' ); ?></label></th>
 <th><label for="metavalue"><?php _e( 'Value' ); ?></label></th>
 </tr>
 </thead>
@@ -753,19 +750,21 @@ function meta_form( $post = null ) {
 		}
 		?>
 </select>
-<input class="hide-if-js" type="text" id="metakeyinput" name="metakeyinput" value="" />
-<a href="#postcustomstuff" class="hide-if-no-js" onclick="jQuery('#metakeyinput, #metakeyselect, #enternew, #cancelnew').toggle();return false;">
+<input class="hidden" type="text" id="metakeyinput" name="metakeyinput" value="" aria-label="<?php _e( 'New custom field name' ); ?>" />
+<button type="button" id="newmeta-button" class="button button-small hide-if-no-js" onclick="jQuery('#metakeyinput, #metakeyselect, #enternew, #cancelnew').toggleClass('hidden');jQuery('#metakeyinput, #metakeyselect').filter(':visible').trigger('focus');">
 <span id="enternew"><?php _e( 'Enter new' ); ?></span>
-<span id="cancelnew" class="hidden"><?php _e( 'Cancel' ); ?></span></a>
+<span id="cancelnew" class="hidden"><?php _e( 'Cancel' ); ?></span></button>
 <?php } else { ?>
 <input type="text" id="metakeyinput" name="metakeyinput" value="" />
 <?php } ?>
 </td>
-<td><textarea id="metavalue" name="metavalue" rows="2" cols="25"></textarea></td>
+<td><textarea id="metavalue" name="metavalue" rows="2" cols="25"></textarea>
+	<?php wp_nonce_field( 'add-meta', '_ajax_nonce-add-meta', false ); ?>
+</td>
 </tr>
-
-<tr><td colspan="2">
-<div class="submit">
+</tbody>
+</table>
+<div class="submit add-custom-field">
 	<?php
 	submit_button(
 		__( 'Add Custom Field' ),
@@ -779,12 +778,7 @@ function meta_form( $post = null ) {
 	);
 	?>
 </div>
-	<?php wp_nonce_field( 'add-meta', '_ajax_nonce-add-meta', false ); ?>
-</td></tr>
-</tbody>
-</table>
 	<?php
-
 }
 
 /**