Yellowish border appears on map focus (mobile) #5069
Replies: 6 comments
-
|
The template is here for a reason, please create a minimal reproduction. |
Beta Was this translation helpful? Give feedback.
-
|
@HarelM this is the minimal reproduceable example: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>🗺️</title>
<link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet">
<style>
#map
{
position: absolute;
left: -20px;
top: -20px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<script>
new maplibregl.Map({
container: "map",
style: {
version: 8,
sources: {
"osm": {
type: "raster",
tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
}
},
layers: [
{
id: "osm",
type: "raster",
source: "osm",
},
],
},
});
</script>
</body>
</html>Run it using VSCode Live Server or any other backend, open Chrome devtools, toggle device emulation, select a mobile device type, then press tab to shift keyboard focus on the map, and the yellow border will appear: |
Beta Was this translation helpful? Give feedback.
-
|
I don't see any problem with this - this is meant for accessibility as far as I understand to let the users know what they currently focusing on. |
Beta Was this translation helpful? Give feedback.
-
|
The problem is if the map is meant to span the entire screen it will feel bugged to users when around the map there is a yellow border at all times |
Beta Was this translation helpful? Give feedback.
-
|
If it you want to avoid this border (although I don't think you should due to accessibility requirement), you can create a man that is a bit bigger than the screen by a few pixels... |
Beta Was this translation helpful? Give feedback.
-
|
@HarelM thank you for the suggestion, I have already been using that to avoid the yellow borders on mobile. Is there no way to disable this feature? I'd imagine this is added intentionally as normal focusable elements usually have the |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
maplibre-gl-js version: v4.7.0
browser: Google Chrome
Steps to Trigger Behavior
position: relative; left: -4px; top: -4px;Link to Demonstration
Expected Behavior
Maps should not have any borders or outlines unless explicitly stated by the programmer.
Actual Behavior
Yellow border appears on map focus. Only workaround is to span the map sufficient pixels outside of bounds so it no longer shows on mobile:
Beta Was this translation helpful? Give feedback.
All reactions