Twenty Twenty Four: Outline appears around selected blocks on TwentyTwentyFour theme

[cat-og]

Quick summary

While the site is using the TwentyTwentyFour theme, if a visitor selects any clickable element, a border appears around that element for as long as it it selected. This applies to links, buttons, and other clickable elements like the Details block.

Steps to reproduce

1. Update site to use TwentyTwentyFour theme
2. Click on a link in the menu; a box will appear around the link just before the new page loads
3. Add a details block and open on the live page, when you click on the details section to expand it, a box appears around the detail header

What you expected to happen

I can click on a link or other clickable element and interact with it without an outline appearing around that block.

What actually happened

A box appears around the element which was selected and stays until that block is unselected.

Using inspect mode while the Details block was open and the box was visible, we were able to find the following code:

:where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
}

Impact

Some (< 50%)

Available workarounds?

Yes, difficult to implement

If the above answer is "Yes...", outline the workaround.

The following custom CSS will remove the outline if the affected site supports custom CSS:

/*Remove Outline from Selected Blocks */
.wp-site-blocks *:focus {
    outline-width: 2px;
    outline-style: none;
}

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

No response

[cat-og]

Affected user on the Personal plan, no CSS provided: 8669447-zd-a8c

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8669447-zen

[retnonindya]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO I can replicate it:

📌 ACTIONS

• Triaged

I'm not sure if this is expected or not/theme stylization, but better report this after all 😄 Moving to Themes.

[sixhours]

:focus styles with outlines are better for visual accessibility. Given this styling is specified in both Twenty Twenty Four and Twenty Twenty Five, I would consider this styling intentional and not a bug.

fbhepr%2Skers%2Sjcpbz%2Qcho%2Qgurzrf%2Sgjraglgjraglsvir%2Sfglyr.pff%3Se%3Qr583op91%2327-og

fbhepr%2Skers%2Sjcpbz%2Qcho%2Qgurzrf%2Sgjraglgjraglsbhe%2Sgurzr.wfba%3Se%3Q9557rp98%23910-og