Comments: Move comment consent input outside the label for a11y.

Non-wrapping `label`s are more widely supported by assitive technologies. The CSS changes account for the element re-ordering, and tweak the formatting for improved readability.

Props afercia, xkon, laurelfulford, azaozz.
Fixes #43436.

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


git-svn-id: http://core.svn.wordpress.org/trunk@42954 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
iandunn 2018-05-02 22:00:49 +00:00
parent 753d4f10cd
commit aa01cbe691
18 changed files with 92 additions and 4 deletions

View File

@ -103,6 +103,9 @@ input#s {
background-position: 97% 6px;
padding: 4px 28px 4px 10px;
}
#respond #wp-comment-cookies-consent {
margin: 0 0 0 10px;
}
/* Assistive text */
#access a.assistive-text:focus {

View File

@ -2298,6 +2298,9 @@ a.comment-reply-link > span {
#respond p {
font-size: 12px;
}
#respond #wp-comment-cookies-consent {
margin: 0 10px 0 0;
}
p.comment-form-comment {
margin: 0;
}

View File

@ -400,6 +400,9 @@ img.alignleft {
float: left;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 0 0 10px;
}
/**
* 11.0 Media Queries

View File

@ -2406,6 +2406,18 @@ a.post-thumbnail:focus {
top: -3px;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 10px 0 0;
}
.comment-form .comment-form-cookies-consent label {
display: inline;
font-size: 12px;
font-size: 1.2rem;
font-weight: normal;
letter-spacing: 0;
text-transform: none;
}
/**
* 13.0 Footer
@ -3040,6 +3052,7 @@ p > video {
.comment-awaiting-moderation,
.logged-in-as,
.comment-form label,
.comment-form .comment-form-cookies-consent label,
.form-allowed-tags,
.site-info,
.wp-caption-text,
@ -3669,6 +3682,7 @@ p > video {
.comment-awaiting-moderation,
.logged-in-as,
.comment-form label,
.comment-form .comment-form-cookies-consent label,
.form-allowed-tags,
.site-info,
.wp-caption-text,
@ -4288,6 +4302,7 @@ p > video {
.comment-awaiting-moderation,
.logged-in-as,
.comment-form label,
.comment-form .comment-form-cookies-consent label,
.form-allowed-tags,
.site-info,
.wp-caption-text,
@ -4945,6 +4960,7 @@ p > video {
.comment-awaiting-moderation,
.logged-in-as,
.comment-form label,
.comment-form .comment-form-cookies-consent label,
.form-allowed-tags,
.site-info,
.wp-caption-text,
@ -5486,6 +5502,7 @@ p > video {
.comment-awaiting-moderation,
.logged-in-as,
.comment-form label,
.comment-form .comment-form-cookies-consent label,
.form-allowed-tags,
.site-info,
.wp-caption-text,

View File

@ -288,6 +288,9 @@ td {
margin-left: 10px;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 0 0 10px;
}
/**
* 7.0 Sidebars

View File

@ -2186,6 +2186,13 @@ a.post-thumbnail:hover {
margin-bottom: 0;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 10px 0 0;
}
.comment-form .comment-form-cookies-consent label {
display: inline;
}
/**
* 7.0 Sidebars

View File

@ -199,6 +199,10 @@ input[type="checkbox"] {
text-align: left;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 0 0 10px;
}
/* Post Formats */
.format-quote blockquote .icon {

View File

@ -2505,6 +2505,14 @@ body:not(.twentyseventeen-front-page) .entry-header {
text-align: right;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 10px 0 0;
}
.comment-form .comment-form-cookies-consent label {
display: inline;
}
/*--------------------------------------------------------------
15.0 Widgets
--------------------------------------------------------------*/

View File

@ -400,6 +400,13 @@ body:not(.search-results) .entry-summary .alignleft {
float: left;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 0 0 10px;
}
.comment-form .comment-form-cookies-consent label {
font-family: Arial, Tahoma, sans-serif;
}
/**
* 9.0 - Multisites

View File

@ -2394,6 +2394,16 @@ body.search-no-results .page-header {
top: -5px;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 10px 0 0;
}
.comment-form .comment-form-cookies-consent label {
display: inline;
font-family: Merriweather, Georgia, serif;
letter-spacing: 0;
text-transform: none;
}
/**
* 11.5 - Sidebar

View File

@ -238,6 +238,9 @@ div.menu li{
.children #respond {
margin: 0 0 0 48px;
}
#respond #wp-comment-cookies-consent {
margin: 0 0 0 10px;
}
/* =Widget Areas
-------------------------------------------------------------- */

View File

@ -1132,6 +1132,10 @@ h3#reply-title {
font-size: 14px;
width: auto;
}
#respond #wp-comment-cookies-consent {
width: auto;
margin: 0 10px 0 0;
}
/* =Widget Areas

View File

@ -495,6 +495,10 @@ div.nav-menu > ul {
float: right;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 0 0 10px;
}
.form-allowed-tags code {
margin-left: auto;
margin-right: 3px;

View File

@ -2391,6 +2391,10 @@ footer.entry-meta {
width: 100%;
}
.comment-form #wp-comment-cookies-consent {
margin: 0 10px 0 0;
}
.form-allowed-tags,
.form-allowed-tags code {
color: #686758;

View File

@ -134,6 +134,9 @@ label ~ span.required {
margin: -18px -16px 0 0;
margin: -1.285714286rem -1.142857143rem 0 0;
}
#respond #wp-comment-cookies-consent {
margin: 0 0 0 10px;
}
/* =Front page template styling

View File

@ -1360,6 +1360,12 @@ a.comment-edit-link:hover {
line-height: 2;
color: #5e5e5e;
}
#respond #wp-comment-cookies-consent {
margin: 0 10px 0 0;
}
#respond .comment-form-cookies-consent label {
display: inline;
}
.required {
color: red;
}

View File

@ -2268,9 +2268,8 @@ function comment_form( $args = array(), $post_id = null ) {
'<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30" maxlength="100" aria-describedby="email-notes"' . $html_req . ' /></p>',
'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label> ' .
'<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" maxlength="200" /></p>',
'cookies' => '<p class="comment-form-cookies-consent"><label for="wp-comment-cookies-consent">' .
'<input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' .
__( 'Save my name, email, and website in this browser for the next time I comment.' ) . '</label></p>',
'cookies' => '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' .
'<label for="wp-comment-cookies-consent">' . __( 'Save my name, email, and website in this browser for the next time I comment.' ) . '</label></p>',
);
$required_text = sprintf( ' ' . __( 'Required fields are marked %s' ), '<span class="required">*</span>' );

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.0-alpha-43123';
$wp_version = '5.0-alpha-43125';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.