Changeset 44896 for trunk/src/wp-admin/includes/dashboard.php

Timestamp:

03/14/2019 05:38:36 PM (6 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.

File:

• trunk/src/wp-admin/includes/dashboard.php (modified) (2 diffs)

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

@@ -520 +520 @@
 
         <div class="input-text-wrap" id="title-wrap">
-            <label class="screen-reader-text prompt" for="title" id="title-prompt-text">
-
+            <label for="title">
                 <?php
                 /** This filter is documented in wp-admin/edit-form-advanced.php */
@@ -531 +530 @@
 
         <div class="textarea-wrap" id="description-wrap">
-            <label class="screen-reader-text prompt" for="content" id="content-prompt-text"><?php _e( 'What&#8217;s on your mind?' ); ?></label>
-            <textarea name="content" id="content" class="mceEditor" rows="3" cols="15" autocomplete="off"></textarea>
+            <label for="content"><?php _e( 'Content' ); ?></label>
+            <textarea name="content" id="content" placeholder="<?php esc_attr_e( 'What&#8217;s on your mind?' ); ?>" class="mceEditor" rows="3" cols="15" autocomplete="off"></textarea>
         </div>