Skip to content

Remove :hover:visited styles and decrease base link specificity (Fix #1071) #1077

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.

Sign up for GitHub

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

Merged
stephaniehobson merged 6 commits into from
Aug 11, 2025
Merged

Remove :hover:visited styles and decrease base link specificity (Fix #1071) #1077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9e81e70
Remove :hover:visited styles (Fix #1071)
stephaniehobson Jul 23, 2025
18b2d3d
Solve no-duplicate-selectors warning
stephaniehobson Jul 25, 2025
0a6ffe5
Furthur reduce specificity on :visited
stephaniehobson Jul 28, 2025
43d5886
remove text colour change on :focus from dark links
stephaniehobson Jul 28, 2025
1ac1544
Update CHANGELOG.md
stephaniehobson Aug 11, 2025
78d8b51
review fixes
stephaniehobson Aug 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,20 @@

## Migration Tips

* Breadcrumb updates do not require any changes, however if you have local customizations double check them.

* Icons used internally with Protocol components have been updated but any icons used in consumer projects will have to consider the following:

* New and updated icons have intrinsic width of 16x16 instead of 24x24. If you were relying on SVG width and height attributes for sizing, you may need to update by CSS sizing.

* Updated icons are still square but do not have padding around the icon. This is particularly noticeable with menu and arrows. If you were relying on the icon for spacing, you may need to update to re-add that spacing through CSS.

* Icons formerly known as "arrow" are now known as "caret" and there are new icon designs for "arrow" name. You will need to update naming to keep the "caret" design.

* Find and replace `$url-image-arrow-down-` with `$url-image-caret-down-`
* Breadcrumb updates do not require any changes unless you have local customizations.

* Icon updates
* Icons used internally with Protocol components have been updated but any icons used in consumer projects will have to consider the following:
* New and updated icons have intrinsic width of 16x16 instead of 24x24. If you were relying on SVG width and height attributes for sizing, you may need to update by CSS sizing.
* Updated icons are still square but do not have padding around the icon. This is particularly noticeable with menu and arrows. If you were relying on the icon for spacing, you may need to update to re-add that spacing through CSS.
* Icons formerly known as "arrow" are now known as "caret" and there are new icon designs for "arrow" name. You will need to update naming to keep the "caret" design.
* Find and replace `$url-image-arrow-down-` with `$url-image-caret-down-`

* Remove `:hover:visited` styles & decrease base link specificity (#1071)
* This will decrease the specificity of Protocol's link and button components, hopefully making local overrides easier, no need to change anything you already have in place.
* Removal of `:link` pseudo classes in some places will mean that `<a>` elements which do not have a `href` value could now have link styles when previously they would not have. But, like, maybe don't do that?
* Removed `:visited` styles for `.mzp-c-button` they should match unvisited styles, if you have `:visited` styles defined check they are still legible without the expected inherited styles.
* Removed the text colour change from `:focus` styles. Rely on the focus ring for a focus indicator instead.

# 21.1.0

Expand Down
37 changes: 15 additions & 22 deletions assets/sass/protocol/base/elements/_links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,22 @@

@use '../../includes/lib' as *;

:link {
// Rely on source order for the stateful style overrides
// 1. Visited
// 2. Hover
// 3. Active
// 4. Focus

a {
color: $link-color;
text-decoration: underline;

// where is used to decrease specificity to avoid conflicts with button styles
&:where(:visited) {
Copy link
Contributor Author

@stephaniehobson stephaniehobson Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't decrease the specificity enough for :visited with re-arranging things alone.

I think using :where only on the visited links is good progressive enhancement. Older browsers will still be able to see and interact with links without any problem. Newer browsers get the visual indication of visited as well.

Maybe this is the best of both worlds from @maureenlholland's #1054

Copy link
Collaborator

@maureenlholland maureenlholland Aug 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (non-blocking) Might be worth putting the comment in code so it's clear why :where is only used in this case

color: $link-color-visited;
}

&:hover,
&:focus,
Copy link
Contributor Author

@stephaniehobson stephaniehobson Jul 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Declaring the colour change on focus was the root problem in #842

Copy link
Contributor Author

@stephaniehobson stephaniehobson Jul 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could split the definition and keep the text-decoration styles for focus if we wanted but we also have the focus ring to indicate state.

&:active {
color: $link-color-hover;
text-decoration: none;
Expand All @@ -22,30 +32,13 @@
@supports (--css: variables) {
color: var(--link-color);

&:hover,
&:focus,
&:active {
color: var(--link-color-hover);
&:where(:visited) {
color: var(--link-color-visited);
}
}
}

:visited {
color: $link-color-visited;

&:hover,
&:focus,
&:active {
color: $link-color-visited-hover;
}

@supports (--css: variables) {
color: var(--link-color-visited);

&:hover,
&:focus,
&:active {
color: var(--link-color-visited-hover);
color: var(--link-color-hover);
}
}
}
Expand Down
5 changes: 1 addition & 4 deletions assets/sass/protocol/components/_breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,7 @@
}

a {
&:link,
&:visited {
text-decoration: underline;
}
text-decoration: underline;

&:hover,
&:active,
Expand Down
145 changes: 69 additions & 76 deletions assets/sass/protocol/components/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,7 @@
// * -------------------------------------------------------------------------- */
// Button shape and size

.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
a.mzp-c-button {
.mzp-c-button {
@include border-box;
@include font-size(16px);
@include transition(background-color 100ms, box-shadow 100ms, color 100ms);
Expand Down Expand Up @@ -132,11 +131,11 @@ a.mzp-c-button {
}

// * -------------------------------------------------------------------------- */
// Primary
// Button colors

.mzp-c-button,
a.mzp-c-button:link,
a.mzp-c-button:visited {
.mzp-c-button { /* stylelint-disable-line no-duplicate-selectors */
// * ---------------------------------------------------------------------- */
// Primary
background-color: $color-black;
border: 2px solid $color-black;
color: $color-white;
Expand All @@ -151,13 +150,12 @@ a.mzp-c-button:visited {

@include default-states-dark;
}
}

// * -------------------------------------------------------------------------- */
// Secondary

.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
a.mzp-c-button {

// * ---------------------------------------------------------------------- */
// Secondary

&.mzp-t-secondary {
background-color: transparent;
border-color: $color-black;
Expand All @@ -174,88 +172,84 @@ a.mzp-c-button {
@include default-states-dark;
}
}
}

// * -------------------------------------------------------------------------- */
// Product Buttons

.mzp-c-button.mzp-t-product,
a.mzp-c-button.mzp-t-product:link,
a.mzp-c-button.mzp-t-product:visited {
background-color: $color-blue-50;
border-color: transparent;
color: $color-white;

@include product-states;
// * ---------------------------------------------------------------------- */
// Product

// dark is the same as light

// secondary
&.mzp-t-secondary {
background-color: transparent;
border-color: $color-blue-50;
color: $color-blue-50;
&.mzp-t-product {
background-color: $color-blue-50;
border-color: transparent;
color: $color-white;

@include product-states;

// dark
&.mzp-t-dark {
background-color: rgba($color-white, 0.3);
border-color: transparent;
color: $color-white;
// dark is the same as light

@include product-states;
}
}
}
// secondary
&.mzp-t-secondary {
background-color: transparent;
border-color: $color-blue-50;
color: $color-blue-50;

// * -------------------------------------------------------------------------- */
// Neutral Buttons
@include product-states;

.mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
a.mzp-c-button {
&.mzp-t-neutral {
background-color: transparent;
border-color: $color-marketing-gray-30;
color: $color-marketing-gray-70;
// dark
&.mzp-t-dark {
background-color: rgba($color-white, 0.3);
border-color: transparent;
color: $color-white;

&:focus {
border-color: forms.$button-border-color-focus;
@include product-states;
}
}

&:hover {
background-color: $color-marketing-gray-20;
border-color: $color-marketing-gray-40;
color: $color-marketing-gray-70;
}

&:active {
background-color: $color-marketing-gray-20;
border-color: $color-marketing-gray-50;
// * -------------------------------------------------------------------------- */
// Neutral Buttons
&.mzp-t-neutral {
background-color: transparent;
border-color: $color-marketing-gray-30;
color: $color-marketing-gray-70;
}

// dark
&.mzp-t-dark {
background-color: rgba($color-white, 0.1);
border-color: rgba($color-white, 0.6);
color: $color-white;

&:focus {
border-color: forms.$button-border-color-focus;
}

&:hover {
background-color: rgba($color-white, 0.2);
border-color: rgba($color-white, 0.6);
color: $color-white;
background-color: $color-marketing-gray-20;
border-color: $color-marketing-gray-40;
color: $color-marketing-gray-70;
}

&:active {
background-color: rgba($color-white, 0.2);
border-color: rgba($color-white, 0.4);
background-color: $color-marketing-gray-20;
border-color: $color-marketing-gray-50;
color: $color-marketing-gray-70;
}

// dark
&.mzp-t-dark {
background-color: rgba($color-white, 0.1);
border-color: rgba($color-white, 0.6);
color: $color-white;

&:focus {
border-color: forms.$button-border-color-focus;
}

&:hover {
background-color: rgba($color-white, 0.2);
border-color: rgba($color-white, 0.6);
color: $color-white;
}

&:active {
background-color: rgba($color-white, 0.2);
border-color: rgba($color-white, 0.4);
color: $color-white;
}
}

}
}
}
Expand All @@ -274,16 +268,15 @@ a.mzp-c-button {
display: block;
margin-top: forms.$info-v-spacing;

a:link,
a:visited {
a {
color: inherit;
text-decoration: none;
}

a:hover,
a:active,
a:focus {
text-decoration: underline;
&:hover,
&:active,
&:focus {
text-decoration: underline;
}
}
}

Expand Down
30 changes: 10 additions & 20 deletions assets/sass/protocol/components/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,15 +93,11 @@
.mzp-c-card-block-link {
border-radius: $border-radius-xs;
display: block;
color: $color-black;
text-decoration: none;

&:link,
&:visited {
color: $color-black;
text-decoration: none;

.mzp-c-card-cta-text {
color: $color-link;
}
.mzp-c-card-cta-text {
color: $color-link;
}

&:hover,
Expand Down Expand Up @@ -147,19 +143,16 @@
}

.mzp-c-card-block-link {
color: $body-text-color-inverse;

&:hover,
&:active,
&:focus {
box-shadow: 0 0 0 4px $color-marketing-gray-80;
}

&:link,
&:visited {
.mzp-c-card-cta-text {
color: $body-text-color-inverse;

.mzp-c-card-cta-text {
color: $body-text-color-inverse;
}
}
}

Expand All @@ -173,13 +166,10 @@
}

.mzp-c-card-block-link {
&:link,
&:visited {
color: var(--body-text-color-inverse);
color: var(--body-text-color-inverse);

.mzp-c-card-cta-text {
color: var(--body-text-color-inverse);
}
.mzp-c-card-cta-text {
color: var(--body-text-color-inverse);
}
}
}
Expand Down
Loading