From c34fd4de6e8d9ffb4f4be10653067c3ef2722fd1 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 22 Oct 2021 11:54:41 +0100
Subject: [PATCH] Make remove ('x') links buttons

The text never had underlines like our other
link-button components so always looked like
buttons. If they look like buttons, they should
act like them too and have those semantics.

This give them a role of button and uses the class
and data attribute for the button component from
GOVUK Frontend to make them work like one.

These changes include a fair amount of styles to
override those the govuk-button class brings in.
I've tried to mark those ones to at least make
that obvious.
---
 .../stylesheets/components/area-list.scss     | 53 +++++++++++--------
 .../views/broadcast/preview-areas.html        |  2 +-
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
index 283bc5b62..ad0484b36 100644
--- a/app/assets/stylesheets/components/area-list.scss
+++ b/app/assets/stylesheets/components/area-list.scss
@@ -19,51 +19,58 @@
       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;
+      font-size: inherit; // counter govuk-button styles
+      line-height: inherit; // counter govuk-button styles
 
-      // 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;
-        }
+      // set styles so they don't get overriden by govuk-button styles
+      &,
+      &:hover {
+        background: $govuk-blue;
       }
 
-      &:hover,
-      &:focus {
+      &:hover {
         color: $light-blue-25;
       }
 
+      // The box-shadow that separates the remove link from the list item is hidden in
+      // high contrast mode. Remake using a border instead
+      // Also sets text colour to match govuk-button
       @media (-ms-high-contrast: active), (forced-colors: active) {
-        &,
+
+        &:link,
+        &:active,
         &:hover,
-        &:focus {
-          color: CanvasText;
+        &:focus:not(:active):not(:hover) {
+          border-left: 2px solid $govuk-blue;
+          color: LinkText;
         }
+
       }
 
-      &:focus {
+      // set styles so they don't get overriden by govuk-button styles
+      &,
+      &:focus:not(:active):not(:hover) {
+        box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
+      }
 
-        outline: none;
-        background: $govuk-focus-colour;
-        color: $black;
+      // set styles so they don't get overriden by govuk-button styles
+      &:focus:not(:active):not(:hover) {
         border-color: $black;
-
       }
 
-      // counter background colours being overridden
+      // show outline to make focus visible when background colours are overridden
       @media (-ms-high-contrast: active), (forced-colors: active) {
-        &:focus {
+
+        // set styles so they don't get overriden by govuk-button styles
+        &:focus:not(:active):not(:hover) {
           outline: 3px solid transparent;
-          color: CanvasText;
         }
+
       }
     }
 
@@ -86,7 +93,7 @@
 
   }
 
-  .govuk-button {
+  .govuk-button--secondary {
     margin-left: 3px;
   }
 
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index a82da6291..44bcb690f 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/app/templates/views/broadcast/preview-areas.html
@@ -31,7 +31,7 @@
     {% 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) }}">
+          <a class="area-list-item-remove govuk-button" data-module="govuk-button" role="button" 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)">