vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 14:20:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Improve accessibility of new custom field UI.

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/_enqueues/lib/lists.js
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 );
} );

7
src/wp-admin/css/edit.css
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;

26
src/wp-admin/includes/template.php
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
}
/**