From 62a7fa33c9dc7ebe1b440571d3ee8c8b6936d0f6 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <andrew.hosgood@nationalarchives.gov.uk>
Date: Thu, 5 Sep 2024 16:09:20 +0100
Subject: [PATCH] Hide links around card images from assistive technologies

---
 CHANGELOG.md                                       | 1 +
 src/nationalarchives/components/card/fixtures.json | 2 +-
 src/nationalarchives/components/card/template.njk  | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6a15cf96..136a90bc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Added missing underline to focused buttons using on the `<button>` element
+- Links around card images have been hidden from assistive technologies
 
 ### Security
 
diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
index d919e3b3..c3826c6b 100644
--- a/src/nationalarchives/components/card/fixtures.json
+++ b/src/nationalarchives/components/card/fixtures.json
@@ -174,7 +174,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></article>"
+      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\" aria-hidden=\"true\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></article>"
     },
     {
       "name": "with actions",
diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
index 14c835ca..c415d6cc 100644
--- a/src/nationalarchives/components/card/template.njk
+++ b/src/nationalarchives/components/card/template.njk
@@ -49,7 +49,7 @@
   {%- endif %}
   {%- if params.imageSrc %}
     {%- if params.href and (not params.fullAreaClick or params.actions) %}
-    <a href="{{ params.href }}" class="tna-card__image-container{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" tabindex="-1" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+    <a href="{{ params.href }}" class="tna-card__image-container{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" tabindex="-1" aria-hidden="true" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
     {%- else %}
     <div class="tna-card__image-container">
     {%- endif %}