When Tabbing through map, focus outline flashes but does not stay lit up

Try to use Tab to advance through focusable elements in a Leaflet map. For example, try with the example map on the Leaflet homepage (https://leafletjs.com/). Elements including the “x” to close the popup, the zoom in (“+”) and zoom out (“-”) controls, and the bottom-right corner links for “Leaflet” and “OpenStreetMap”, will briefly flash the focus ring, but it will then disappear. The element is actually still focused, there is no visible indication. Among other things, this is a nightmare for accessibility.

This seems to be occurring because the Map _handleDOMEvent function calls DomUtil.preventOutline for all mousedown, keypress, keyup, and keydown events. DomUtil.preventOutline is injecting outline: none into the element.style. With the caveat that I am not familiar with this code base, I don’t understand this approach. If the desire is to remove the focus ring outline, why wouldn’t this be done with CSS on :focus? This would prevent the brief focus ring flash, and it would allow for it to be overridden in CSS (without resorting to !important).

[Malvoz]

This is a failure of WCAG 2.1 - Success Criterion 2.4.7 Focus Visible.

If outlines are undesirable for some reason, :focus-visible allows for only displaying them on keyboard navigation, which is when it becomes an accessibility issue if they’re not displayed to the user.

[Malvoz]

If you (@akrawitz, @matthoylu, and others) wish to restore the focus outline in your own stylesheet as a quickfix, here’s a snippet that should cover most browsers:

.leaflet-container :focus {
  outline: -webkit-focus-ring-color auto thin !important; /* Fallback for some browsers that don't support `revert`. */
  /* Longhand properties:
  outline-color: -webkit-focus-ring-color !important;
  outline-style: auto !important;
  outline-width: thin !important;
  */
  outline: revert !important;
}