Fix focus styling for context control buttons
Normally this is not an issue in the Gerrit web app, because we are
never using `paper-button` directly. Instead we use `gr-button` as a
wrapper around the pure paper component.
`paper-button` includes this css style rule:
```
:host {
outline-width: 0;
}
```
This overrules the standard focus rule of the user agent:
```
:focus-visible {
outline: -webkit-focus-ring-color auto 1px;
}
```
Let's neutralize the override.
Screenshots
Before https://imgur.com/a/Ly8psbp
After https://imgur.com/a/kprSnS1
Release-Notes: skip
Google-Bug-Id: b/269130412
Change-Id: I1598bff18b40cbcf814def04eb584555f9b13ffd
diff --git a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts
index 1679ee0..4a2fee5 100644
--- a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts
+++ b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts
@@ -161,6 +161,10 @@
/* same as defined in gr-button */
background: rgba(0, 0, 0, 0.12);
}
+ paper-button:focus-visible {
+ /* paper-button sets this to 0, thus preventing focus-based styling. */
+ outline-width: 1px;
+ }
.aboveBelowButtons {
display: flex;
