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

Fix active state on action link #1749

Merged
merged 2 commits into from
Oct 26, 2020
Merged

Conversation

alex-ju
Copy link
Contributor

@alex-ju alex-ju commented Oct 23, 2020

What

Fix the active state on the action link component by simplifying the styling and rely on default anchor styling for the active state (as we do for any basic links across GOV.UK and within the Design System).

Why

Causes issues when used in the light_text flag.

The component used in the site-wide banner in Safari 14.0:

Screenshot 2020-10-23 at 17 04 21

Thank you @conordelahunty for reporting this!

Visual Changes

Before `:active`After `:active`
Screenshot 2020-10-23 at 17 02 49 Screenshot 2020-10-23 at 17 03 25

Preview link

@bevanloon bevanloon temporarily deployed to govuk-publis-fix-active-tkxbuu October 23, 2020 16:11 Inactive
@bevanloon bevanloon temporarily deployed to govuk-publis-fix-active-tkxbuu October 23, 2020 16:15 Inactive
@alex-ju alex-ju requested review from danacotoran and maxgds October 26, 2020 14:54
Rely on main anchor style for the active state intead of overriding the styles.
@alex-ju alex-ju force-pushed the fix-active-state-on-action-link branch from 696885e to 2738d39 Compare October 26, 2020 15:11
@bevanloon bevanloon temporarily deployed to govuk-publis-fix-active-tkxbuu October 26, 2020 15:11 Inactive
@maxgds
Copy link
Contributor

maxgds commented Oct 26, 2020

Is there any chance this could be a breaking change? If somebody is relying on black and hasn't set anything elsewhere might they wind up with unexpected colours and poor contrast?

@alex-ju
Copy link
Contributor Author

alex-ju commented Oct 26, 2020

Is there any chance this could be a breaking change? If somebody is relying on black and hasn't set anything elsewhere might they wind up with unexpected colours and poor contrast?

Mmm, not really. The light_text option is meant to be used on darker backgrounds (dark blue #0843a1, dark grey #272828, and more recently on black #0b0c0c). In any of these scenarios, we wouldn't rely on the active state to be black #272828 as this would result in low contrast (or no contrast as it happens on the homepage).

If the component is not used with the light_text flag, the link colour for the :active state will remain #0b0c0c

@alex-ju alex-ju merged commit d28fda9 into master Oct 26, 2020
@alex-ju alex-ju deleted the fix-active-state-on-action-link branch October 26, 2020 15:44
@andysellick andysellick mentioned this pull request Oct 26, 2020
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