Fix pa11y issues with the map

This commit is contained in:
Stefan Bethke 2026-10-17 10:50:38 +02:00
commit f1b8c42ab6
6 changed files with 94 additions and 21 deletions

View file

@ -88,6 +88,33 @@
}
}
/* The credit line on an opaque background, so its contrast doesn't depend on the map below.
As specific as Leaflet's own semi-transparent rule plus one, which it would lose to otherwise. */
.tour-map .leaflet-container .leaflet-control-attribution {
background: #fff;
color: #333;
a {
color: #0b5394;
}
}
/* Leaflet blends tiles with plus-lighter to hide seams while they fade in; the map doesn't fade
tiles (tour-map.js), and axe, which pa11y uses, fails on that blend mode. */
.tour-map .leaflet-container img.leaflet-tile {
mix-blend-mode: normal;
}
.tour-map .leaflet-bar a {
color: #111;
}
/* The zoom icons (SVG, see tour-map.js) centred in their buttons. */
.tour-map .leaflet-control-zoom a {
display: grid;
place-items: center;
}
/* Dark map tiles to match the dark colour scheme. */
@media (prefers-color-scheme: dark) {
.tour-map .leaflet-tile-pane {