Change the order of the pseudo-states in the pseudo selectors array

[mikachan]

What?

When the :visited state is applied in theme.json, it should have the least specificity of all the pseudo-states to allow the other interaction-based states to take precedence when appropriate (on hover, on focus, etc.)

Why?

There was a bug noticed in Twenty Twenty-Three 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.

How?

This PR changes the order of the pseudo-states in the VALID_ELEMENT_PSEUDO_SELECTORS array, so that :visited is at the beginning. This means it receives the lowest specificity in the generated CSS.

Props to @sabernhardt for originally proposing this fix!

Partially addresses #34448 (in order for this PR to fix this issue, you need to specify a :visited state in your theme.json)

Testing Instructions

1. Activate Twenty Twenty-Three
2. Insert a button with a link to a site you have already visited
3. Check that the button receives the correct text color specified in theme.json for each pseudo-state

Screenshots or screencast

Hovering over a button with a visited link:

Before	After

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[getdave]

Good spot.

What do you think about adding a comment here to explain why this order needs to be maintained?

[mikachan]

Thanks, @getdave! I've added a comment.

I also did some quick reading around this, to confirm this is a good order for these selectors.

[Mamaduka]

The core backport PR is ready: WordPress/wordpress-develop#3582

[anastas10s-afk]

Affecting WooCommerce stores as well.

Screen recordings with TT3 version 1.0 and WooCommerce version 7.1.0 below:

Screen.Recording.2022-12-05.at.20.25.23.mov

Screen.Recording.2022-12-05.at.20.27.52.mov

I hope that helps!

[mikachan]

Hey @anastas10s-afk 👋 This PR has been merged and should now be fixed in WordPress 6.1.1. Are you still seeing this issue?

[anastas10s-afk]

Hey @mikachan 👋 Yes, I'm afraid so. Testing with WordPress 6.1.1 and TT3 1.0, I get the same behavior as showcased in my previous message here.

As this one is merged already, should I open a new issue about it still happening when WooCommerce is active?

[sabernhardt]

The "View Cart" (or "Continue Shopping") link text color is a separate bug in WooCommerce:
woocommerce/woocommerce#35418