Accessibility tweaks

Adds visually hidden text to the callout tag text to better explain what it is
Adds aria-hidden=true to brand tags under headings so that screenreaders don't read them out.

Author: domoscargin

src/components/footer/index.md

@@ -49,7 +49,7 @@ Make it clear whether content is available for re-use - and if it is, under what
 ### Update to refresh the GOV.UK brand
 
 <strong class="govuk-tag brand-tag-green">
-  Brand
+  Brand<span class="govuk-visually-hidden"> note</span>
 </strong>
 
 If you use the Nunjucks macro and page template across your service, you can enable the brand refresh by setting the page template’s `rebrand` option to `true`. This will automatically make all needed changes related to the brand refresh.

src/components/header/index.md

@@ -64,7 +64,7 @@ For guidance on how to plan your header and navigation, see the [Help users navi
 ### Update to refresh the GOV.UK brand
 
 <strong class="govuk-tag brand-tag-green">
-  Brand
+  Brand<span class="govuk-visually-hidden"> note</span>
 </strong>
 
 If you use the Nunjucks macro and page template across your service, you can enable the brand refresh by setting the page template’s `rebrand` option to `true`. This will automatically make all needed changes related to the brand refresh.

src/components/service-navigation/index.md

@@ -52,7 +52,7 @@ For guidance on how to plan your header and navigation, see the [Help users navi
 ### Update to refresh the GOV.UK brand
 
 <strong class="govuk-tag brand-tag-green">
-  Brand
+  Brand<span class="govuk-visually-hidden"> note</span>
 </strong>
 
 If you use the Nunjucks macro and page template across your service, you can enable the brand refresh by setting the page template’s `rebrand` option to `true`. This will automatically make all needed changes related to the brand refresh.
@@ -68,7 +68,7 @@ Apply a class `govuk-header--full-width-border` to the GOV.UK header.
 {{ example({ group: "components", item: "service-navigation", example: "with-govuk-header", html: true, nunjucks: true, open: false }) }}
 
 <strong class="govuk-tag brand-tag-green">
-  Brand
+  Brand<span class="govuk-visually-hidden"> note</span>
 </strong>
 
 You do not need to change the bottom border of the updated GOV.UK header component with the refreshed GOV.UK branding.

views/partials/_callout.njk

@@ -4,7 +4,7 @@
 {% macro callout(params) -%}
   {% set calloutContent -%}
     {{ govukTag({
-      text: params.tagText,
+      html: params.tagText + '<span class="govuk-visually-hidden"> note</span>',
       classes: "app-callout__tag"
     }) }}
     {% if params.heading -%}