From 9c9e7a7c61dda066d709f594afb763671238c2fd Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 2 Sep 2021 11:11:03 +0100
Subject: [PATCH] Fix code for map focus style

@benthorner pointed out a few things about these
styles that could do with changes:
- the outline-offset will only appear when the
  outline does, which is in forced-color mode when
  the browser assigns a colour to it, so it
  doesn't need to be assigned in a media query
  targeting forced-color mode
- the `&:focus:not(:focus-visible)` selector
  stops the focus styles showing in scenarios
  where:
  1. the browser supports :focus-visible
  2. focus comes from something other than tabbing
     to the map
  ...so we don't need to target :focus-visible
  specifically.

This applies changes to these styles to remove
those not needed and move some to a better place.

Related to this comment on the associated pull
request:

https://github.com/alphagov/notifications-admin/pull/3996#discussion_r699246969
---
 app/assets/stylesheets/map.scss | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss
index c42e7bc0e..78aa580e9 100644
--- a/app/assets/stylesheets/map.scss
+++ b/app/assets/stylesheets/map.scss
@@ -26,21 +26,16 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
   &:focus {
     box-shadow: 0px 0px 0 3px $govuk-focus-text-colour, 0 0 0 6px $govuk-focus-colour;
     outline: solid 3px transparent !important; // sass-lint:disable-line no-important
-  }
-
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0px 0px 0 3px $govuk-focus-text-colour, 0 0 0 6px $govuk-focus-colour;
-    outline: solid 3px transparent !important; // sass-lint:disable-line no-important
-
     // You only see the outline in forced colour mode which doesn't have enough contrast with the
     // map so this creates some space between them to mimic the two-colour default styling
-    @media (forced-colors: active) {
-      outline-offset: 3px;
-    }
+    outline-offset: 3px;
+  }
+
+  // The map should only recieve focus from being tabbed to. This stops the focus state coming
+  // from other sources (like clicks on child elements).
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: none;
   }
 }