notifications-admin/app/assets/stylesheets/map.scss

@import 'leaflet/dist/leaflet';

// Styles to make the leaflet map match GOVUK (accessibility-focused) styling

@import "settings/all";
@import "helpers/all";

// Reset focus colour to latest version, to match the rest of the app
$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, 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.
//
// This also uses :focus-visible to stop it showing focus when you click zoom in/out.
// This approach, taken from MDN, allows it to fall back to :focus for browsers without support:
// https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#selectively_showing_the_focus_indicator
.leaflet-container {

  &: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
    // 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
    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;
  }
}

// Overrides for zoom controls to make them match GOVUK buttons
// https://design-system.service.gov.uk/components/button/
//
// GOVUK buttons have an invisible outline, used for high contrast modes. Our buttons are cropped by
// their container so we use a border instead.
//
// Also introduces a black divider between the buttons, made with a pseudo element, appearing on
// focus to mimic the 2-colour style GOVUK Frontend buttons and links have
.leaflet-bar {
  border-radius: 0; // Remove rounded corners
  background: #CCCCCC;

  @media (forced-colors: active) {
    background: canvasText;
  }

  a {

    // Outlines don't work because of the buttons being so close together so turn off
    outline: none;

    &:first-child {
      border-bottom: none;
      margin-bottom: 1px;
    }

    &:last-child {
      // Allow it to contain the absolutely positioned divider bar we show between buttons
      // when one is focused
      position: relative;
    }

    // Hover style is darker background
    &:hover {
      background-color: $zoom-button-hover-colour;
    }

    // Styles that apply if focused with or without the :hover or :active state
    &:focus {
      // 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: 22px; // subtract the border from the height (normally 26px)

      // The inline display box for the button text overlaps the button edge.
      // This is only visible in high contrast mode because of the background colour being set.
      @media (forced-colors: active) {
        overflow: hidden;
      }
    }

    // Focused style sets the button to the focus colour
    &:focus:not(:active):not(:hover) {
      color: $govuk-focus-text-colour;
      background-color: $govuk-focus-colour;
    }

    // 3px divider between buttons as a version of the underline from the GOVUK focus style
    &:last-child:focus:not(:active):not(:hover):before,
    &:first-child:focus:not(:active):not(:hover) + a:before {
      content: "";
      position: absolute;
      height: 2px;
      background: $govuk-focus-text-colour;

      // hide in forced-color mode, where the normal focus state the divider is part of does not show
      @media (forced-colors: active) {
        display: none;
      }
    }

    // Styles for the divider, specifc to the second button being focused
    &:last-child:focus:not(:active):not(:hover):before {
      left: -2px; // Subtract 2px left border
      top: -3px; // Subtract 2px top border and position so it overlaps space above button
      width: calc(100% + 4px); // Compensate for borders
    }

    // Styles for the divider, specifc to the first button being focused
    &:first-child:focus:not(:active):not(:hover) + a:before {
      left: 0px; // No borders on parent of :before when not focused
      top: -1px; // No borders so just overlap space above parent button
      width: 100%;
    }
  }

}

// Extra block to override specific LeafletJS rounded-corners when buttons are focused
.leaflet-bar a,
.leaflet-touch .leaflet-bar a {

  &:first-child {
    // Remove rounded corners
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  &:last-child {
    // Remove rounded corners
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

}

// buttons are 30px for touch-capable devices/browsers
.leaflet-touch .leaflet-bar a:focus {
  line-height: 26px; // subtract the border from the height (normally 30px)
}

// Map attribution links
.leaflet-control-attribution {
  & a {
    &:focus {
      // 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;
      box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
    }

    // use an extra prefix class to override LeafletJS CSS
    .leaflet-bottom &:hover {
      text-decoration: none;
    }
  }
}