[DO NOT MERGE] Suggested hover style for action link #1726
Closed
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
Adding a potentially global hover style colour for white text on a coloured background (discussion prompt)
chris-gds
added
question
accessibility
andysellick
reviewed
Oct 12, 2020
| @@ -171,10 +171,17 @@ | |||
| color: govuk-colour("white"); | |||
| } | |||
|
|
|||
| &:hover { | |||
| color: #DDDCDB | |||
There was a problem hiding this comment.
Need a ; at the end of this line.
| &:focus, | ||
| &:active { | ||
| text-decoration: none; | ||
| color: govuk-colour("black"); | ||
| &:hover { |
There was a problem hiding this comment.
Nitpick: put an empty newline before this line.
|
PR raised - Draft closed. |
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.
What?
Draft PR - conversation starter:
There was a request from Design to update a missing hover state on the action link on corona virus landing page.
Ticket: https://trello.com/c/mBN0xr04
Why?
Updating the corona virus landing page action link with a unique hover style in complete isolation is not ideal.
Users will have have a mix of hover styles even within the same page. For example, this also impacts Bread Crumbs which is also on this page.
This prompted a wider discussion, white text (while on a coloured background) + hover styles do not exists within the Component Guide and there is already an issue raised about ensuring consistent hover styles across gov.uk
As a result Design actioned a wider exploration piece to discover a colour that met AA standards and was a perceivable change within multiple contexts. The result was the solution
#DDDCDBDraft PR to prompt Frontend discussion for new hex (or possible variation of existing hex) to be absorbed into
govuk-frontendor the Design SystemVisual Changes
Anything Else?
There's a couple possible implementation approaches
publishing_componentsadd a new colour var togov-frontend$govuk-link-hover-white-text-colour: #DDDCDB