Fix pa11y issues with the map
This commit is contained in:
parent
a27781ddc5
commit
f1b8c42ab6
6 changed files with 94 additions and 21 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue