Make WordPress Core

Opened 20 months ago

Closed 11 months ago

Last modified 10 months ago

#54330 closed defect (bug) (invalid)

Twenty Twenty-One: Menu Item Focus Background only works on Chrome

Reported by: domainsupport's profile domainsupport Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.8.1
Component: Bundled Theme Keywords:
Focuses: css Cc:

Description

The following css in style.css ...

.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    background: rgba(0, 0, 0, 0.9);
}

... only has an effect in Chrome. It is ignored in Safari.

Many thanks,

Oliver

Change History (6)

#1 @domainsupport
20 months ago

Sorry, this is linked ... the dotted border on site logo focus only shows on Chrome also ...

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
    outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
}

Oliver

#2 @poena
11 months ago

Hi
I am not able to reproduce this on Safari version 15.5. How are you moving focus to the element?
Did you turn on "Press Tab to highlight each item" in the browser preference?

#3 @domainsupport
11 months ago

Hi,

It is when users click on a link, site owners were complaining that in Chrome the background flashed a different colour or a dotted line appeared (depending on the link type).

I didn't see what was going on at first because I mainly use Safari which didn't replicate the issue.

But when testing in Chrome I was able to replicate the problem, if you click on a matching element and hold the click you will see.

I've just tested on a client's site https://www.joansell.co.uk and the issue persists. If you click and hold the click on an item in the main nav, you will see that in Chrome you get a black background (which I assume is the intended behaviour) but in Safari there is no such change.

Oliver

#4 @poena
11 months ago

This is the behavior (a bug) of Safari compared to other browsers. I am not aware of a way to work around it, but if you know of a solution we can try implementing it.

#5 @domainsupport
11 months ago

  • Resolution set to invalid
  • Status changed from new to closed

Understood ... it would appear that this can be fixed with a polyfill https://itnext.io/fixing-focus-for-safari-b5916fef1064 but that seems a little excessive for the issue at hand.

As this is not a theme bug but a browser bug I guess this can be closed.

Oliver

#6 @desrosj
10 months ago

  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.