Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update form inputs focus to comply with WCAG 2.1 #1312

Merged
merged 6 commits into from May 8, 2019

Conversation

@hannalaakso
Copy link
Member

commented May 1, 2019

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

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

@nickcolley nickcolley marked this pull request as ready for review May 1, 2019

@hannalaakso 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 hannalaakso added this to Needs review in Design System Sprint Board via automation May 1, 2019

@hannalaakso hannalaakso moved this from Needs review to In progress in Design System Sprint Board May 1, 2019

@hannalaakso hannalaakso self-assigned this May 1, 2019

@hannalaakso hannalaakso force-pushed the update-form-inputs branch from a02bbef to 70a9014 May 2, 2019

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

@hannalaakso 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 hannalaakso moved this from In progress to Needs review in Design System Sprint Board May 2, 2019

@hannalaakso hannalaakso force-pushed the update-form-inputs branch from 70a9014 to 4ace88d May 2, 2019

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

@36degrees
Copy link
Contributor

left a comment

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


&: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

This comment has been minimized.

Copy link
@36degrees

36degrees May 3, 2019

Contributor

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.

This comment has been minimized.

Copy link
@dashouse

dashouse May 3, 2019

Contributor

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

focus-override

This comment has been minimized.

Copy link
@hannalaakso

hannalaakso May 3, 2019

Author Member

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

nameinput

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

}
}

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

This comment has been minimized.

Copy link
@36degrees

36degrees May 3, 2019

Contributor

Great catch, and excellent comments 👏

border: $govuk-border-width-form-element-error solid $govuk-error-colour;

&:focus {
border-color: $govuk-input-border-colour;

This comment has been minimized.

Copy link
@36degrees

36degrees May 3, 2019

Contributor

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:

govuk-frontend-review-pr-1312 herokuapp com_components_file-upload_with-error-message_preview (3)

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:

Screenshot_2019-05-03 GOV UK Frontend(1)

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.

govuk-frontend-review-pr-1312 herokuapp com_components_file-upload_with-error-message_preview (4)

This comment has been minimized.

Copy link
@hannalaakso

hannalaakso May 3, 2019

Author Member

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.

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

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

This comment has been minimized.

Copy link
@36degrees

36degrees May 3, 2019

Contributor

Can we think of a more descriptive name for this?

This comment has been minimized.

Copy link
@hannalaakso

hannalaakso May 3, 2019

Author Member

Updated!

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

@nickcolley
Copy link
Contributor

left a comment

Looks good once it has a CHANGELOG entry

@hannalaakso hannalaakso force-pushed the update-form-inputs branch from b4db471 to 76663f7 May 8, 2019

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

hannalaakso added 5 commits Apr 30, 2019
Update input focus style to comply with WCAG 2.1
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
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
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 file upload focus style to comply with WCAG 2.1
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 file upload focus in FF
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
Copy link
Contributor

left a comment

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

@hannalaakso hannalaakso force-pushed the update-form-inputs branch from 76663f7 to 89efcd9 May 8, 2019

@hannalaakso hannalaakso merged commit d119f9b into v3 May 8, 2019

Design System Sprint Board automation moved this from Needs review to Done May 8, 2019

@hannalaakso hannalaakso deleted the update-form-inputs branch May 8, 2019

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

@36degrees 36degrees referenced this pull request May 13, 2019
5 of 10 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.