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

Windows10 select box contrast ratio in IE and Edge #456

Merged
merged 1 commit into from
Apr 28, 2017

Conversation

kr8n3r
Copy link

@kr8n3r kr8n3r commented Apr 27, 2017

What problem does the pull request solve?

Accessibility fix on Windows 10 IE and Edge select box active
Issue : https://trello.com/c/LGKKreic/461-tech-spike-insufficient-colour-contrast-of-select-box-items

How has this been tested?

Tested on IE11 and Edge 15 where the issue existed.
Also tested on latest Chrome. Firefox and Safari to make sure nothing was affected there.

Before:

before

After:

after

What type of change is it?

  • Bug fix (non-breaking change which fixes an issue)

@gemmaleigh gemmaleigh temporarily deployed to govuk-elements-review-pr-456 April 27, 2017 09:21 Inactive
@gemmaleigh gemmaleigh temporarily deployed to govuk-elements-review-pr-456 April 27, 2017 09:23 Inactive
@kr8n3r kr8n3r requested a review from selfthinker April 27, 2017 09:25
@gemmaleigh gemmaleigh temporarily deployed to govuk-elements-review-pr-456 April 27, 2017 10:19 Inactive
Copy link
Contributor

@tvararu tvararu left a comment

Choose a reason for hiding this comment

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

Looks fine to me, I haven't tested as the screenshots look conclusive.

Only nit I have, if you can interactive rebase the commits into one with a short title and a descriptive body about this fix. Our git styleguide can provide examples. (or look at some of the other commits)

// 7. Browser accessibility fixes
// ==========================================================================

option:active,
Copy link
Contributor

Choose a reason for hiding this comment

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

Are you sure :active is needed? My gut feeling said :checked is weird but from testing all 3 of them just now, it seems like :checked is needed for the activate state when the select box is open and :focus::-ms-value is needed for the active state when the select box is closed (but still focussed). Do you know for what case :active is needed?

Copy link
Author

@kr8n3r kr8n3r Apr 27, 2017

Choose a reason for hiding this comment

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

to retain the correct background colour as you press down with a mouse
see http://codepen.io/igloo/pen/EmNdmp

@selfthinker
Copy link
Contributor

I also just tested if the adding the colours does anything when changing colours via browser or system settings. (We found earlier that that can sometimes be challenging.) But that all looks good.

I also just noticed that the colour combination of white and our govuk-blue fails WCAG AAA (both variations of foreground and background). But I assume that must be a known issue and that we intentionally didn't fix it (for our links). (I think I vaguely remember something about it being difficult to find a blue that is not too dark so that it's difficult to distinguish from normal text around it.)

@edwardhorsford
Copy link
Contributor

govuk_blue is not intended to meet WCAG AAA, so I think it's fine. Still - it's frustratingly close to being compliant...

@kr8n3r kr8n3r force-pushed the windows10-select-box-contrast-ratio branch from edd918f to d997796 Compare April 27, 2017 16:11
@gemmaleigh gemmaleigh temporarily deployed to govuk-elements-review-pr-456 April 27, 2017 16:11 Inactive
@kr8n3r kr8n3r force-pushed the windows10-select-box-contrast-ratio branch from d997796 to 04a77ca Compare April 27, 2017 16:35
@gemmaleigh gemmaleigh temporarily deployed to govuk-elements-review-pr-456 April 27, 2017 16:35 Inactive
@kr8n3r kr8n3r force-pushed the windows10-select-box-contrast-ratio branch from 04a77ca to a6934f5 Compare April 28, 2017 08:14
@gemmaleigh gemmaleigh temporarily deployed to govuk-elements-review-pr-456 April 28, 2017 08:14 Inactive
@kr8n3r kr8n3r force-pushed the windows10-select-box-contrast-ratio branch from a6934f5 to e2714f3 Compare April 28, 2017 10:24
@gemmaleigh gemmaleigh temporarily deployed to govuk-elements-review-pr-456 April 28, 2017 10:24 Inactive
@kr8n3r kr8n3r force-pushed the windows10-select-box-contrast-ratio branch from e2714f3 to 5233dff Compare April 28, 2017 12:29
@gemmaleigh gemmaleigh temporarily deployed to govuk-elements-review-pr-456 April 28, 2017 12:29 Inactive
@kr8n3r kr8n3r force-pushed the windows10-select-box-contrast-ratio branch from 5233dff to acf59c7 Compare April 28, 2017 12:33
@gemmaleigh gemmaleigh temporarily deployed to govuk-elements-review-pr-456 April 28, 2017 12:34 Inactive
In Windows 10 on Internet Explorer and Edge selected and active
options in select boxes have a light blue visual treatment.
That differes from other browser vendors' implementation and it
it has a contrast ration 2.9:1 which is not accesible.
By applying microsoft only CSS values  using the GOV.UK
blue this has now been fixed.
Copy link
Contributor

@selfthinker selfthinker left a comment

Choose a reason for hiding this comment

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

The commit history is much better now. Thanks @igloosi. Feel free to fix typos in the commit message or not.

@selfthinker selfthinker merged commit 4ed9363 into master Apr 28, 2017
@kr8n3r kr8n3r deleted the windows10-select-box-contrast-ratio branch April 28, 2017 13:27
@gemmaleigh gemmaleigh mentioned this pull request May 18, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants