Badge with card link accessibility

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

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;

src/components/badge/large/badge-large.njk

@@ -1,11 +1,13 @@
 {%- 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+
     {% else %}
         {{ params.count }}
     {% endif %}
     <span class="nhsuk-u-visually-hidden">{{ params.label }}</span>
-</span>
+</p>
 {%- endif -%}

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,

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') }}

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 %}

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>