Update focus styles to meet WCAG 2.1 level AA non-text contrast requirements #360
Conversation
|
Labelled this as a breaking change as I think the styling could catch people out who are importing this directly from npm |
NickColley
changed the title
| @@ -2,6 +2,30 @@ | |||
|
|
|||
| ## [Unreleased] | |||
|
|
|||
| ## Breaking changes | |||
There was a problem hiding this comment.
I'll use this as the basis for discussion with Mark when we put together the final release notes.
| .autocomplete__input--default{ | ||
| padding: 4px; | ||
| .autocomplete__input--default { | ||
| padding: 5px; |
There was a problem hiding this comment.
Should the autocomplete have a height: 40px to match our text inputs? At the minute it's 39px which is frustratingly close.
There was a problem hiding this comment.
I've tried not to change that since this component relies on layering of inputs (placeholder, typeahead hint) and overlays for some features and it felt risky to change, so wanted to do a simple update and maybe do something better if we decide to do the stuff Dave was proposing in the other PR.
There was a problem hiding this comment.
This pull request isn't meant to be making the component 'proper GOV.UK Frontend' so would be nice to get this in and improve it later in the way Dave has suggested, will see what Ollie thinks 😬
CHANGELOG.md
Outdated
|
|
||
| #### If you have custom additional CSS | ||
|
|
||
| You should check that your custom CSS does not remove the improvements to the focus state, if you do need to change the appearence keep in mind the WCAG 2.1 level AA requirements. |
There was a problem hiding this comment.
| You should check that your custom CSS does not remove the improvements to the focus state, if you do need to change the appearence keep in mind the WCAG 2.1 level AA requirements. | |
| You should check that your custom CSS does not remove the improvements to the focus state, if you do need to change the appearance keep in mind the WCAG 2.1 level AA requirements. |
NickColley
force-pushed
the
update-focus-styles
branch
from
0d59301
to
c18c169
Compare
This matches the guidance on focus styles in the GOV.UK Design System. Makes the component's focus styles contrast without relying on colour alone which means the new non-text contrast guideline in WCAG 2.1 level AA https://design-system.service.gov.uk/get-started/focus-states/
NickColley
force-pushed
the
update-focus-styles
branch
from
34176f5
to
6b47908
Compare
This is a modest attempt at updating the autocomplete to address the WCAG 2.1 non-text related issues around the current focus by making it align with GOV.UK Frontend version 3.0.0.
Makes the component's focus styles contrast without relying on colour alone which means the new non-text contrast guideline in WCAG 2.1 level AA.
Also updates other colours from the GOV.UK palette to the new colours.
Screenshots
There are some more interesting ideas about the future of theming for this component here: #329 but this aims to be a small change so we can release it soon.
Fixes #359