fix: markup Banner components as regions (#359)

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

@@ -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>
-
-