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.

Built from https://develop.svn.wordpress.org/trunk@44896


git-svn-id: http://core.svn.wordpress.org/trunk@44727 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/dashboard-rtl.css

@@ -599,23 +599,15 @@ body #dashboard-widgets .postbox form .submit {
 	margin: 12px;
 }
 
-#dashboard_quick_press .drafts,
+#dashboard_quick_press .drafts {
-#dashboard_quick_press .easy-blogging {
 	padding: 10px 0 0;
 }
 
 /* Dashboard Quick Draft - Form styling */
 
-input#save-post {
+#dashboard_quick_press label {
-	float: right;
+	display: inline-block;
-}
+	margin-bottom: 4px;
-
-form.initial-form.quickpress-open label.prompt {
-	font-style: normal;
-}
-
-form.initial-form.quickpress-open input#title {
-	height: auto;
 }
 
 #dashboard_quick_press input,
@@ -624,10 +616,6 @@ form.initial-form.quickpress-open input#title {
 	margin: 0;
 }
 
-#dashboard_quick_press textarea {
-	resize: vertical;
-}
-
 #dashboard-widgets .postbox form .submit {
 	margin: -39px 0;
 	float: left;
@@ -637,39 +625,11 @@ form.initial-form.quickpress-open input#title {
 	margin-top: 12px;
 }
 
-#title-wrap #title-prompt-text,
-.textarea-wrap #content-prompt-text {
-	color: #72777c;
-}
-
-#title-wrap #title-prompt-text {
-	font-size: 1.1em;
-	padding: 7px 8px;
-}
-
-.input-text-wrap,
-.textarea-wrap {
-	position: relative;
-}
-
-.input-text-wrap .prompt,
-.textarea-wrap .prompt {
-	position: absolute;
-}
-
-.textarea-wrap #content-prompt-text {
-	font-size: 1.1em;
-	padding: 7px 8px;
-}
-
-.textarea-wrap textarea#content {
-	margin: 0 0 8px;
-	padding: 6px 7px;
-}
-
 #quick-press textarea#content {
 	min-height: 90px;
 	max-height: 1300px;
+	margin: 0 0 8px;
+	padding: 6px 7px;
 	resize: none;
 }
 
@@ -1000,24 +960,6 @@ form.initial-form.quickpress-open input#title {
 	font-size: 13px;
 }
 
-/* QuickDraft */
-
-#title-wrap label,
-#description-wrap label {
-	cursor: text;
-}
-
-#title-wrap #title {
-	padding: 2px 6px;
-	font-size: 1.3em;
-	outline: none;
-}
-
-#title-wrap #title-prompt-text {
-	font-size: 1.1em;
-	padding: 5px 8px;
-}
-
 /* Feeds */
 .rss-widget ul {
 	margin: 0;

wp-admin/css/dashboard.css

@@ -599,23 +599,15 @@ body #dashboard-widgets .postbox form .submit {
 	margin: 12px;
 }
 
-#dashboard_quick_press .drafts,
+#dashboard_quick_press .drafts {
-#dashboard_quick_press .easy-blogging {
 	padding: 10px 0 0;
 }
 
 /* Dashboard Quick Draft - Form styling */
 
-input#save-post {
+#dashboard_quick_press label {
-	float: left;
+	display: inline-block;
-}
+	margin-bottom: 4px;
-
-form.initial-form.quickpress-open label.prompt {
-	font-style: normal;
-}
-
-form.initial-form.quickpress-open input#title {
-	height: auto;
 }
 
 #dashboard_quick_press input,
@@ -624,10 +616,6 @@ form.initial-form.quickpress-open input#title {
 	margin: 0;
 }
 
-#dashboard_quick_press textarea {
-	resize: vertical;
-}
-
 #dashboard-widgets .postbox form .submit {
 	margin: -39px 0;
 	float: right;
@@ -637,39 +625,11 @@ form.initial-form.quickpress-open input#title {
 	margin-top: 12px;
 }
 
-#title-wrap #title-prompt-text,
-.textarea-wrap #content-prompt-text {
-	color: #72777c;
-}
-
-#title-wrap #title-prompt-text {
-	font-size: 1.1em;
-	padding: 7px 8px;
-}
-
-.input-text-wrap,
-.textarea-wrap {
-	position: relative;
-}
-
-.input-text-wrap .prompt,
-.textarea-wrap .prompt {
-	position: absolute;
-}
-
-.textarea-wrap #content-prompt-text {
-	font-size: 1.1em;
-	padding: 7px 8px;
-}
-
-.textarea-wrap textarea#content {
-	margin: 0 0 8px;
-	padding: 6px 7px;
-}
-
 #quick-press textarea#content {
 	min-height: 90px;
 	max-height: 1300px;
+	margin: 0 0 8px;
+	padding: 6px 7px;
 	resize: none;
 }
 
@@ -1000,24 +960,6 @@ form.initial-form.quickpress-open input#title {
 	font-size: 13px;
 }
 
