A11y: default browser focus-visible styles on canvas are hidden or partially hidden by overflow:hidden

[tremby]

This is an accessibility issue.

Focus rings on the canvas element (which are focusable and keyboard-controllable) are not visible due to the current markup and styling.

mapbox-gl-js version: 2.9.2

browser: Firefox 103, Chromium 104

Steps to Trigger Behavior

1. Tab to the canvas
2. See no outline (Firefox), or see very thin outline (Chromium)
3. Compare to other default-styled elements such as <a> or the Mapbox logo inside the map, where you'll see an outline (Firefox) or a thicker outline (Chromium)

Link to Demonstration

Pretty much any Mapbox example, such as https://docs.mapbox.com/mapbox-gl-js/example/simple-map/

Expected Behavior

The full browser default (or custom) focus style is visible.

Actual Behavior

Anything outside the bounds of the canvas is hidden due to overflow:hidden on the div.mapboxgl-map wrapper element, which hugs the map size exactly.

Firefox renders its default focus ring totally outside of those bounds so it's not visible at all. Chromium renders its default focus ring one pixel inside and a few pixels outside, so it's only partially visible.

Suggestion

Move the overflow:hidden style to a different element, so overflow of the <canvas> element is not hidden.

I understand that other elements inside div.mapboxgl-map need overflow:hidden applied, so that things like markers are hidden when translated outside of the bounds of the map area. How about a new div, sibling to the canvas, which will contain all markers etc which get added to the map?