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

src/wp-content/themes/twentyeleven/rtl.css

@@ -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 {

src/wp-content/themes/twentyeleven/style.css

@@ -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;
 }

src/wp-content/themes/twentyfifteen/rtl.css

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

src/wp-content/themes/twentyfifteen/style.css

@@ -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,

src/wp-content/themes/twentyfourteen/rtl.css

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

src/wp-content/themes/twentyfourteen/style.css

@@ -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

src/wp-content/themes/twentyseventeen/rtl.css

@@ -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 {

src/wp-content/themes/twentyseventeen/style.css

@@ -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
 --------------------------------------------------------------*/

src/wp-content/themes/twentysixteen/rtl.css

@@ -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

src/wp-content/themes/twentysixteen/style.css

@@ -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

src/wp-content/themes/twentyten/rtl.css

@@ -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
 -------------------------------------------------------------- */

src/wp-content/themes/twentyten/style.css

@@ -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

src/wp-content/themes/twentythirteen/rtl.css

@@ -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;

src/wp-content/themes/twentythirteen/style.css

@@ -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;

src/wp-content/themes/twentytwelve/rtl.css

@@ -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

src/wp-content/themes/twentytwelve/style.css

@@ -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;
 }

src/wp-includes/comment-template.php

@@ -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">' .
+		'cookies' => '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $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>',
-					 __( '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>' );