From a1e5ac685f755e104a8796c6d2be21f2b88feb0e Mon Sep 17 00:00:00 2001 From: Ian Dunn Date: Wed, 2 May 2018 21:59:59 +0000 Subject: [PATCH] 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 | 3 +++ src/wp-content/themes/twentyeleven/style.css | 3 +++ src/wp-content/themes/twentyfifteen/rtl.css | 3 +++ src/wp-content/themes/twentyfifteen/style.css | 17 +++++++++++++++++ src/wp-content/themes/twentyfourteen/rtl.css | 3 +++ src/wp-content/themes/twentyfourteen/style.css | 7 +++++++ src/wp-content/themes/twentyseventeen/rtl.css | 4 ++++ src/wp-content/themes/twentyseventeen/style.css | 8 ++++++++ src/wp-content/themes/twentysixteen/rtl.css | 7 +++++++ src/wp-content/themes/twentysixteen/style.css | 10 ++++++++++ src/wp-content/themes/twentyten/rtl.css | 3 +++ src/wp-content/themes/twentyten/style.css | 4 ++++ src/wp-content/themes/twentythirteen/rtl.css | 4 ++++ src/wp-content/themes/twentythirteen/style.css | 4 ++++ src/wp-content/themes/twentytwelve/rtl.css | 3 +++ src/wp-content/themes/twentytwelve/style.css | 6 ++++++ src/wp-includes/comment-template.php | 5 ++--- 17 files changed, 91 insertions(+), 3 deletions(-) diff --git a/src/wp-content/themes/twentyeleven/rtl.css b/src/wp-content/themes/twentyeleven/rtl.css index 3927e7f60c..7aac910533 100644 --- a/src/wp-content/themes/twentyeleven/rtl.css +++ b/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 { diff --git a/src/wp-content/themes/twentyeleven/style.css b/src/wp-content/themes/twentyeleven/style.css index 194f6b0db5..bc80156a44 100644 --- a/src/wp-content/themes/twentyeleven/style.css +++ b/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; } diff --git a/src/wp-content/themes/twentyfifteen/rtl.css b/src/wp-content/themes/twentyfifteen/rtl.css index 3c1079d06a..4a7397f854 100644 --- a/src/wp-content/themes/twentyfifteen/rtl.css +++ b/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 diff --git a/src/wp-content/themes/twentyfifteen/style.css b/src/wp-content/themes/twentyfifteen/style.css index 70b65265a0..da1aaaa07a 100644 --- a/src/wp-content/themes/twentyfifteen/style.css +++ b/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, diff --git a/src/wp-content/themes/twentyfourteen/rtl.css b/src/wp-content/themes/twentyfourteen/rtl.css index d765ee425f..58d9757915 100644 --- a/src/wp-content/themes/twentyfourteen/rtl.css +++ b/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 diff --git a/src/wp-content/themes/twentyfourteen/style.css b/src/wp-content/themes/twentyfourteen/style.css index 800cf1ec64..2b0f8577e9 100644 --- a/src/wp-content/themes/twentyfourteen/style.css +++ b/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 diff --git a/src/wp-content/themes/twentyseventeen/rtl.css b/src/wp-content/themes/twentyseventeen/rtl.css index ff5c00c950..1c5e4c7adf 100644 --- a/src/wp-content/themes/twentyseventeen/rtl.css +++ b/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 { diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css index fc9c306b3f..042f92c367 100644 --- a/src/wp-content/themes/twentyseventeen/style.css +++ b/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 --------------------------------------------------------------*/ diff --git a/src/wp-content/themes/twentysixteen/rtl.css b/src/wp-content/themes/twentysixteen/rtl.css index 8e91190da9..48ece280ae 100644 --- a/src/wp-content/themes/twentysixteen/rtl.css +++ b/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 diff --git a/src/wp-content/themes/twentysixteen/style.css b/src/wp-content/themes/twentysixteen/style.css index 0b615fd947..3178a11df4 100644 --- a/src/wp-content/themes/twentysixteen/style.css +++ b/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 diff --git a/src/wp-content/themes/twentyten/rtl.css b/src/wp-content/themes/twentyten/rtl.css index c458a544e4..f74839921a 100644 --- a/src/wp-content/themes/twentyten/rtl.css +++ b/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 -------------------------------------------------------------- */ diff --git a/src/wp-content/themes/twentyten/style.css b/src/wp-content/themes/twentyten/style.css index 01654382f4..764eb5a45d 100644 --- a/src/wp-content/themes/twentyten/style.css +++ b/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 diff --git a/src/wp-content/themes/twentythirteen/rtl.css b/src/wp-content/themes/twentythirteen/rtl.css index 1cafc3d27d..b815ea9533 100644 --- a/src/wp-content/themes/twentythirteen/rtl.css +++ b/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; diff --git a/src/wp-content/themes/twentythirteen/style.css b/src/wp-content/themes/twentythirteen/style.css index 135a7090d2..9015da6406 100644 --- a/src/wp-content/themes/twentythirteen/style.css +++ b/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; diff --git a/src/wp-content/themes/twentytwelve/rtl.css b/src/wp-content/themes/twentytwelve/rtl.css index 45740f2d59..e43fca3baf 100644 --- a/src/wp-content/themes/twentytwelve/rtl.css +++ b/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 diff --git a/src/wp-content/themes/twentytwelve/style.css b/src/wp-content/themes/twentytwelve/style.css index 6f12539997..0c0141da42 100644 --- a/src/wp-content/themes/twentytwelve/style.css +++ b/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; } diff --git a/src/wp-includes/comment-template.php b/src/wp-includes/comment-template.php index ca016b5c68..5c3f0b7844 100644 --- a/src/wp-includes/comment-template.php +++ b/src/wp-includes/comment-template.php @@ -2268,9 +2268,8 @@ function comment_form( $args = array(), $post_id = null ) { '

', 'url' => '

' . '

', - 'cookies' => '

', + 'cookies' => '

' . + '

', ); $required_text = sprintf( ' ' . __( 'Required fields are marked %s' ), '*' );