From 2034532b5ad7f43aeeb7a65f4f7de264a97cc94a Mon Sep 17 00:00:00 2001
From: Edward Scull <168075059+edwardscull@users.noreply.github.com>
Date: Tue, 10 Sep 2024 09:42:29 +0100
Subject: [PATCH] Badge with card link accessibility (#141)

* badge with card link accessibility fix
* add params classes to all components
---
 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-group.njk             |  4 +++-
 src/components/card/card.njk                   | 13 +++++++++----
 src/components/timeline/timeline.njk           |  3 ++-
 src/styles/section-heading/section-heading.njk |  3 ++-
 7 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/docs/examples/cards/card-link-with-badge.njk b/docs/examples/cards/card-link-with-badge.njk
index 2c2f97e..c171fbd 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',
+    ariaHidden: 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..5f9d53b 100644
--- a/src/components/badge/large/badge-large.njk
+++ b/src/components/badge/large/badge-large.njk
@@ -1,5 +1,7 @@
 {%- if params.count -%}
-<span class="nhsapp-badge">
+<p class="nhsapp-badge
+{{ params.classes if params.classes }}" 
+{%- if params.ariaHidden %} aria-hidden="{{ params.ariaHidden }}"{% endif %}>
     <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-group.njk b/src/components/card/card-group.njk
index 229c808..37fd745 100644
--- a/src/components/card/card-group.njk
+++ b/src/components/card/card-group.njk
@@ -2,12 +2,14 @@
 
 {% from "./macro.njk" import nhsappCard %}
 
-<ol class="nhsapp-cards {{ stackedClass }}">
+<ol class="nhsapp-cards {{ stackedClass }}
+{{ params.classes if params.classes }}">
   {% for cardItem in params.cards %}
     {{ nhsappCard({
       title: cardItem.title,
       href: cardItem.href,
       html: cardItem.html,
+      classes: cardItem.classes,
       aboveContent: cardItem.aboveContent,
       description: cardItem.description,
       badgeLarge: cardItem.badgeLarge,
diff --git a/src/components/card/card.njk b/src/components/card/card.njk
index 13988c7..7fa55a3 100644
--- a/src/components/card/card.njk
+++ b/src/components/card/card.njk
@@ -4,9 +4,11 @@
 {% set hasBadgeLarge = true if params.badgeLarge.count > 1 %}
 
 {%- if params.isListItem -%}
-  <li class="nhsapp-card">
+  <li class="nhsapp-card 
+  {{ params.classes if params.classes }}">
 {%- else -%}
-  <div class="nhsapp-card">
+  <div class="nhsapp-card 
+  {{ params.classes if params.classes }}">
 {%- endif -%}
   <div class="nhsapp-card__container">
     {%- if params.prefixIcon -%}
@@ -18,7 +20,8 @@
           {{ 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" 
+      {%- if params.linkAriaLabel %} aria-label="{{ params.linkAriaLabel }}" {% endif %}>
         {{ params.title }}
       </a>
       {% if params.description %}
@@ -32,7 +35,9 @@
     {% if hasBadgeLarge %}
       {{ nhsappBadgeLarge({
         count: params.badgeLarge.count,
-        label: params.badgeLarge.label
+        label: params.badgeLarge.label,
+        classes: params.badgeLarge.classes,
+        ariaHidden: params.badgeLarge.ariaHidden
       }) }}
     {% endif %}
     {{ nhsappIcon('chevronRight') }}
diff --git a/src/components/timeline/timeline.njk b/src/components/timeline/timeline.njk
index 7678adc..f579975 100644
--- a/src/components/timeline/timeline.njk
+++ b/src/components/timeline/timeline.njk
@@ -24,7 +24,8 @@
   </li>
 {% endmacro %}
 
-<ol class="nhsapp-timeline">
+<ol class="nhsapp-timeline 
+{{ params.classes if params.classes }}">
   {% for item in params.items %}
     {% if item %}{{ _timelineItem(params, item) }}{% endif %}
   {% endfor %}
diff --git a/src/styles/section-heading/section-heading.njk b/src/styles/section-heading/section-heading.njk
index 7624d79..a9cf68a 100644
--- a/src/styles/section-heading/section-heading.njk
+++ b/src/styles/section-heading/section-heading.njk
@@ -1,6 +1,7 @@
 {% set subheadingClass = 'nhsuk-u-margin-bottom-3' if params.subheadingText else '' %}
 
-<div class="nhsapp-section-heading">
+<div class="nhsapp-section-heading 
+{{ params.classes if params.classes }}">
   <h2 class="nhsuk-heading-s {{ subheadingClass }}">
     {{ params.headingText }}
   </h2>