Twenty Twenty-Four: Rectangular box around clickable elements in theme update 1.1

[thesoftmall]

The clickable elements like linked texts, search box, detail block, when clicked, a rectangular box appears around the text.

[thesoftmall]

when i clicked the arrow box appeared arounf the text, this happens with the normal linked text as well when they are clicked, after 2024-theme update 1.1

[sabernhardt]

Hi and thanks for the report!

The focus outline is already tracked on #60808.

[thesoftmall]

but whats the solution and where to apply solution give the path.

[thesoftmall]

alright i got tried it and solved it for now, in theme editor go to themes.json file, and change the code line "css": ":where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}", change 2px to 0. And the matter will be solved its solved for me this way

[sabernhardt]

The current suggestion is changing :focus to :focus-visible in theme.json.

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

If you completely remove the focus outline, people will not know which element is focused when navigating by keyboard. The darker outline is not a bug; it's simply not desired in all situations.

[thesoftmall]

@sabernhardt whats the other solution according to you then? in 2024theme version 1.0 it was not there this problem occured in version 1.1

[sabernhardt]

Duplicate of #60808.

The code is in comment:6.

Also, you do not need to reopen tickets to continue the conversation.

[thesoftmall]

yes made these changes now thankyou ..Replying to sabernhardt:

The current suggestion is changing :focus to :focus-visible in theme.json.

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

If you completely remove the focus outline, people will not know which element is focused when navigating by keyboard. The darker outline is not a bug; it's simply not desired in all situations.