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.

Sign up for GitHub

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

Jump to bottom

Update focus styles to meet WCAG 2.1 level AA non-text contrast requirements #360

Merged
merged 3 commits into from Sep 19, 2019
Merged

Update focus styles to meet WCAG 2.1 level AA non-text contrast requirements #360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
22d10cf
Update focus styles to match GOV.UK Frontend v3.0.0
NickColley Sep 11, 2019
ead4ef5
Update dist build
NickColley Sep 11, 2019
6b47908
Add CHANGELOG entry
NickColley Sep 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 24 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Expand Up @@ -2,6 +2,30 @@

## [Unreleased]

## Breaking changes
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll use this as the basis for discussion with Mark when we put together the final release notes.

You must make the following changes when you migrate to this release, or your service may break.

### Update your focus styles

We have updated the focus style of this component to meet the new WCAG 2.1 guidelines around non-text contrast.

You can read about this [focus style strategy in the GOV.UK Design System](https://design-system.service.gov.uk/get-started/focus-states/).

#### If you have copied CSS from this repository

You can [copy the CSS from the dist folder](https://github.com/alphagov/accessible-autocomplete/blob/master/dist/accessible-autocomplete.min.css).

#### If you're using Sass imports

This will be updated automatically

#### 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 appearance keep in mind the WCAG 2.1 level AA requirements.


- [Pull request #360: Update focus styles to meet WCAG 2.1 level AA non-text contrast requirements](https://github.com/alphagov/accessible-autocomplete/pull/360).

## 1.6.2 - 2018-11-13

- Update all packages and add `@babel/preset-env` for browser polyfills. Updates Preact and avoids React 16 `onFocusOut` warnings - thanks [@colinrotherham](https://github.com/colinrotherham)
Expand Down
2 changes: 1 addition & 1 deletion dist/accessible-autocomplete.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 11 additions & 11 deletions src/autocomplete.css
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@
.autocomplete__hint,
.autocomplete__input {
-webkit-appearance: none;
border: 2px solid;
border: 2px solid #0b0c0c;
border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
box-sizing: border-box;
-moz-box-sizing: border-box;
Expand All @@ -20,17 +20,17 @@
}

.autocomplete__hint {
color: #BFC1C3;
color: #b1b4b6;
position: absolute;
}

.autocomplete__input--default{
padding: 4px;
.autocomplete__input--default {
padding: 5px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the autocomplete have a height: 40px to match our text inputs? At the minute it's 39px which is frustratingly close.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd do it :shipit:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 😬

}

.autocomplete__input--focused {
outline: 3px solid #fd0;
outline-offset: 0;
outline: 3px solid #ffbf47;
box-shadow: inset 0 0 0 2px;
}

.autocomplete__input--show-all-values {
Expand All @@ -52,7 +52,7 @@
background-color: #fff;
border: 2px solid #0B0C0C;
border-top: 0;
color: #34384B;
color: #0B0C0C;
margin: 0;
max-height: 342px;
overflow-x: hidden;
Expand Down Expand Up @@ -82,7 +82,7 @@
}

.autocomplete__option {
border-bottom: solid #BFC1C3;
border-bottom: solid #b1b4b6;
border-width: 1px 0;
cursor: pointer;
display: block;
Expand All @@ -107,8 +107,8 @@

.autocomplete__option--focused,
.autocomplete__option:hover {
background-color: #005EA5;
border-color: #005EA5;
background-color: #1d70b8;
border-color: #1d70b8;
color: white;
outline: none;
}
Expand All @@ -128,7 +128,7 @@

.autocomplete__hint,
.autocomplete__option {
padding: 4px;
padding: 5px;
}

@media (min-width: 641px) {
Expand Down