From b31553d4b571d3cf5089c7439c7ba0abf0c69271 Mon Sep 17 00:00:00 2001
From: EdwardScull <edsc1@hscic.gov.uk>
Date: Wed, 4 Sep 2024 11:47:07 +0100
Subject: [PATCH] badge with card link accessibility

---
 docs/examples/cards/card-link-with-badge.njk | 4 +++-
 src/components/badge/_badge.scss             | 1 +
 src/components/badge/large/badge-large.njk   | 6 ++++--
 src/components/card/card.njk                 | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/docs/examples/cards/card-link-with-badge.njk b/docs/examples/cards/card-link-with-badge.njk
index 2c2f97e..f172bf6 100644
--- a/docs/examples/cards/card-link-with-badge.njk
+++ b/docs/examples/cards/card-link-with-badge.njk
@@ -11,8 +11,10 @@ vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?pat
   title: 'Messages',
   href: '#',
   prefixIcon: 'messages',
+  linkAriaLabel: 'Messages, you have 4 unread messages',
   badgeLarge: {
     count: 4,
-    label: 'unread messages'
+    label: 'unread messages',
+    withCardLink: true
   }
 }) }}
diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss
index debc2fc..e58f53d 100644
--- a/src/components/badge/_badge.scss
+++ b/src/components/badge/_badge.scss
@@ -14,6 +14,7 @@
   color: $color_nhsuk-white;
   font-weight: bold;
   padding: 0 nhsuk-spacing(2);
+  margin: 0;
 
   @include mq($from: tablet) {
     padding: 0 12px;
diff --git a/src/components/badge/large/badge-large.njk b/src/components/badge/large/badge-large.njk
index 981655c..d5dcd2b 100644
--- a/src/components/badge/large/badge-large.njk
+++ b/src/components/badge/large/badge-large.njk
@@ -1,5 +1,7 @@
+{% set cardLink = 'true' if params.withCardLink else 'null' %}
+
 {%- if params.count -%}
-<span class="nhsapp-badge">
+<p class="nhsapp-badge" aria-hidden="{{ true if params.withCardLink }}">
     <span class="nhsuk-u-visually-hidden">You have</span>
     {% if params.count > 9 %}
         9+
@@ -7,5 +9,5 @@
         {{ params.count }}
     {% endif %}
     <span class="nhsuk-u-visually-hidden">{{ params.label }}</span>
-</span>
+</p>
 {%- endif -%}
\ No newline at end of file
diff --git a/src/components/card/card.njk b/src/components/card/card.njk
index 8f19520..4629387 100644
--- a/src/components/card/card.njk
+++ b/src/components/card/card.njk
@@ -18,7 +18,7 @@
           {{ params.aboveContent.html | safe }}
         </div>
       {%- endif -%}
-      <a href="{{ params.href }}" class="nhsapp-card__link nhsuk-link--no-visited-state">
+      <a href="{{ params.href }}" class="nhsapp-card__link nhsuk-link--no-visited-state" aria-label="{{ params.linkAriaLabel }}">
         {{ params.title }}
       </a>
       {% if params.description %}