How to disable black outline in Chrome

Question

This issue is present only in Chrome, the map canvas displays a black outline when clicked (on focus). This is supposedly some kind of accessibility feature turned on by default since Chrome 83. I tried disabling this with css overrides but no success:

  *:focus, *:focus-visible, *:focus-within {
    outline: none !important;
  }

When unfocused:

When focused:

How to remove this, it really ruins the look of my app.

Answer 1

This seems to be sufficient for me:

* {
    outline: none;
}

or, to minimise impact on accessibility:

.mapboxgl-canvas {
    outline: none;
}