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;
}
#postcustom #postcustomstuff .add-custom-field {
padding: 12px 8px 8px;
}
#side-sortables #postcustom #postcustomstuff .submit {
margin: 0;
padding: 0;
@ -1119,7 +1123,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;

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

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
}
/**

View File

@ -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 );
} );

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@
*
* @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.