Merge pull request #241 from alphagov/input-error-fix

Fix error styles on input component
alphagov · Mar 26, 2018 · c461e47 · c461e47
2 parents cd471d0 + a413bc6
commit c461e47
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Unreleased
 
 * Fix visited link colour on focus for white feedback links (PR #239)
+* Fix input error colour
 
 # 5.7.0
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_input.scss b/app/assets/stylesheets/govuk_publishing_components/components/_input.scss
@@ -22,26 +22,13 @@ input[type=text].gem-c-input {
 
   // Disable inner shadow and remove rounded corners
   appearance: none;
-}
-// scss-lint:enable QualifyingElement
 
-@media (min-width: 40.0625em) {
-  .govuk-c-input {
-    margin-bottom: 30px;
+  &.gem-c-input:focus {
+    outline: $gem-focus-width solid $gem-focus-colour;
   }
-}
-
-.gem-c-input:focus {
-  outline: $gem-focus-width solid $gem-focus-colour;
-}
 
-.gem-c-input--error {
-  border: $gem-border-width-error solid $gem-error-colour;
-}
-
-// Replace this with the error message component.
-.gem-c-input__label-error {
-  font-weight: bold;
-  color: $gem-error-colour;
-  padding-top: 4px;
+  &.gem-c-input--error {
+    border: $gem-border-width-error solid $gem-error-colour;
+  }
 }
+// scss-lint:enable QualifyingElement
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_label.scss b/app/assets/stylesheets/govuk_publishing_components/components/_label.scss
@@ -16,3 +16,10 @@
   color: $gem-secondary-text-colour;
   font-weight: 400;
 }
+
+// TODO: Replace this with the error message component.
+.gem-c-label__error {
+  font-weight: bold;
+  color: $gem-error-colour;
+  padding-top: 4px;
+}
diff --git a/app/views/govuk_publishing_components/components/_input.html.erb b/app/views/govuk_publishing_components/components/_input.html.erb
@@ -12,7 +12,7 @@
   text: label[:text],
   html_for: id,
   hint_text: error_message,
-  hint_text_classes: "gem-c-input__label-error",
+  hint_text_classes: "gem-c-label__error",
   hint_id: hint_id,
   bold: error_message ? true : false,
 } %>

diff --git a/app/views/govuk_publishing_components/components/docs/input.yml b/app/views/govuk_publishing_components/components/docs/input.yml
@@ -13,6 +13,8 @@ accessibility_criteria: |
   * be recognisable as form input elements
   * have correctly associated labels
   * be of the appropriate type for their use, e.g. password inputs should be of type 'password'
+
+  Labels use the [label component](/component-guide/label).
 examples:
   default:
     data:

diff --git a/app/views/govuk_publishing_components/components/docs/label.yml b/app/views/govuk_publishing_components/components/docs/label.yml
@@ -5,9 +5,17 @@ body: |
 
   Forked from the upcoming [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend), when GOV.UK Frontend release we can replace these source files.
 accessibility_criteria: |
-  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
+  All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
+
+  Labels must:
+
   - have visible text
-  - `hint_id` is matched with an `aria-describedby` property on the input your label is associated with.
+
+  Hint text must:
+
+  - be associated with an input. The `hint_id` must match the `aria-describedby` property on the input your label is associated with.
+
+  If hint text is within a label it will be announced in its entirity by screen readers. By putting the hint alongside labels and associating hints with inputs using `aria-describedby`, then screen readers will read the label, describe the type of input (eg radio) and then read additional text. It means users of screen readers can scan and skip options as easy as people making choices with sight. [A discussion of this approach](https://github.com/alphagov/govuk_elements/issues/574).
 examples:
   default:
     data: