badge with card link accessibility

nhsuk · Sep 4, 2024 · b31553d · b31553d
1 parent 9243b1b
commit b31553d
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -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
@@ -1,11 +1,13 @@
+{% 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+
     {% else %}
         {{ params.count }}
     {% endif %}
     <span class="nhsuk-u-visually-hidden">{{ params.label }}</span>
-</span>
+</p>
 {%- endif -%}
diff --git 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 %}