report: fix focus in devtools, and in 3-dot menu#16802
Conversation
|
Paul: PTAL |
| } | ||
|
|
||
| .lh-devtools :focus-visible { | ||
| outline: -webkit-focus-ring-color auto 1px; |
There was a problem hiding this comment.
I'm not sure this actually has an effect.
We have https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/panels/lighthouse/lighthousePanel.css;l=67-79;drc=50b0c0e46c8405292b411920fafd672a1c73cb51 over in the DT side which appears to override both this and the inherit below.
oooooooooooh lol dsv@ did that at the same time as you were writing this PR.
🤣
There was a problem hiding this comment.
so...
question is if you want to remove that outline:inherit globally. if you dont care then seems like we can close this PR.?
There was a problem hiding this comment.
I prefer to define non-theming/size stuff (devtools style tokens) within our stylesheet here, so want to keep the focus outline rule.
and the inherit just causes problems so I want that gone too
I once fixed this 3-dot menu in 2019 ... #9169
But it broke at some point. Maybe when we removed our custom focus-visible styling to defer to the user agent's? Since we were using
outline: inheritin the lh-button, that lost the focus styling. I'm not sure why inherit didn't fall-back to the user-agent stylesheets.Additionally, explicitly set :focus-visible outline for DevTools, which doesn't have it from any default user-agent stylesheet.