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

[stephaniehobson]

Description

• Removes :hover:visited styles for links
• Removes text colour change on :focus for links (rely on focus ring instead)

---

• I have documented this change in the design system.
• I have recorded this change in CHANGELOG.md.

Issue

Fix #1071

Testing

Toggle through the various states using dev tools and make sure they're all displaying as intended.

http://localhost:3000/components/detail/links--default
http://localhost:3000/components/detail/button--primary
http://localhost:3000/components/detail/footer
http://localhost:3000/components/detail/notification-bar--warning

Hard-swap the files into bedrock and see if it breaks anything (if you turn off the Firefox redirects you can view Fxc content and skip testing springfield 🙂 )

It should fix the :focus state for buttons on this page: http://localhost:3000/en-US/about/manifesto/

[stephaniehobson]

The increased specificity was added in #1045 to address the problem where links were styled like buttons and then got focus.

This has been solved by removing the text colour change for :focus styles from the default :link styles.

[stephaniehobson]

:visited moves earlier in the source so is over-ridden by the hover, focus, and active styles that follow. We rely on the cascade to style a link when it's hovered instead of explicitly declaring :visited:hover styles.

[stephaniehobson]

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

[stephaniehobson]

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.

[stephaniehobson]

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

[maureenlholland]

r+wc 🎉 this is looking much cleaner - nothing blocking: minor typo and a suggestion on possibly making the button component selector even simpler

tested on moz and fxc pages in bedrock (thanks for the disable redirect tip), fixes the color contrast issues seen on manifesto button and account promo links (i.e. on http://localhost:8000/fr/firefox/browsers/mobile/)

[maureenlholland]

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

[maureenlholland]

suggestion (non-blocking): in the interest of keeping specificity as low as possible, is it possible to remove the prepended a selector too? the button class should overrule the base element

Suggested change

	a.mzp-c-button {
	{

[maureenlholland]

Use of :where() on link visited state reduces specificity to element selector

We should be able to rely solely on .mzp-c-button class selector for button styles (regardless of whether underlying element is button or link). Link element styles only use color, background-color, and text-decoration properties, so we could remove the prepended a from Button shape and style selector too (L76)

[maureenlholland]

🧹 🧹 🧹