From a3a947ab2950559e0e979c342b585bf853eca69c Mon Sep 17 00:00:00 2001
From: Mat <MatMoore@users.noreply.github.com>
Date: Tue, 10 Sep 2024 09:27:29 +0100
Subject: [PATCH] Fix focus colours for masthead component (#793)

* fix: link colours on masthead component should depend on state

- don't set it to white in the HTML
- set text to white for link/visited states
- set text to black for focus state - in this case we get a yellow background

* fix: `make build` action should run scss

* fixup
---
 .github/workflows/reusable-tests.yml |  4 ++--
 Makefile                             |  7 ++++---
 locale/en/LC_MESSAGES/django.po      |  2 +-
 scss/components/_masthead.scss       | 10 ++++++++--
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/reusable-tests.yml b/.github/workflows/reusable-tests.yml
index 1329501a..ea7c753a 100644
--- a/.github/workflows/reusable-tests.yml
+++ b/.github/workflows/reusable-tests.yml
@@ -99,8 +99,8 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - name: Collect static files
-        run: make collect_static
+      - name: Build frontend assets
+        run: make assets
 
       - name: Run unit tests with coverage
         id: fast-tests
diff --git a/Makefile b/Makefile
index 00b54eb8..4a382029 100644
--- a/Makefile
+++ b/Makefile
@@ -6,7 +6,7 @@ ENV := local
 all: build
 
 # Setup the application
-build: install_deps set_env $(ENV_FILE) collect_static migrate setup_waffle_switches messages
+build: install_deps set_env $(ENV_FILE) assets migrate setup_waffle_switches messages
 
 # Install Python dependencies
 install_python_deps:
@@ -42,7 +42,8 @@ $(ENV_FILE): .env.tpl
 	@echo "Optionally, set CATALOGUE_TOKEN in ${ENV_FILE}"
 
 # Collect static files
-collect_static:
+assets:
+	npm run dependencies
 	poetry run python manage.py collectstatic --noinput
 
 # Run migrations
@@ -94,4 +95,4 @@ clean:
 lint:
 	pre-commit run --all-files
 
-.PHONY: all build install_deps set_env collect_static migrate setup_waffle_switches messages compilemessages run test unit integration clean lint
+.PHONY: all build install_deps set_env assets migrate setup_waffle_switches messages compilemessages run test unit integration clean lint
diff --git a/locale/en/LC_MESSAGES/django.po b/locale/en/LC_MESSAGES/django.po
index a0a18133..34ec637c 100644
--- a/locale/en/LC_MESSAGES/django.po
+++ b/locale/en/LC_MESSAGES/django.po
@@ -355,7 +355,7 @@ msgstr "Discover data from across the Ministry of Justice"
 msgid "service_description"
 msgstr ""
 "Find MoJ data shows you what data exists and how to access it. <a "
-"style=\"color: white;\"  aria-label=\"Learn more about Find MoJ data\" "
+"aria-label=\"Learn more about Find MoJ data\" "
 "href=\"https://user-guide.find-moj-data.service.justice.gov.uk/\">Learn "
 "more</a>"
 
diff --git a/scss/components/_masthead.scss b/scss/components/_masthead.scss
index 21e959aa..9704136d 100644
--- a/scss/components/_masthead.scss
+++ b/scss/components/_masthead.scss
@@ -7,12 +7,18 @@
   color: govuk-colour("white");
   background-color: govuk-colour("blue");
 
-  label {
+  label,
+  a:link,
+  a:visited {
     color: govuk-colour("white");
   }
+
+  a:focus {
+    color: govuk-colour("black");
+  }
 }
 
-.app-masthead__title {
+.app-masthead .app-masthead__title {
   color: govuk-colour("white");
   @include govuk-responsive-margin(6, "bottom");
 }