Get WordPress

Make WordPress Core

Changeset 44896

Timestamp:
03/14/2019 05:38:36 PM (5 years ago)
Author:
afercia
Message:

Accessibility: Improve the placeholder "prompt" text in the post title and Quick Draft widget.

Old browsers didn't support the HTML placeholder attribute. For a number of years, <label> elements have been used in a few places in WordPress to emulate placeholders. It's time to improve semantics and interaction, use real placeholders when possible, and clean up some JavaScript.

  • Quick Draft widget: it now uses visible <label> elements and a real placeholder attribute
  • removes the related JavaScript
  • Post title:
    • keeps the "prompt" label for backwards compatibility
    • improves the JavaScript to make the "prompt" label stay visible on focus and disappear when typing, like real placeholder do
  • changes the post "prompt" text from "Enter title here" to "Add title" for consistency with the Block Editor
  • cleans-up some CSS

Props Cheffheid, afercia.
Fixes #42390.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/admin/post.js

    r43577 r44896  
    10411041
    10421042    /**
    1043      * Adds screen reader text to the title prompt when needed.
     1043     * Adds screen reader text to the title label when needed.
     1044     *
     1045     * Use the 'screen-reader-text' class to emulate a placeholder attribute
     1046     * and hide the label when entering a value.
    10441047     *
    10451048     * @param {string} id Optional. HTML ID to add the screen reader helper text to.
    … …  
    10491052     * @returns void
    10501053     */
    1051     window.wptitlehint = function(id) {
     1054    window.wptitlehint = function() {
    10521055        id = id || 'title';
    10531056
    1054         var title = $('#' + id), titleprompt = $('#' + id + '-prompt-text');
    1055 
    1056         if ( '' === title.val() )
    1057             titleprompt.removeClass('screen-reader-text');
    1058 
    1059         titleprompt.click(function(){
    1060             $(this).addClass('screen-reader-text');
    1061             title.focus();
    1062         });
    1063 
    1064         title.blur(function(){
    1065             if ( '' === this.value )
    1066                 titleprompt.removeClass('screen-reader-text');
    1067         }).focus(function(){
    1068             titleprompt.addClass('screen-reader-text');
    1069         }).keydown(function(e){
    1070             titleprompt.addClass('screen-reader-text');
    1071             $(this).unbind(e);
    1072         });
     1057        var title = $( '#' + id ), titleprompt = $( '#' + id + '-prompt-text' );
     1058
     1059        if ( '' === title.val() ) {
     1060            titleprompt.removeClass( 'screen-reader-text' );
     1061        }
     1062
     1063        title.on( 'input', function() {
     1064            if ( '' === this.value ) {
     1065                titleprompt.removeClass( 'screen-reader-text' );
     1066                return;
     1067            }
     1068
     1069            titleprompt.addClass( 'screen-reader-text' );
     1070        } );
    10731071    };
    10741072

  • trunk/src/js/_enqueues/wp/dashboard.js

    r43577 r44896  
    173173        // Change the QuickPost action to the publish value.
    174174        $('#publish').click( function() { act.val( 'post-quickpress-publish' ); } );
    175 
    176         /**
    177          * Adds accessibility context to inputs.
    178          *
    179          * Use the 'screen-reader-text' class to hide the label when entering a value.
    180          * Apply it when the input is not empty or the input has focus.
    181          *
    182          * @returns {void}
    183          */
    184         $('#title, #tags-input, #content').each( function() {
    185             var input = $(this), prompt = $('#' + this.id + '-prompt-text');
    186 
    187             if ( '' === this.value ) {
    188                 prompt.removeClass('screen-reader-text');
    189             }
    190 
    191             prompt.click( function() {
    192                 $(this).addClass('screen-reader-text');
    193                 input.focus();
    194             });
    195 
    196             input.blur( function() {
    197                 if ( '' === this.value ) {
    198                     prompt.removeClass('screen-reader-text');
    199                 }
    200             });
    201 
    202             input.focus( function() {
    203                 prompt.addClass('screen-reader-text');
    204             });
    205         });
    206175
    207176        $('#quick-press').on( 'click focusin', function() {

  • trunk/src/wp-admin/css/dashboard.css

    r44791 r44896  
    600600}
    601601
    602 #dashboard_quick_press .drafts,
    603 #dashboard_quick_press .easy-blogging {
     602#dashboard_quick_press .drafts {
    604603    padding: 10px 0 0;
    605604}
    … …  
    607606/* Dashboard Quick Draft - Form styling */
    608607
    609 input#save-post {
    610     float: left;
    611 }
    612 
    613 form.initial-form.quickpress-open label.prompt {
    614     font-style: normal;
    615 }
    616 
    617 form.initial-form.quickpress-open input#title {
    618     height: auto;
     608#dashboard_quick_press label {
     609    display: inline-block;
     610    margin-bottom: 4px;
    619611}
    620612
    … …  
    625617}
    626618
    627 #dashboard_quick_press textarea {
    628     resize: vertical;
    629 }
    630 
    631619#dashboard-widgets .postbox form .submit {
    632620    margin: -39px 0;
    … …  
    638626}
    639627
    640 #title-wrap #title-prompt-text,
    641 .textarea-wrap #content-prompt-text {
    642     color: #72777c;
    643 }
    644 
    645 #title-wrap #title-prompt-text {
    646     font-size: 1.1em;
    647     padding: 7px 8px;
    648 }
    649 
    650 .input-text-wrap,
    651 .textarea-wrap {
    652     position: relative;
    653 }
    654 
    655 .input-text-wrap .prompt,
    656 .textarea-wrap .prompt {
    657     position: absolute;
    658 }
    659 
    660 .textarea-wrap #content-prompt-text {
    661     font-size: 1.1em;
    662     padding: 7px 8px;
    663 }
    664 
    665 .textarea-wrap textarea#content {
    666     margin: 0 0 8px;
    667     padding: 6px 7px;
    668 }
    669 
    670628#quick-press textarea#content {
    671629    min-height: 90px;
    672630    max-height: 1300px;
     631
     632
    673633    resize: none;
    674634}
    … …  
    1001961}
    1002962
    1003 /* QuickDraft */
    1004 
    1005 #title-wrap label,
    1006 #description-wrap label {
    1007     cursor: text;
    1008 }
    1009 
    1010 #title-wrap #title {
    1011     padding: 2px 6px;
    1012     font-size: 1.3em;
    1013     outline: none;
    1014 }
    1015 
    1016 #title-wrap #title-prompt-text {
    1017     font-size: 1.1em;
    1018     padding: 5px 8px;
    1019 }
    1020 
    1021963/* Feeds */
    1022964.rss-widget ul {

  • trunk/src/wp-admin/edit-form-advanced.php

    r44214 r44896  
    478478     * @since 3.1.0
    479479     *
    480      * @param string  $text Placeholder text. Default 'Enter title here'.
     480     * @param string  $text Placeholder text. Default 'e'.
    481481     * @param WP_Post $post Post object.
    482482     */
    483     $title_placeholder = apply_filters( 'enter_title_here', __( 'Enter title here' ), $post );
     483    $title_placeholder = apply_filters( 'enter_title_here', __( 'e' ), $post );
    484484    ?>
    485485    <label class="screen-reader-text" id="title-prompt-text" for="title"><?php echo $title_placeholder; ?></label>

  • trunk/src/wp-admin/includes/dashboard.php

    r44814 r44896  
    520520
    521521        <div class="input-text-wrap" id="title-wrap">
    522             <label class="screen-reader-text prompt" for="title" id="title-prompt-text">
    523 
     522            <label for="title">
    524523                <?php
    525524                /** This filter is documented in wp-admin/edit-form-advanced.php */
    … …  
    531530
    532531        <div class="textarea-wrap" id="description-wrap">
    533             <label class="screen-reader-text prompt" for="content" id="content-prompt-text"><?php _e( 'What&#8217;s on your mind?' ); ?></label>
    534             <textarea name="content" id="content" class="mceEditor" rows="3" cols="15" autocomplete="off"></textarea>
     532            <label ' ); ?></label>
     533            <textarea name="content" id="content" class="mceEditor" rows="3" cols="15" autocomplete="off"></textarea>
    535534        </div>
    536535
Note: See TracChangeset for help on using the changeset viewer.