From 8827b8802e420405b45decb7d4ed1b938f0540fa Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 25 Aug 2021 20:39:26 +0100
Subject: [PATCH] Update comments about high contrast styles

To address the points in this comment on the
associated pull request:

https://github.com/alphagov/notifications-admin/pull/3996/files/04de4ed865cd34caae31f7fef5f41730df8ec072#diff-6c10fd1eff57bed9c68dbad652255da627ac922a2f8aabf7b17a02a5dff9d099
---
 app/assets/stylesheets/map.scss | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss
index d42e464bd..66da5291a 100644
--- a/app/assets/stylesheets/map.scss
+++ b/app/assets/stylesheets/map.scss
@@ -10,9 +10,10 @@ $govuk-focus-colour: #FFDD00;
 $zoom-button-colour: govuk-colour("white");
 $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
 
-// The focus style is a 2-colour outline, made to match the GOVUK text input focus style.
-// When colours are overridden, for example when users have a dark mode, box-shadows disappear,
-// so the outline which is left as a single colour (defined by the OS, to replace 'transparent').
+// The focus style is a 2-colour outline, made to match the GOVUK text input focus style, using
+// box-shadow. When colours are overridden, for example when users have Windows high contrast mode
+// on, box-shadows disappear, so the outline which is left as a single colour (defined by the OS,
+// to replace 'transparent').
 //
 // Leaflet adds focus styles with JS, through inline styles. Because of their higher precedence
 // we need to mark our overrides with !important.
@@ -83,9 +84,10 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
 
     // Styles that apply if focused with or without the :hover or :active state
     &:focus {
-      // When colours are overridden, for example when users have a dark mode,
-      // backgrounds and box-shadows disappear, so we need to ensure there's a
-      // outline so it can be set to a visible colour by the OS.
+      // Button focus is shown by a change in background colour.
+      // When colours are overridden, for example when users have Windows high
+      // contrast mode on, backgrounds disappear, so we need to ensure there's a
+      // visible outline so it can be set to a colour by the OS.
       border: solid 2px $govuk-focus-colour;
       box-sizing: border-box; // make sure height includes the border
       line-height: 26px; // subtract the border from the height (normally 30px)
@@ -151,9 +153,10 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
 .leaflet-control-attribution {
   & a {
     &:focus {
-      // When colours are overridden, for example when users have a dark mode,
-      // backgrounds and box-shadows disappear, so we need to ensure there's a
-      // transparent outline which will be set to a visible colour.
+      // Link focus is shown by a change in background colour.
+      // When colours are overridden, for example when users have Windows high
+      // contrast mode on, backgrounds disappear, so we need to ensure there's a
+      // visible outline so it can be set to a colour by the OS.
       outline: $govuk-focus-width solid transparent !important; // sass-lint:disable-line no-important
       color: $govuk-focus-text-colour;
       background: $govuk-focus-colour;