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.
Built from https://develop.svn.wordpress.org/trunk@56018


git-svn-id: http://core.svn.wordpress.org/trunk@55530 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2023-06-24 14:32:20 +00:00
parent 9a33056097
commit b3eb7b301c
8 changed files with 27 additions and 23 deletions

View File

@ -1069,6 +1069,10 @@ form#tags-filter {
padding: 0 8px 8px; padding: 0 8px 8px;
} }
#postcustom #postcustomstuff .add-custom-field {
padding: 12px 8px 8px;
}
#side-sortables #postcustom #postcustomstuff .submit { #side-sortables #postcustom #postcustomstuff .submit {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -1119,7 +1123,8 @@ form#tags-filter {
width: auto; width: auto;
} }
#postcustomstuff #newmetaleft a { #postcustomstuff #newmetaleft a,
#postcustomstuff #newmeta-button {
display: inline-block; display: inline-block;
margin: 0 8px 8px; margin: 0 8px 8px;
text-decoration: none; text-decoration: none;

File diff suppressed because one or more lines are too long

View File

@ -1068,6 +1068,10 @@ form#tags-filter {
padding: 0 8px 8px; padding: 0 8px 8px;
} }
#postcustom #postcustomstuff .add-custom-field {
padding: 12px 8px 8px;
}
#side-sortables #postcustom #postcustomstuff .submit { #side-sortables #postcustom #postcustomstuff .submit {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -1118,7 +1122,8 @@ form#tags-filter {
width: auto; width: auto;
} }
#postcustomstuff #newmetaleft a { #postcustomstuff #newmetaleft a,
#postcustomstuff #newmeta-button {
display: inline-block; display: inline-block;
margin: 0 8px 8px; margin: 0 8px 8px;
text-decoration: none; text-decoration: none;

File diff suppressed because one or more lines are too long

View File

@ -724,16 +724,13 @@ function meta_form( $post = null ) {
if ( $keys ) { if ( $keys ) {
natcasesort( $keys ); natcasesort( $keys );
$meta_key_input_id = 'metakeyselect';
} else {
$meta_key_input_id = 'metakeyinput';
} }
?> ?>
<p><strong><?php _e( 'Add New Custom Field:' ); ?></strong></p> <p><strong><?php _e( 'Add New Custom Field:' ); ?></strong></p>
<table id="newmeta"> <table id="newmeta">
<thead> <thead>
<tr> <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> <th><label for="metavalue"><?php _e( 'Value' ); ?></label></th>
</tr> </tr>
</thead> </thead>
@ -753,19 +750,21 @@ function meta_form( $post = null ) {
} }
?> ?>
</select> </select>
<input class="hide-if-js" type="text" id="metakeyinput" name="metakeyinput" value="" /> <input class="hidden" type="text" id="metakeyinput" name="metakeyinput" value="" aria-label="<?php _e( 'New custom field name' ); ?>" />
<a href="#postcustomstuff" class="hide-if-no-js" onclick="jQuery('#metakeyinput, #metakeyselect, #enternew, #cancelnew').toggle();return false;"> <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="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 { ?> <?php } else { ?>
<input type="text" id="metakeyinput" name="metakeyinput" value="" /> <input type="text" id="metakeyinput" name="metakeyinput" value="" />
<?php } ?> <?php } ?>
</td> </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>
</tbody>
<tr><td colspan="2"> </table>
<div class="submit"> <div class="submit add-custom-field">
<?php <?php
submit_button( submit_button(
__( 'Add Custom Field' ), __( 'Add Custom Field' ),
@ -779,12 +778,7 @@ function meta_form( $post = null ) {
); );
?> ?>
</div> </div>
<?php wp_nonce_field( 'add-meta', '_ajax_nonce-add-meta', false ); ?>
</td></tr>
</tbody>
</table>
<?php <?php
} }
/** /**

View File

@ -747,7 +747,7 @@ wpList = {
return list.wpList.add( this ); 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 ); return list.wpList.add( this );
} ); } );

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.3-alpha-56017'; $wp_version = '6.3-alpha-56018';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.