Skiplink colour contrast #263
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
So this is a problem for all links when focused. This seems like it could be fixed globally? |
|
@NickColley for the skiplink, the text is already on a black background, so having it be black works well. I don't know if the same solution would work for the other cases. |
|
|
||
| /* Default link colour doesn't have enough contrast against $focus-colour */ | ||
| &:focus, &:visited { | ||
| color: $black; |
There was a problem hiding this comment.
This should probably be $text-colour (even though it maps to the same hex colour).
|
@NickColley @edwardhorsford: Just had a chat with @accessiblewebuk - he says for ordinary links, he wouldn't fail them for colour contrast if the contrast is only low on focus states, but it's true that the focus states don't have high enough contrast. Would that be more sensible to add this to a:focus rather than just the skiplink? So the links would be $text-colour when focused. |
| @@ -65,6 +65,11 @@ a:focus { | |||
| .skiplink { | |||
| position: absolute; | |||
| left: -9999em; | |||
|
|
|||
| /* Default link colour doesn't have enough contrast against $focus-colour */ | |||
| &:focus, &:visited { | |||
There was a problem hiding this comment.
Can you split the selectors onto separate lines to match our linting rules?
cfq
force-pushed
the
skiplink-contrast
branch
from
97d9683 to
39cc8fb
Compare
Skiplink has the default link colour, which kept failing against $focus-colour background. Making the link colour $black for :focus and :visited states.
cfq
force-pushed
the
skiplink-contrast
branch
from
39cc8fb to
b41a3c7
Compare
Merged
Guntrisoft
added a commit
to guidance-guarantee-programme/pension_guidance
that referenced
this pull request
Dec 9, 2016
Fixes the following: - Increase skiplink colour contrast alphagov/govuk_template#263 - Fix Scala compile issues for Play template alphagov/govuk_template#261
gemmaleigh
added a commit
to alphagov/govuk_elements
that referenced
this pull request
Dec 9, 2016
# 0.19.2 - Increase skiplink colour contrast ([PR #263](alphagov/govuk_template#263))
gemmaleigh
added a commit
to alphagov/govuk-prototype-kit
that referenced
this pull request
Dec 9, 2016
# 0.19.2 - Increase skiplink colour contrast ([PR #263](alphagov/govuk_template#263)) # 0.19.1 - Have focus outline appear outside of element rather than covering it in Safari and Chrome ([PR #259](alphagov/govuk_template#259))
This was referenced Dec 9, 2016
quis
added a commit
to alphagov/notifications-admin
that referenced
this pull request
Apr 10, 2017
We should make sure that the parts of the UI that we inherit from these
packages are kept up to date.
This commit:
- updates each dependency to the latest version
- makes patch (bug fixing) version bumps automatic because
- it makes less work for us
- we don’t get so far behind
- we should be able to trust dependencies that are coming from other
teams in this building
Full changes that this brings in:
GOV.UK Template
---
- Increase skiplink colour contrast ([GOV.UK Template PR #263](alphagov/govuk_template#263))
GOV.UK Elements
---
- Too many to show – see
alphagov/govuk_elements@v1.1.1...v3.0.2#diff-4ac32a78649ca5bdd8e0ba38b7006a1e
GOV.UK Frontend Toolkit
---
- Too many to show – see
alphagov/govuk_frontend_toolkit@v4.6.0...v5.2.0#diff-4ac32a78649ca5bdd8e0ba38b7006a1e
paulmsmith
pushed a commit
to dwp/pyca-prototype
that referenced
this pull request
May 2, 2017
* adds addtional step for users to run npm install post updating via git * Replace encrypted GitHub token This updates the environment variable in the config to enable deployment via Travis CI. * change node version from 4 to 6 * Setting up a very simple test suite to check the server and build tasks run across nodejs 4, 5 & 6 * make mocha exit properly * As npm test runs gulp test, remove this from travis.yml * Simplify the sanity test check App doesn't need to listen in the test script as supertest accepts the app variable and handles the listening and un-listening itself. This also removes the needs for the after block to stop the server. * moved devdependencies to fix heroku * Update govuk-elements-sass to 2.2.0 This release includes the custom radio button and checkbox styles. https://github.com/alphagov/govuk_elements/blob/master/CHANGELOG.md#220 * Update readme to point to docs app * Remove console log for the file path This can be seen when viewing the docs app locally. * v5.0.0 * Update govuk_frontend_toolkit to 5.0.1 https://raw.githubusercontent.com/alphagov/govuk_frontend_toolkit/master /CHANGELOG.md # 5.0.1 - Fix role="button" click shim ([PR #347](alphagov/govuk_frontend_toolkit#347)) - Make font variables lowercase ([PR #348](alphagov/govuk_frontend_toolkit#348)) - Update selection button documentation ([PR #350](alphagov/govuk_frontend_toolkit#350)) * Use new font stack reference for unbranded templates govuk_frontend_toolkit v5.0.1 lowercases the font stack names. * google analytics * only add google analytics in promomode * Move analytics to separate include and use env variable * Update ‘Back’ link URL * Bump govuk-elements-sass to 2.2.1 This makes the phase tag in the phase banner $govuk-blue. As the phase banner is now the same for both alpha and beta banners, change the phase banner includes to use the recommended class .phase-banner. * Set travis to update the latest release branch after deployment It looks like Travis is deploying the latest-release branch to Heroku. Let’s move the script that checks for a version tag to after_deploy, in the hope that it won’t affect the deployment of master to Heroku on a successful build. * Fix the "back" link to tutorials and examples * Bump govuk template to 0.19.2 # 0.19.2 - Increase skiplink colour contrast ([PR #263](alphagov/govuk_template#263)) # 0.19.1 - Have focus outline appear outside of element rather than covering it in Safari and Chrome ([PR #259](alphagov/govuk_template#259)) * Bump standard to current version And fix reported issues: just spacing. * Bump toolkit and nunjucks to latest versions * Remove some unused packages - consolidate was added to help replace mu2 for mustache rendering - hogan.js was also in there for mustache rendering * v5.0.1 - #330 Update GOV.UK toolkit and StandardJS to latest - #328 Update GOV.UK template to latest - #324 Fix the example question page’s back link * use app.locals instead of app.use * add git step to heroku guide * Remove full stops from headings * fix css sourcemaps * Remove the title attribute To match the change made to GOV.UK elements: alphagov/govuk_elements#389 * removing links to route.js and update path and file names in branching.html * Prevent asking users to authenticate twice This solves the problem with prototypes asking for username/password twice. The problem is caused by the ordering in the middleware. When a user types in the URL for a prototype like http://govuk-tagging.herokuapp.com they're asked for a username/password first (via `utils.basicAuth`). After filling that in they'll be able to "proceed" to the next step, which redirects them to the `https://` version (via `utils.forceHttps`). Because the auth isn't shared between `http` and `https` version, they are not authenticated anymore and have to enter their username/password again. Validated with https://test-prevent-double-auth.herokuapp.com/ * add override service name example * add comment * fix docs page * bump gulp-sass to increase node-sass dependency to enable it to work with node 6 on linux * add test for docs page * allow search indexing in promo mode * v5.1.0 * fix download link * fix docs links * Updating gulp-sass to 3.1.0 This is the latest version of gulp-sass. https://www.npmjs.com/package/gulp-sass * Bump govuk_frontend_toolkit to 5.1.1 # 5.1.1 - Update the alpha, beta and discovery colours to $govuk-blue to match the updated phase banner ([PR #370](alphagov/govuk_frontend_toolkit#370)) - Fix radio button show/hide behaviour when used outside a form ([PR #375](alphagov/govuk_frontend_toolkit#375)) - Fix a "Stick at top when scrolling" component bug related to scroll anchoring in Chrome 56+ ([PR #376](alphagov/govuk_frontend_toolkit#376)) - Minor travis fixes ([PR #373](alphagov/govuk_frontend_toolkit#373)) # 5.1.0 - Allow custom options when tracking events ([PR #365](alphagov/govuk_frontend_toolkit#365)) # 5.0.3 - Change HMRC and DEFRA text colours for improved contrast ([PR #368](alphagov/govuk_frontend_toolkit#368)) * formatting, clarify use of terminal, fix numbering * Update govuk-elements-sass to 3.0.1 Changelog for GOV.UK elements: https://github.com/alphagov/govuk_elements/blob/master/CHANGELOG.md Changelog for the GOV.UK frontend toolkit: https://github.com/alphagov/govuk_frontend_toolkit/blob/master/CHANGELOG .md * Remove DEPRECATED selection-buttons.js This is no longer required with the radios and checkboxes released in govuk-elements-sass v3.0.0. * Update the radio buttons and checkboxes example page To use the new markup released in GOV.UK elements 3.0.0. * Replace .block-label with .multiple-choice Update examples of radio buttons and checkboxes. Replace ‘.block-label` with `.multiple-choice` as the block-label class no longer exists. * Add a .form-section wrapper to examples Increase the spacing between the radio button and checkbox examples. * Mention requirement for show-hide-content.js * Fix radios and checkbox example page This had nested form elements, which was a mistake. Removing these. * Add an example of the task list pattern Add an example of the task list pattern to the docs. Link to it from the tutorials and examples page. * Replace em values with gutter variables Use variables from the govuk_frontend_toolkit’s _measurements.scss file. Also add a new variable for the spacing to the left of the task list. * Use the phase tag mixin for the completed status * Make the "completed" status uppercase * Rename the task-list to "task-list-page" * Added config to turn off browser sync * Add SSH Key for Travis * Combine scripts and move to a deploy provider This works in the same way as govuk_elements. Create a new file - create-release.sh, combining - create release tag and update release branch, these are deleted. * Add missing EOF * To maintain consistency, in this commit I have: - assigned config.useBrowserSync to a variable - ran the toLowerCase method on the variable - change the if statement to reflect the new variable * add auto data store * add clear data link to docs app * only run autodata once, include JS in docs * use 'data' hash in locals * use new multiple-choice css, use hyphens in names * store GET data * seperate guidance and example pages, added h1s * refactor checked function * use list for vehicle features * fix return to examples link * refactored docs * set cookie name and timeout, use crypto * de-duplicate forceHttps * Add template pages for content and questions * Add new template pages to examples index * v6.0.0 * attempted fix for radio auto stores * attempted fix for radio auto stores
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
gemmaleigh
pushed a commit
to alphagov/govuk_elements
that referenced
this pull request
Jun 8, 2017
- Increase skiplink colour contrast PR #263 - alphagov/govuk_template#263 - Fix Scala compile issues for Play template PR #261 - alphagov/govuk_template#261
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Skiplink has the default link colour, which kept failing against $focus-colour
background. Making the link colour $black for :focus and :visited states.