Seven Style Guide: Checkboxes & Radio Buttons

Hey Aaron, thanks for working on this issue.

I found a few issues while testing your patch:

1. The description is misaligned with the radio button label
2. Checkboxes look a little weird on the installation form:
   
   
3. Radio/checkbox form elements no longer have a focus state

@AaronChristian, Thanks for your contibution for patch, it works well for me i checked it over simplytest.me with Browser compatibility, resizing & responsive.

Thanks again.

Hmm, looking a bit closer I do wonder if the space between checkbox and label is maybe a bit too wide. That horizontal gap is (almost) the same size as the vertical spacing between lines. This just about makes the label and checkbox lose touch with eachother:

The example design from the style guide uses a taller line-height. Looks like that design was implemented to spec but the vertical spacing currently in Seven is less than in that example. I think we need to ensure that the horizontal spacing between label and checkbox is clearly less than the vertical spacing between lines.

Reducing the horizontal margin would be in scope of this issue. For increasing the vertical space there's #2487027: Fix the vertical rhythm.

I totally agree with @yoroy, it'll be easier to relate checkboxes with their own labels if they are closer.

Could someone post a screenshot of how this looks with an error on a field with a checkbox?

See error styling on checkboxes issues:
#2687251-17: Radios / Checkboxes focus styling wrong when marked as having an error
[#222380-66

@AaronChristian, I tested your patch #17 & #18 both over simplytest.me & it works for me, yes in #17 it didn't show error handling styles but it resolves the issue of horizontal spacing of the labels(#14).
For#18 it solves both the issues error handling styles & the horizontal spacing of the labels(#14).
PFA for the results of #17 & #18.

Thanks again..!!

+++ b/core/themes/seven/css/components/form.css
@@ -147,15 +159,117 @@ ul.tips li {
+	content: '';
...
+	background-color: #cdebfe;
+	background-position: left center;
+	background-repeat: no-repeat;
+	background-size: 100%;
...
+	background-image: url(../../../../../core/misc/icons/808080/check.svg);
+	background-position: left center;
+	background-repeat: no-repeat;
+	background-size: 100%;

This patches contains tab characters. Let's use spaces instead.

Replaced tabs from #2856459-18: Seven Style Guide: Checkboxes & Radio Buttons with spaces.

This is the interdiff, so re-RTBC-ing per #19. (I can't actually say anything meaningful about the patch itself...)

diff --git a/core/themes/seven/css/components/form.css b/core/themes/seven/css/components/form.css
index b03fabf..e2e6329 100644
--- a/core/themes/seven/css/components/form.css
+++ b/core/themes/seven/css/components/form.css
@@ -211,12 +211,12 @@ ul.tips li {
 }
 
 .form-checkbox:checked + label:before {
-       content: '';
+  content: '';
   background-image: url(../../../../../core/misc/icons/001826/check.svg);
-       background-color: #cdebfe;
-       background-position: left center;
-       background-repeat: no-repeat;
-       background-size: 100%;
+  background-color: #cdebfe;
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-size: 100%;
   border-color: #5b7d93;
 }
 
@@ -228,10 +228,10 @@ ul.tips li {
 }
 
 .form-checkbox[disabled]:checked + label:before {
-       background-image: url(../../../../../core/misc/icons/808080/check.svg);
-       background-position: left center;
-       background-repeat: no-repeat;
-       background-size: 100%;
+  background-image: url(../../../../../core/misc/icons/808080/check.svg);
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-size: 100%;
 }
 
 /* radios */

Nice to see Seven style guide things happening, thank you everyone who has worked on this so far :)

1. +++ b/core/themes/seven/css/components/form.css
   @@ -49,6 +49,18 @@ fieldset:not(.fieldgroup) > legend {
   +/* checkboxes without a label */
   
   @@ -147,15 +159,117 @@ ul.tips li {
   +/* Checkboxes & Radio buttons */
   ...
   +/* make the trigger area a bit bigger for mobile tap */
   ...
   +/* checked */
   ...
   +/* disabled */
   ...
   +/* radios */
   ...
   +/* disabled */
   

   Minor: Most of these comments are not necessary, and most don't follow our documentation coding standards:

   All documentation and comments should form proper sentences, use proper grammar and punctuation, and generally follow the same style guidelines as Drupal.org content…

   Per https://www.drupal.org/docs/develop/coding-standards/api-documentation-a...

   The "make the trigger area a bit bigger for mobile tap" comment might be useful.

   Instead of a lot of these comments I'd recommend grouping similar selectors together visually per https://www.drupal.org/docs/develop/standards/css/css-formatting-guideli... (Blank lines).

2. +++ b/core/themes/seven/css/components/form.css
   @@ -147,15 +159,117 @@ ul.tips li {
   -  margin-left: 1.5em; /* LTR */
   +  margin-left: 22px; /* LTR */
   ...
   -  margin-right: 1.5em;
   +  margin-right: 22px;
   

   Sorry if I missed this in the comments, but can we keep these as em units?

Changed the patch in #2856459-24: Seven Style Guide: Checkboxes & Radio Buttons according to the guidelines provided in #2856459-26: Seven Style Guide: Checkboxes & Radio Buttons by @Cottser

Just reviewing the part of code I feel eligible to review, AKA code style and PHP. I also looked at whether RTL CSS is taken care of and that seems to be the case, so great :)

1. +++ b/core/misc/icons/001826/check.svg
   @@ -0,0 +1 @@
   +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#001826"><path d="M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z"/></svg>
   \ No newline at end of file
   
   +++ b/core/misc/icons/808080/check.svg
   @@ -0,0 +1 @@
   +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#808080"><path d="M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z"/></svg>
   \ No newline at end of file
   

   Should have newlines at end files :)

2. +++ b/core/themes/seven/css/components/form.css
   @@ -140,13 +155,97 @@ div.description,
   +/* make the trigger area a bit bigger for mobile tap */
   

   Make this a sentence IMHO.

3. +++ b/core/themes/seven/seven.theme
   @@ -186,3 +186,24 @@ function seven_form_node_form_alter(&$form, FormStateInterface $form_state) {
   +/**
   + * The contents of $variable['label'] will be passed to the preprocess
   + * hook of the element's label.
   + */
   +function seven_preprocess_form_element(array &$variables) {
   ...
   +/**
   + * Now we need to merge the array element we created in the previous hook
   + * with the label's attributes.
   + */
   +function seven_preprocess_form_element_label(array &$variables) {
   

   We should have the regular boilerplate text here Implements hook_blabla... and the actual docs should go into the function body.

   Also we don't do "now" and "we" in comments, just "Merge the form element type class from seven_preprocess_form_element() with the label's attributes." or somesuch.

Just spotted this on Slack. For accessibility QA - do the checkbox and radio designs have focus styles?

Update: I've seen this in the latest patch...

+.form-checkbox:focus + .form_checkbox-label:before,
+.form-radio:focus + .form_radio-label:before {
+  border-color: #001826;
+}

This looks like the focus indication might be a failure of WCAG 2.0 SC 1.4.1 Use of Color at level A. Is border colour the only thing that changes?

Comment #5 says the focus style is just a border colour change. Going by the screenshots in #17, focus isn't very easy to spot at all.

For users who rely on focus styles, subtle changes just don't work.

Going by what I've seen, the focus styles:

1. Fail WCAG 2.0 Use of color, level A
2. Technically they pass WCAG 2.0 "Focus Visible", level AA. But a problem with that success criterion is that it doesn't require any level of clarity at all.

There's also a new "Non-text contrast" criterion in WCAG 2.1, which calls for focus states to have a 3:1 colour contrast compared to the non-focused state. WCAG 2.1 has just reached Proposed Recommendation stage, so is stable enough to use now. If we can satisfy this one, all the better.

A shape change is a much clearer focus indicator than a colour-only change. I recommend an offset border or outline around the input, with a colour contrast of 3:1 against the page background. Probably blue.

The error style in comment #19 screenshot also fails WCAG 2.0 Use of color.