-
Notifications
You must be signed in to change notification settings - Fork 67
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
Improve contrast of links when focused #272
Conversation
@@ -60,6 +60,11 @@ a:focus { | |||
outline: 3px solid $focus-colour; | |||
} | |||
|
|||
/* Make links slightly darker when focused to improve contrast. */ | |||
a:link:focus { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What should be the colour when the link is visited? If there is nothing overwriting that, visited links will probably still show the lighter blue.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not proposing changing the visited colour when focused. It will stay as purple - which meets our contrast requirements.
I’m happy with the first commit in this PR. The second one seems to be a dupe of #274? This should either be revised to remove the second commit, or the other PR closed (and the suggestions in it applied here). |
b1db73d
to
73cf50c
Compare
@robinwhittleton @edwardhorsford I've amended this PR, so it now only makes the one change - to make link text slightly darker when focused. |
I've updated the text of the PR to reduce the scope of what it covers. |
- Fix EJS template (PR #270) - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278) - Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281) - Improve contrast of links when focused (PR #272) - Make header text colour black when focused (PR #274)
- Fix EJS template (PR #270) - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278) - Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281) - Improve contrast of links when focused (PR #272) - Make header text colour black when focused (PR #274)
- Fix EJS template (PR #270) - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header (PR #278) - Add `text-decoration-skip: ink` to all links on GOV.UK (PR #281) - Improve contrast of links when focused (PR #272) - Make header text colour black when focused (PR #274)
# 0.20.0 - Fix EJS template - PR #270 - alphagov/govuk_template#270 - Add `theme-color` support to make the page surround in Chrome’s tab view on Android match the black GOV.UK header - PR #278 - alphagov/govuk_template#278 - Add `text-decoration-skip: ink` to all links on GOV.UK - PR #281 - alphagov/govuk_template#281 - Improve contrast of links when focused - PR #272 - alphagov/govuk_template#272 - Make header text colour black when focused - PR #274 - alphagov/govuk_template#274 # 0.19.2 - Increase skiplink colour contrast - PR #263 - alphagov/govuk_template#263 - Fix Scala compile issues for Play template - PR #261 - alphagov/govuk_template#261 # 0.19.1 - Have focus outline appear outside of element rather than covering it in Safari and Chrome - PR #259 - alphagov/govuk_template#259
Fixes #264
Note - I've not tested this with template itself, but the sass itself seems to work.
Before:
After: