Twenty Twenty-Three: visited state of button links use the incorrect text color

[mikachan]

When both the visited and hover states are active on a button, the visited text color overrides the hover text color, which means the two colors are not contrasting in the default style variation.

The second image has both a :visited and :hover state.

Video example: ​https://user-images.githubusercontent.com/2207451/198293193-958030d2-5817-4313-bb2d-be65bfdb8f36.mov

We may be able to fix this by adding an !important tag to the hover text color property, although this isn't ideal.

[sabernhardt]

Moving :visited before the :hover and :focus styles in global styles should be simpler.

[davidbaumwald]

This would be good to address in 6.1.1.

[mikachan]

Moving :visited before the :hover and :focus styles in global styles should be simpler.

Yes, I thought so too, but this doesn't seem to work in my testing... Perhaps this ordering should be addressed in Gutenberg.

This would be good to address in 6.1.1.

Ok!

[sabernhardt]

moves :visited to the beginning of the array

[sabernhardt]

GB34448 seems to be the same issue.

For Twenty Twenty-Three, I was able to fix it by changing the order of pseudo-classes in the VALID_ELEMENT_PSEUDO_SELECTORS array.

[mikachan]

For Twenty Twenty-Three, I was able to fix it by changing the order of pseudo-classes in the VALID_ELEMENT_PSEUDO_SELECTORS array.

Nice, thank you! This patch looks good and works well for me.

Sorry, in your earlier comment I thought you meant the ordering in the theme's theme.json file (which is what I had tried).

[sabernhardt]

I had said theme.json in that comment and then discovered my mistake :)

[mukesh27]

Thanks @mikachan for the ticket and @sabernhardt for the patch.

56928.patch​ LGTM and ready for commit.

[mikachan]

Great! Would this need an upstream PR in the Gutenberg GitHub repository as well, to reflect the fix in this patch?

[sabernhardt]

@mikachan I think the plugin should be fixed, too, if you would like to create a PR.

I'm changing the component since the proposed patch could affect more themes. Note: GB34448 is related but not exactly the same (so "Fixes: 34448" might not be appropriate).

[mikachan]

Thanks for confirming, I've opened a PR here: ​https://github.com/WordPress/gutenberg/pull/45559

Backports changes from ​https://github.com/WordPress/gutenberg/pull/45559

The order of the selectors should be: visited, hover, focus, active. This is to ensure that 'visited' has the lowest specificity and the other selectors can always overwrite it.

Props: @mikachan, @sabernhardt, @getdave (get_dave).

Trac ticket: https://core.trac.wordpress.org/ticket/56928

Thanks @Mamaduka! I changed the ticket description to point to Trac-56928 since that ticket is specific to this issue/change.

Thank you, @desrosj. The Trac ticket link makes sense to me, I will port changes back to the plugin for consistency 👍

[peterwilsoncc]

In 54774:

Themes: Re-order valid link pseudo classes.

Re-order the link pseudo classes to follow the long term LoVe (F)HA rule when set via theme.json.

In order that the CSS cascade behaves in a predictable manner, it's recommended that the selectors follow the order :visited, :focus/:hover, :active. As order affects the specificity, this ensures the interaction states override the visited states. CSS specificity is really quite beautiful, although complex.

Props mikachan, sabernhardt, davidbaumwald, mukesh27, Mamaduka, desrosj.
Fixes #56928.

Merged in https://core.trac.wordpress.org/changeset/54774

[peterwilsoncc]

Reopening for merging to the 6.1 branch.

Thank you, @peterwilsoncc.

Now the only thing left is to cherry-pick the commit for the 6.1 branch.

[desrosj]

In 54778:

Themes: Re-order valid link pseudo classes.

Re-order the link pseudo classes to follow the long term LoVe (F)HA rule when set via theme.json.

In order that the CSS cascade behaves in a predictable manner, it's recommended that the selectors follow the order :visited, :focus/:hover, :active. As order affects the specificity, this ensures the interaction states override the visited states. CSS specificity is really quite beautiful, although complex.

Props mikachan, sabernhardt, davidbaumwald, mukesh27, Mamaduka, desrosj, peterwilsoncc.
Fixes #56928.