-/* QuickDraft */
-
-#title-wrap label,
-#description-wrap label {
-	cursor: text;
-}
-
-#title-wrap #title {
-	padding: 2px 6px;
-	font-size: 1.3em;
-	outline: none;
-}
-
-#title-wrap #title-prompt-text {
-	font-size: 1.1em;
-	padding: 5px 8px;
-}
-
 /* Feeds */
 .rss-widget ul {
 	margin: 0;

wp-admin/edit-form-advanced.php

@@ -477,10 +477,10 @@ do_action( 'edit_form_top', $post );
 	 *
 	 * @since 3.1.0
 	 *
-	 * @param string  $text Placeholder text. Default 'Enter title here'.
+	 * @param string  $text Placeholder text. Default 'Add title'.
 	 * @param WP_Post $post Post object.
 	 */
-	$title_placeholder = apply_filters( 'enter_title_here', __( 'Enter title here' ), $post );
+	$title_placeholder = apply_filters( 'enter_title_here', __( 'Add title' ), $post );
 	?>
 	<label class="screen-reader-text" id="title-prompt-text" for="title"><?php echo $title_placeholder; ?></label>
 	<input type="text" name="post_title" size="30" value="<?php echo esc_attr( $post->post_title ); ?>" id="title" spellcheck="true" autocomplete="off" />

wp-admin/includes/dashboard.php

@@ -519,8 +519,7 @@ function wp_dashboard_quick_press( $error_msg = false ) {
 		<?php endif; ?>
 
 		<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 */
 				echo apply_filters( 'enter_title_here', __( 'Title' ), $post );
@@ -530,8 +529,8 @@ function wp_dashboard_quick_press( $error_msg = false ) {
 		</div>
 
 		<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>
+			<label for="content"><?php _e( 'Content' ); ?></label>
-			<textarea name="content" id="content" class="mceEditor" rows="3" cols="15" autocomplete="off"></textarea>
+			<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>
 
 		<p class="submit">

wp-admin/js/dashboard.js

@@ -173,37 +173,6 @@ jQuery(document).ready( function($) {
 		// Change the QuickPost action to the publish value.
 		$('#publish').click( function() { act.val( 'post-quickpress-publish' ); } );
 
-		/**
-		 * Adds accessibility context to inputs.
-		 *
-		 * Use the 'screen-reader-text' class to hide the label when entering a value.
-		 * Apply it when the input is not empty or the input has focus.
-		 *
-		 * @returns {void}
-		 */
-		$('#title, #tags-input, #content').each( function() {
-			var input = $(this), prompt = $('#' + this.id + '-prompt-text');
-
-			if ( '' === this.value ) {
-				prompt.removeClass('screen-reader-text');
-			}
-
-			prompt.click( function() {
-				$(this).addClass('screen-reader-text');
-				input.focus();
-			});
-
-			input.blur( function() {
-				if ( '' === this.value ) {
-					prompt.removeClass('screen-reader-text');
-				}
-			});
-
-			input.focus( function() {
-				prompt.addClass('screen-reader-text');
-			});
-		});
-
 		$('#quick-press').on( 'click focusin', function() {
 			wpActiveEditor = 'content';
 		});

wp-admin/js/post.js

@@ -1040,7 +1040,10 @@ jQuery(document).ready( function($) {
 	});
 
 	/**
-	 * Adds screen reader text to the title prompt when needed.
+	 * Adds screen reader text to the title label when needed.
+	 *
+	 * Use the 'screen-reader-text' class to emulate a placeholder attribute
+	 * and hide the label when entering a value.
 	 *
 	 * @param {string} id Optional. HTML ID to add the screen reader helper text to.
 	 *
@@ -1048,28 +1051,23 @@ jQuery(document).ready( function($) {
 	 *
 	 * @returns void
 	 */
-	window.wptitlehint = function(id) {
+	window.wptitlehint = function( id ) {
 		id = id || 'title';
 
-		var title = $('#' + id), titleprompt = $('#' + id + '-prompt-text');
+		var title = $( '#' + id ), titleprompt = $( '#' + id + '-prompt-text' );
 
-		if ( '' === title.val() )
+		if ( '' === title.val() ) {
-			titleprompt.removeClass('screen-reader-text');
+			titleprompt.removeClass( 'screen-reader-text' );
+		}
 
-		titleprompt.click(function(){
+		title.on( 'input', function() {
-			$(this).addClass('screen-reader-text');
+			if ( '' === this.value ) {
-			title.focus();
+				titleprompt.removeClass( 'screen-reader-text' );
-		});
+				return;
+			}
 
-		title.blur(function(){
+			titleprompt.addClass( 'screen-reader-text' );
-			if ( '' === this.value )
+		} );
-				titleprompt.removeClass('screen-reader-text');
-		}).focus(function(){
-			titleprompt.addClass('screen-reader-text');
-		}).keydown(function(e){
-			titleprompt.addClass('screen-reader-text');
-			$(this).unbind(e);
-		});
 	};
 
 	wptitlehint();

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.2-alpha-44895';
+$wp_version = '5.2-alpha-44896';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.