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

@@ -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

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

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>"
 

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");
 }