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

Make header text colour black when focused #274

Merged
merged 1 commit into from
Mar 16, 2017

Conversation

edwardhorsford
Copy link
Contributor

@edwardhorsford edwardhorsford commented Jan 30, 2017

The header text has poor contrast when focused as it's white on yellow. This PR changes it to black on yellow to match other anchors on the page.

Also changes to use $text-colour from black, which felt more consistent.

Before:
screen shot 2017-01-30 at 13 04 42
After:
screen shot 2017-01-30 at 13 04 16

@robinwhittleton
Copy link
Contributor

Why are we changing it here and not where it’s originally defined?

@edwardhorsford
Copy link
Contributor Author

@robinwhittleton because it looked like other stuff related to focus was set in the accessibility file, including the existing line that was setting links to black.

At best it looks like we're setting anchors in the header to black twice?

@robinwhittleton
Copy link
Contributor

I’d rather not apply this where you’ve suggested. It should probably be an extra :focus state after the #proposition-name:hover block at

a#proposition-name:hover {
.

This is moved to the header stylesheet, where the proposition name
is being overridden to white.
@gemmaleigh
Copy link
Contributor

gemmaleigh commented Mar 16, 2017

I have made the changes @robinwhittleton suggested and also tested these changes locally.

mar-16-2017 11-43-00

@robinwhittleton robinwhittleton merged commit 530a502 into master Mar 16, 2017
@robinwhittleton robinwhittleton deleted the service-name-contrast branch March 16, 2017 12:15
robinwhittleton pushed a commit that referenced this pull request Mar 16, 2017
- 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)
@robinwhittleton robinwhittleton mentioned this pull request Mar 16, 2017
robinwhittleton pushed a commit that referenced this pull request Mar 29, 2017
- 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)
robinwhittleton pushed a commit that referenced this pull request Mar 29, 2017
- 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)
fofr pushed a commit to alphagov/static that referenced this pull request May 5, 2017
# 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
ushkarev added a commit to ministryofjustice/django-govuk-template that referenced this pull request Aug 17, 2017
ushkarev added a commit to ministryofjustice/django-govuk-template that referenced this pull request Aug 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.

3 participants