From e90ee825ca91fdc51f970ac773d460d098c0b498 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Fri, 23 Mar 2018 15:10:14 +0000 Subject: [PATCH 1/3] Remove unused media query style --- .../govuk_publishing_components/components/_input.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_input.scss b/app/assets/stylesheets/govuk_publishing_components/components/_input.scss index 0f92262552..2be254cf24 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_input.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_input.scss @@ -25,12 +25,6 @@ input[type=text].gem-c-input { } // 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; } From 16b6a4a0a798487146b346e708ece857bf3bfe46 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Fri, 23 Mar 2018 15:43:54 +0000 Subject: [PATCH 2/3] Style input errors correctly * Show hint in red (before the hint styles were too specific and it showed in grey) * Show a red border (the border on the [input] class was too specific and was overriding the error class when applied) --- CHANGELOG.md | 1 + .../components/_input.scss | 21 +++++++------------ .../components/_label.scss | 7 +++++++ .../components/_input.html.erb | 2 +- 4 files changed, 16 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ba429eea5..8260dce743 100644 --- 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 index 2be254cf24..4e291522d6 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_input.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_input.scss @@ -22,20 +22,13 @@ input[type=text].gem-c-input { // Disable inner shadow and remove rounded corners appearance: none; -} -// scss-lint:enable QualifyingElement - -.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; -} + &.gem-c-input:focus { + outline: $gem-focus-width solid $gem-focus-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 index 7caefa51e4..a4dd822703 100644 --- 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 index 8a9d12aac8..61ef6f8f38 100644 --- 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, } %> From a413bc669f68810ccacdd2851fb8c59a1e520672 Mon Sep 17 00:00:00 2001 From: Paul Hayes Date: Mon, 26 Mar 2018 10:27:56 +0100 Subject: [PATCH 3/3] Clarify why hints are not inside labels --- .../components/docs/input.yml | 2 ++ .../components/docs/label.yml | 12 ++++++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/views/govuk_publishing_components/components/docs/input.yml b/app/views/govuk_publishing_components/components/docs/input.yml index 4224d61849..34ed6e7c6f 100644 --- 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 index ccc393ab7c..04919c10a9 100644 --- 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: