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
This commit is contained in:
Joe Dolson
2023-06-24 14:30:31 +00:00
parent ffc386bfbd
commit d932659aba
3 changed files with 17 additions and 18 deletions
+10 -16
View File
@@ -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
}
/**