From bc22c206b9839b723076f3ad09b5ac84d28d3968 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 3 Nov 2021 19:50:12 +0000 Subject: [PATCH 1/2] Make images in key of map SVGs At the moment, the icons in the key of the map showing what each type of area drawn on the map means change colour in high contrast mode. This causes a mismatch between the areas on the map and the key. These changes remake the images in SVG to prevent the colours changing in high contrast modes. They also add a white background to the icons, to make sure they match the areas they refer to in the map. --- app/assets/stylesheets/components/area-list.scss | 13 +++---------- app/templates/views/broadcast/macros/area-map.html | 8 ++++++++ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index 798beacc2..86b7c068b 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/app/assets/stylesheets/components/area-list.scss @@ -137,17 +137,10 @@ padding-left: govuk-spacing(8); line-height: govuk-spacing(7); - &:before { - content: ""; - display: block; + &__icon { position: absolute; - top: 3px; - left: govuk-spacing(1); - width: govuk-spacing(6); - height: govuk-spacing(6); - box-sizing: border-box; - margin-right: govuk-spacing(1); - transform: rotate(45deg); + left: -5px; + top: -7px; } &--certain { diff --git a/app/templates/views/broadcast/macros/area-map.html b/app/templates/views/broadcast/macros/area-map.html index 06c9c67b0..2ac5e82f7 100644 --- a/app/templates/views/broadcast/macros/area-map.html +++ b/app/templates/views/broadcast/macros/area-map.html @@ -1,6 +1,10 @@ {% macro map(broadcast_message) %}

+ @@ -9,6 +13,10 @@ alert

+ From 2e53a2b6f8123607b6048a9eb44df94d0a5042c0 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 4 Nov 2021 15:09:25 +0000 Subject: [PATCH 2/2] Add GOVUK visually hidden style for map key The sentences in the key to the map have 2 forms: 1. the visual form, with an graphic pattern alongside text saying what the pattern means in the map 2. the semantic form, with text describing what the pattern means and how big an area it covers for this alert This is achieved by making the graphic non-semantic and having hidden words in the sentence for each paragraph. While the spaces between words are correct for both forms of these sentences, we observed screen readers speaking some groups of words as one when they spoke the sentence. Most noticably, 'the alert' was spoken as 'thealert'. Swapping the class used to hide the visually hidden words from ours to the GOVUK one seemed to fix this. It's unclear why it does but the `govuk-visually-hidden` class adds the following styles to those in ours: - width: 1px - height: 1px - white-space: nowrap It also has `margin: 0` instead of `margin: -1px`. --- app/templates/views/broadcast/macros/area-map.html | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/app/templates/views/broadcast/macros/area-map.html b/app/templates/views/broadcast/macros/area-map.html index 2ac5e82f7..ceef09776 100644 --- a/app/templates/views/broadcast/macros/area-map.html +++ b/app/templates/views/broadcast/macros/area-map.html @@ -5,11 +5,13 @@ -

@@ -17,11 +19,11 @@ -