Allow :focus-visible pseudo-selector to be set in theme.json

[huubl]

What?

This PR adds support for the :focus-visible pseudo-class in theme.json by including it in the VALID_ELEMENT_PSEUDO_SELECTORS list.

Why?

Currently, the :focus-visible pseudo-class cannot be set via theme.json because it is not included in the VALID_ELEMENT_PSEUDO_SELECTORS list. This limitation makes it difficult to implement enhanced focus styles specifically for keyboard users, impacting accessibility. Adding :focus-visible will allow themes to provide better focus indicators, improving the overall user experience for keyboard navigation.

How?

The PR updates the VALID_ELEMENT_PSEUDO_SELECTORS array in class-wp-theme-json-gutenberg.php by adding :focus-visible. This change allows the :focus-visible pseudo-class to be used directly within theme.json files.

Testing Instructions

1. Apply this PR.
2. Create or edit a theme that uses theme.json.
3. Add a style using the :focus-visible pseudo-class in theme.json. For example:

{
  "styles": {
    "elements": {
      "button": {
        ":focus-visible": {
          "outline": {
            "color": "var(--wp--preset--color--black)",
            "offset": "2px",
            "style": "dotted",
            "width": "1px"
          }
        }
      }
    }
  }
}

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: huubl <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.