Replace 'x' psuedo element with SVG

The current link button for removing an area is
created using a psuedo element with an 'x' as
content.

The inline box for the 'x' overlapped its parent.
This is visible in high contrast mode, breaking the
parent's border. Despite existing in CSS, the 'x'
is also announced by screen readers, which is not
what we want.

This changes it to be an inline SVG with a role of
image. It doesn't require as large an inline box
so doesn't cause visual issues in high contrast
modes. It also means we can set it's label similar to
how you would an image's alt text, giving us
control over what is announced by screen readers.

This commit also includes some extra CSS,
targeting high contrast modes, giving the
link button the following when viewed in those
modes:
- a complete border so it is
  distinguishable from the list item
- a focus style

app/assets/stylesheets/components/area-list.scss

@@ -6,55 +6,65 @@
 
     display: inline-block;
     border: 2px solid $black;
-    padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px) govuk-spacing(1) govuk-spacing(2);
+    // Create space for the remove link on the right of the list item (including borders)
+    padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px + (2 * 2px)) govuk-spacing(1) govuk-spacing(2);
     margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
     position: relative;
 
     &-remove {
 
-      font-size: 0;
+      display: block;
+      position: absolute;
+      top: -2px; // cover list-item border-top
+      right: -2px; // cover list-item border-right
+      bottom: -2px; // cover list-item border-bottom
+      width: 35px;
+      background: $govuk-blue;
+      color: $white;
+      box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
+      padding: (govuk-spacing(1) + 1px) 0 govuk-spacing(1); 
+      border: 2px solid $govuk-blue;
+      border-left: none;
+      text-align: center;
+      text-decoration: none;
 
-      &:before {
-        content: "×";
-        display: block;
-        position: absolute;
-        top: -2px;
-        right: -2px;
-        bottom: -2px;
-        width: 35px;
-        background: $govuk-blue;
-        color: $white;
-        box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
-        border: 2px solid $govuk-blue;
-        border-left: none;
-        font-size: 24px;
-        font-weight: normal;
-        line-height: 40px;
-        text-align: center;
-        text-decoration: none;
+      // The box-shadow that separates the remove link from the list item is hidden in
+      // high contrast mode. Remake using a border instead
+      @media (-ms-high-contrast: active), (forced-colors: active) {
+        & {
+          border-left: 2px solid $govuk-blue;
+        }
       }
 
       &:hover,
       &:focus {
+        color: $light-blue-25;
+      }
 
-        &:before {
-          color: $light-blue-25;
+      @media (-ms-high-contrast: active), (forced-colors: active) {
+        &,
+        &:hover,
+        &:focus {
+          color: CanvasText;
         }
-
       }
 
       &:focus {
 
         outline: none;
-
-        &:before {
-          background: $govuk-focus-colour;
-          color: $black;
-          border-color: $black;
-        }
+        background: $govuk-focus-colour;
+        color: $black;
+        border-color: $black;
 
       }
 
+      // counter background colours being overridden
+      @media (-ms-high-contrast: active), (forced-colors: active) {
+        &:focus {
+          outline: 3px solid transparent;
+          color: CanvasText;
+        }
+      }
     }
 
     &:last-child {

app/templates/views/broadcast/preview-areas.html

@@ -30,7 +30,16 @@
       <ul class="area-list">
     {% endif %}
         <li class="area-list-item">
-          {{ area.name }} <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">remove</a>
+          {{ area.name }}
+          <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">
+            <svg id="area-list-item-remove__icon" width="12" height="12" viewbox="0 0 12 12" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
+              <title id="area__{{ loop.index }}">Remove {{ area.name }}</title>
+              <g transform="rotate(45),translate(1, -7.5)">
+                <line stroke-width="2" id="svg_1" y2="0" x2="7.5" y1="15" x1="7.5" stroke="currentColor" fill="none"/>
+                <line stroke-width="2" id="svg_3" y2="7.5" x2="0" y1="7.5" x1="15" stroke="currentColor" fill="none"/>
+              </g>
+            </svg>
+          </a>
         </li>
     {% if loop.last %}
       </ul>

tests/app/main/views/test_broadcast.py

@@ -832,8 +832,8 @@ def test_broadcast_page(
         'ctry19-E92000001',
         'ctry19-S92000003',
     ], [
-        'England remove',
-        'Scotland remove',
+        'England Remove England',
+        'Scotland Remove Scotland',
     ], [
         'An area of 200,000 square miles Will get the alert',
         'An extra area of 8,000 square miles is Likely to get the alert',
@@ -846,11 +846,11 @@ def test_broadcast_page(
         'wd20-E05003228',
         'wd20-E05003229',
     ], [
-        'Penrith Carleton remove',
-        'Penrith East remove',
-        'Penrith Pategill remove',
-        'Penrith South remove',
-        'Penrith West remove',
+        'Penrith Carleton Remove Penrith Carleton',
+        'Penrith East Remove Penrith East',
+        'Penrith Pategill Remove Penrith Pategill',
+        'Penrith South Remove Penrith South',
+        'Penrith West Remove Penrith West',
     ], [
         'An area of 6 square miles Will get the alert',
         'An extra area of 20 square miles is Likely to get the alert',
@@ -859,7 +859,7 @@ def test_broadcast_page(
     ([
         'lad20-E09000019',
     ], [
-        'Islington remove',
+        'Islington Remove Islington',
     ], [
         'An area of 10 square miles Will get the alert',
         'An extra area of 5 square miles is Likely to get the alert',
@@ -868,7 +868,7 @@ def test_broadcast_page(
     ([
         'ctyua19-E10000019',
     ], [
-        'Lincolnshire remove',
+        'Lincolnshire Remove Lincolnshire',
     ], [
         'An area of 4,000 square miles Will get the alert',
         'An extra area of 700 square miles is Likely to get the alert',
@@ -878,7 +878,7 @@ def test_broadcast_page(
         'ctyua19-E10000019',
         'ctyua19-E10000023'
     ], [
-        'Lincolnshire remove', 'North Yorkshire remove',
+        'Lincolnshire Remove Lincolnshire', 'North Yorkshire Remove North Yorkshire',
     ], [
         'An area of 10,000 square miles Will get the alert',
         'An extra area of 2,000 square miles is Likely to get the alert',
@@ -991,7 +991,7 @@ def test_preview_broadcast_areas_page_with_custom_polygons(
         normalize_spaces(item.text)
         for item in page.select('ul.area-list li.area-list-item')
     ] == [
-        'Area one remove', 'Area two remove', 'Area three remove',
+        'Area one Remove Area one', 'Area two Remove Area two', 'Area three Remove Area three',
     ]
 
     assert len(page.select('#area-list-map')) == 1