Make WordPress Core

Changeset 56018


Ignore:
Timestamp:
06/24/2023 02:30:31 PM (12 months ago)
Author:
joedolson
Message:

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.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/lib/lists.js

    r52332 r56018  
    748748        } );
    749749
    750         $element.on( 'click', 'a[data-wp-lists^="add:' + list.id + ':"], input[data-wp-lists^="add:' + list.id + ':"]', function() {
     750        $element.on( 'click', '[data-wp-lists^="add:' + list.id + ':"], input[data-wp-lists^="add:' + list.id + ':"]', function() {
    751751            return list.wpList.add( this );
    752752        } );
  • trunk/src/wp-admin/css/edit.css

    r54220 r56018  
    10691069}
    10701070
     1071#postcustom #postcustomstuff .add-custom-field {
     1072    padding: 12px 8px 8px;
     1073}
     1074
    10711075#side-sortables #postcustom #postcustomstuff .submit {
    10721076    margin: 0;
     
    11191123}
    11201124
    1121 #postcustomstuff #newmetaleft a {
     1125#postcustomstuff #newmetaleft a,
     1126#postcustomstuff #newmeta-button {
    11221127    display: inline-block;
    11231128    margin: 0 8px 8px;
  • trunk/src/wp-admin/includes/template.php

    r55988 r56018  
    725725    if ( $keys ) {
    726726        natcasesort( $keys );
    727         $meta_key_input_id = 'metakeyselect';
    728     } else {
    729         $meta_key_input_id = 'metakeyinput';
    730727    }
    731728    ?>
     
    734731<thead>
    735732<tr>
    736 <th class="left"><label for="<?php echo $meta_key_input_id; ?>"><?php _ex( 'Name', 'meta name' ); ?></label></th>
     733<th class="left"><label for="metakeyselect"><?php _ex( 'Name', 'meta name' ); ?></label></th>
    737734<th><label for="metavalue"><?php _e( 'Value' ); ?></label></th>
    738735</tr>
     
    754751        ?>
    755752</select>
    756 <input class="hide-if-js" type="text" id="metakeyinput" name="metakeyinput" value="" />
    757 <a href="#postcustomstuff" class="hide-if-no-js" onclick="jQuery('#metakeyinput, #metakeyselect, #enternew, #cancelnew').toggle();return false;">
     753<input class="hidden" type="text" id="metakeyinput" name="metakeyinput" value="" aria-label="<?php _e( 'New custom field name' ); ?>" />
     754<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');">
    758755<span id="enternew"><?php _e( 'Enter new' ); ?></span>
    759 <span id="cancelnew" class="hidden"><?php _e( 'Cancel' ); ?></span></a>
     756<span id="cancelnew" class="hidden"><?php _e( 'Cancel' ); ?></span></button>
    760757<?php } else { ?>
    761758<input type="text" id="metakeyinput" name="metakeyinput" value="" />
    762759<?php } ?>
    763760</td>
    764 <td><textarea id="metavalue" name="metavalue" rows="2" cols="25"></textarea></td>
     761<td><textarea id="metavalue" name="metavalue" rows="2" cols="25"></textarea>
     762    <?php wp_nonce_field( 'add-meta', '_ajax_nonce-add-meta', false ); ?>
     763</td>
    765764</tr>
    766 
    767 <tr><td colspan="2">
    768 <div class="submit">
     765</tbody>
     766</table>
     767<div class="submit add-custom-field">
    769768    <?php
    770769    submit_button(
     
    780779    ?>
    781780</div>
    782     <?php wp_nonce_field( 'add-meta', '_ajax_nonce-add-meta', false ); ?>
    783 </td></tr>
    784 </tbody>
    785 </table>
    786781    <?php
    787 
    788782}
    789783
Note: See TracChangeset for help on using the changeset viewer.