sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.


git-svn-id: https://develop.svn.wordpress.org/trunk@43125 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Ian Dunn 2018-05-02 21:59:59 +00:00
parent 71e8d4ac2b
commit a1e5ac685f
17 changed files with 91 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/wp-content/themes/twentyeleven/rtl.css
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 {

3
src/wp-content/themes/twentyeleven/style.css
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;
}

3
src/wp-content/themes/twentyfifteen/rtl.css
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

17
src/wp-content/themes/twentyfifteen/style.css
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,

3
src/wp-content/themes/twentyfourteen/rtl.css
View File

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

7
src/wp-content/themes/twentyfourteen/style.css
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

4
src/wp-content/themes/twentyseventeen/rtl.css
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 {

8
src/wp-content/themes/twentyseventeen/style.css
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
--------------------------------------------------------------*/

7
src/wp-content/themes/twentysixteen/rtl.css
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

10
src/wp-content/themes/twentysixteen/style.css
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

3
src/wp-content/themes/twentyten/rtl.css
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
-------------------------------------------------------------- */

4
src/wp-content/themes/twentyten/style.css
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

4
src/wp-content/themes/twentythirteen/rtl.css
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;

4
src/wp-content/themes/twentythirteen/style.css
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;

3
src/wp-content/themes/twentytwelve/rtl.css
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

6
src/wp-content/themes/twentytwelve/style.css
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;
}

5
src/wp-includes/comment-template.php
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>' );