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 .easy-blogging {
+#dashboard_quick_press .drafts {
 	padding: 10px 0 0;
 }
 
 /* Dashboard Quick Draft - Form styling */
 
-input#save-post {
-	float: right;
-}
-
-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: 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 .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;