From c5944ea4fe37f7dad1c6ae512783ab625a44ff97 Mon Sep 17 00:00:00 2001
From: Greg Tyler <greg.tyler@digital.justice.gov.uk>
Date: Tue, 17 May 2022 10:36:22 +0100
Subject: [PATCH] fix: markup Banner components as regions

Banner components are given the region role and an
appropriate label to identify them.

The label is taken from, in order or priority:
- The `iconFallbackText` label, if set
- The type of banner (e.g. "success", "warning", "information")
- The word "banner"

I also removed the visually-hidden insertion
`iconFallbackText` to avoid duplication: if provided, this is
now the region's label.
---
 src/moj/components/banner/template.njk | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/moj/components/banner/template.njk b/src/moj/components/banner/template.njk
index ed1cf0f46..9bf697ae8 100644
--- a/src/moj/components/banner/template.njk
+++ b/src/moj/components/banner/template.njk
@@ -1,4 +1,4 @@
-<div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} role="region" aria-label="{{ params.iconFallbackText | default(params.type) | default("banner") }}">
 
   {% if params.type == 'success' %}
     <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>
@@ -10,10 +10,7 @@
   {% endif %}
 
   <div class="moj-banner__message">
-    {% if params.iconFallbackText %}<span class="moj-banner__assistive">{{params.iconFallbackText}}</span>{% endif %}
     {{- params.html | safe if params.html else params.text -}}
   </div>
 
 </div>
-
-