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
This commit is contained in:
Andrea Fercia
parent
ca53eac85e
commit
72979b167d
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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’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’s on your mind?' ); ?>" class="mceEditor" rows="3" cols="15" autocomplete="off"></textarea>
|
||||
</div>
|
||||
|
||||
<p class="submit">
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue