Update form inputs focus to comply with WCAG 2.1 #1312

hannalaakso · 2019-05-01T15:37:29Z

Iterate on #1245 to update the GOV.UK Frontend form inputs.

Affected components:

Text input
Textarea
Select
File upload

Method:

Double the border width on focus using box-shadow.
Cater for IE8 which doesn't support box-shadow by setting border-width.
The component error style already has a double width border so don’t apply box-shadow on focus there.

Also fix an existing bug where the file upload doesn't receive visible focus in Firefox when tabbed into (standard and inverted colours mode).

Tested on:
✅Chrome 74
✅Firefox 66
✅OS Safari 12.1
✅ Android Samsung Galaxy (Chrome)
❗️iOS XS / 8 (Safari) - all good except file upload doesn't show visible focus. This is already present in the current component. We could dig into it a bit more 🤷‍♀
✅Edge 18
✅Edge 16
✅IE11
❗️ IE 9-10: all good except the file upload component doesn't display the black box-shadow (there's no obvious reason here as the box shadow works for the other components. Suspect it's a native bug we probably shouldn't spent too much time on as the user numbers are very small and the yellow focus outline is still present).
✅IE8

Closes: #1303

36degrees

This is generally looking good, but I think there might be a few minor issues with the file upload component (damnit, Firefox!)

36degrees · 2019-05-03T07:51:29Z

src/components/input/_input.scss

+
+    &:focus {
+      // Double the border by adding its width again. Use `box-shadow` to do
+      // this instead of changing `border-width` (which changes element size) and


I'm not sure this is true (at least not in all browsers) as inputs have a fixed height. I think this is the case for textareas and file uploads though, so we might be doing this for consistency?

(I've had a little play in a codepen to try it out – https://codepen.io/36degrees/pen/QPeYVN)

Either way it's worth bearing in mind that box-shadows aren't rendered in high contrast mode / with overridden colours, so users of those features won't be able to perceive this. I wonder if there are any other ways we might be able to use a thicker border on textareas without an explicit height that we should be trying? @dashouse is this something you spent time looking at? are you able to provide any additional context?

If we keep using box-shadow, I suggest updating this comment as it may be a little misleading.

When I was testing the design branch with overridden colours it changed in a meaningful way as the focus state for this is using a visible outline so the yellow turns to black

Thanks @36degrees I've updated the comment to more accurately explain what's going on.

I think this branch matches the focus state on @dashouse's branch when colours are overridden

So there is a visible change. @36degrees what do you think?

36degrees · 2019-05-03T07:59:02Z

src/components/file-upload/_file-upload.scss

+      }
+    }
+
+    // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196


Great catch, and excellent comments 👏

36degrees · 2019-05-03T08:04:50Z

src/components/file-upload/_file-upload.scss

    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+
+    &:focus {
+      border-color: $govuk-input-border-colour;


I don't think this is working quite as intended in firefox, I suspect because of the :focus-within hack.

In Chrome the file input, in error state, when focused, looks like this:

This is consistent with the other form input types – when in an error state, the red border is replaced with a black border.

But in Firefox, you always end up with a 'triple ring' like this:

You also see the triple border in Chrome if you click on the 'Choose file' button (I assume because the button is focused, so this counts as 'focus within' the input.

Fixed. I'm adding the same resets to :focus-within as to :focus to prevent the error styles from being applied when the focus is within.

36degrees · 2019-05-03T08:07:30Z

src/components/file-upload/_file-upload.scss

@@ -7,13 +7,66 @@
 @import "../label/label";

 @include govuk-exports("govuk/component/file-upload") {
+  $spacing-unit: govuk-spacing(1);


Can we think of a more descriptive name for this?

NickColley

Looks good once it has a CHANGELOG entry

Double the border width on focus using `box-shadow`. Cater for IE8 which doesn't support `box-shadow` by setting `border-width`. The component error style already has a double width border so don’t apply `box-shadow` on focus there.

Double the border width on focus using `box-shadow`. Cater for IE8 which doesn't support `box-shadow` by setting `border-width`. The component error style already has a double width border so don’t apply `box-shadow` on focus there. The new focus styles make heavier use of `box-shadow` than the previous style and the styles visually overlap the component. Add some padding (and negative margin) to align element.

Fix an existing undocumented issue where file upload component doesn't display focus indicator in Firefox (in standard or inverted colours mode). Underlying issue reported here: https://bugzilla.mozilla.org/show_bug.cgi?id=1430196 The focus state can be made to display in FF with `focus-within`. Unfortunately `focus-within` cannot be set together with `:focus` (to reduce duplication) as all versions of IE fail to recognise `focus-within` and don't set any styles from the block if `focus-within` is a selector. It's therefore set separately in the SASS. Also manually emulate styles from `govuk-focusable` for file upload in FF. Alternatively `govuk-focusable` mixin could be made to accept a new `$focusable-within` param that adds the `focus-within` styles. However from API point of view this it might be unclear whether the mixin adds both `focus` and `focus-within` styles if the param is set or just one or the other. Alternatively, a new mixin `govuk-focusable-within` mixin could be created but since `focus-within` has poor browser support (no IE or Edge) it seems preferable not to make it part of public API as someone might mistakenly use it instead of `govuk-focusable`.

aliuk2012

Just need to resolve conflict but apart from that its looks good to go.

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1312 May 1, 2019 15:37 Inactive

NickColley marked this pull request as ready for review May 1, 2019 15:44

hannalaakso changed the title ~~Update form inputs focus to comply with WCAG 2.1~~ WIP: Update form inputs focus to comply with WCAG 2.1 May 1, 2019

hannalaakso self-assigned this May 1, 2019

hannalaakso force-pushed the update-form-inputs branch from a02bbef to 70a9014 Compare May 2, 2019 12:24

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1312 May 2, 2019 12:25 Inactive

hannalaakso changed the title ~~WIP: Update form inputs focus to comply with WCAG 2.1~~ Update form inputs focus to comply with WCAG 2.1 May 2, 2019

hannalaakso force-pushed the update-form-inputs branch from 70a9014 to 4ace88d Compare May 2, 2019 14:45

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1312 May 2, 2019 14:45 Inactive

36degrees reviewed May 3, 2019

View reviewed changes

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1312 May 3, 2019 12:13 Inactive

NickColley approved these changes May 8, 2019

View reviewed changes

hannalaakso force-pushed the update-form-inputs branch from b4db471 to 76663f7 Compare May 8, 2019 13:05

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1312 May 8, 2019 13:05 Inactive

hannalaakso added 5 commits May 8, 2019 14:06

Update input focus style to comply with WCAG 2.1

688ea6f

Double the border width on focus using `box-shadow`. Cater for IE8 which doesn't support `box-shadow` by setting `border-width`. The component error style already has a double width border so don’t apply `box-shadow` on focus there.

Update textarea focus style to comply with WCAG 2.1

bd50494

Double the border width on focus using `box-shadow`. Cater for IE8 which doesn't support `box-shadow` by setting `border-width`. The component error style already has a double width border so don’t apply `box-shadow` on focus there.

Update select focus style to comply with WCAG 2.1

ba17bd6

Double the border width on focus using `box-shadow`. Cater for IE8 which doesn't support `box-shadow` by setting `border-width`. The component error style already has a double width border so don’t apply `box-shadow` on focus there.

aliuk2012 approved these changes May 8, 2019

View reviewed changes

Update changelog

89efcd9

hannalaakso force-pushed the update-form-inputs branch from 76663f7 to 89efcd9 Compare May 8, 2019 13:17

govuk-design-system-ci deployed to govuk-frontend-review-pr-1312 May 8, 2019 13:17 View deployment

hannalaakso merged commit d119f9b into v3 May 8, 2019

hannalaakso deleted the update-form-inputs branch May 8, 2019 13:24

NickColley added this to the v3.0.0 milestone May 8, 2019

36degrees mentioned this pull request May 13, 2019

Update form inputs to use the new focus state #1303

Closed

10 tasks

snyk-bot mentioned this pull request Feb 25, 2020

[Snyk] Upgrade govuk-frontend from 3.0.0 to 3.5.0 ministryofjustice/offender-categorisation#400

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update form inputs focus to comply with WCAG 2.1 #1312

Update form inputs focus to comply with WCAG 2.1 #1312

hannalaakso commented May 1, 2019 •

edited

Loading

36degrees left a comment

36degrees May 3, 2019

dashouse May 3, 2019

hannalaakso May 3, 2019

36degrees May 3, 2019

36degrees May 3, 2019

hannalaakso May 3, 2019

36degrees May 3, 2019

hannalaakso May 3, 2019

NickColley left a comment

aliuk2012 left a comment

Update form inputs focus to comply with WCAG 2.1 #1312

Update form inputs focus to comply with WCAG 2.1 #1312

Conversation

hannalaakso commented May 1, 2019 • edited Loading

36degrees left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickColley left a comment

Choose a reason for hiding this comment

aliuk2012 left a comment

Choose a reason for hiding this comment

hannalaakso commented May 1, 2019 •

edited

Loading