From 45faac902d9a1b7f0f306ab35369879f39be1a49 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Thu, 14 Mar 2019 17:38:36 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@44896 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/_enqueues/admin/post.js      | 34 +++++++-------
 src/js/_enqueues/wp/dashboard.js    | 31 -------------
 src/wp-admin/css/dashboard.css      | 70 +++--------------------------
 src/wp-admin/edit-form-advanced.php |  4 +-
 src/wp-admin/includes/dashboard.php |  7 ++-
 5 files changed, 27 insertions(+), 119 deletions(-)

diff --git a/src/js/_enqueues/admin/post.js b/src/js/_enqueues/admin/post.js
index 534915dadd..3168fec886 100644
--- a/src/js/_enqueues/admin/post.js
+++ b/src/js/_enqueues/admin/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() )
-			titleprompt.removeClass('screen-reader-text');
+		if ( '' === title.val() ) {
+			titleprompt.removeClass( 'screen-reader-text' );
+		}
 
-		titleprompt.click(function(){
-			$(this).addClass('screen-reader-text');
-			title.focus();
-		});
+		title.on( 'input', function() {
+			if ( '' === this.value ) {
+				titleprompt.removeClass( 'screen-reader-text' );
+				return;
+			}
 
-		title.blur(function(){
-			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);
-		});
+			titleprompt.addClass( 'screen-reader-text' );
+		} );
 	};
 
 	wptitlehint();
diff --git a/src/js/_enqueues/wp/dashboard.js b/src/js/_enqueues/wp/dashboard.js
index 67118fe97e..aa9f9218fb 100644
--- a/src/js/_enqueues/wp/dashboard.js
+++ b/src/js/_enqueues/wp/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';
 		});
diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index 90aa5b691c..dc8104827e 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -599,23 +599,15 @@ body #dashboard-widgets .postbox form .submit {
 	margin: 12px;
 }
 
-#dashboard_quick_press .drafts,
-#dashboard_quick_press .easy-blogging {
+#dashboard_quick_press .drafts {
 	padding: 10px 0 0;
 }
 
 /* Dashboard Quick Draft - Form styling */
 
-input#save-post {
-	float: left;
-}
-
-form.initial-form.quickpress-open label.prompt {
-	font-style: normal;
-}
-
-form.initial-form.quickpress-open input#title {
-	height: auto;
+#dashboard_quick_press label {
+	display: inline-block;
+	margin-bottom: 4px;
 }
 
 #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;
diff --git a/src/wp-admin/edit-form-advanced.php b/src/wp-admin/edit-form-advanced.php
index 7411f6d5d2..e754a758f4 100644
--- a/src/wp-admin/edit-form-advanced.php
+++ b/src/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" />
diff --git a/src/wp-admin/includes/dashboard.php b/src/wp-admin/includes/dashboard.php
index cf13fcfc24..63ee7d667b 100644
--- a/src/wp-admin/includes/dashboard.php
+++ b/src/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>
-			<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>
 
 		<p class="submit">