From 542be8832d42f8c44a63d071f13501a515590e4d Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 26 Aug 2021 15:42:12 +0100 Subject: [PATCH] Turn outlines off on map control buttons Leaflet does this anyway when they're focused (through JS) but we found holding shift when on a focused button, which you do when tabbing backwards, turns this off for some reason so you see the outline the browser applies by default. This turns all outlines off to stop that happening. Worth nothing that focus is indicated by: - a change of background colour instead when tabbing - a border in forced-color mode ...so the outline is not needed. --- app/assets/stylesheets/map.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss index 56c58f510..49147fc6a 100644 --- a/app/assets/stylesheets/map.scss +++ b/app/assets/stylesheets/map.scss @@ -61,6 +61,9 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%); a { + // Outlines don't work because of the buttons being so close together so turn off + outline: none; + &:last-child { // Allow it to contain the absolutely positioned divider bar we show between buttons // when one is focused