Move header tag outside of header component

- Change a Notification Banner test that created a second banner role, as this created an accessibility failure with the header always being present in the template
alphagov · Jun 19, 2024 · c9b24e9 · c9b24e9
1 parent a8bffe2
commit c9b24e9
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/header/template.njk b/packages/govuk-frontend/src/govuk/components/header/template.njk
@@ -34,7 +34,7 @@
 </svg>
 {% endset -%}
 
-<header class="govuk-header {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-header"
+<div class="govuk-header {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-header"
   {{- govukAttributes(params.attributes) }}>
   <div class="govuk-header__container {{ params.containerClasses | default("govuk-width-container", true) }}">
     <div class="govuk-header__logo">
@@ -93,4 +93,4 @@
     </div>
   {% endif %}
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.yaml b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.yaml
@@ -178,7 +178,7 @@ examples:
   - name: custom role
     hidden: true
     options:
-      role: banner
+      role: dialog
       text: This publication was withdrawn on 7 March 2014.
 
   - name: classes

diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/template.test.js b/packages/govuk-frontend/src/govuk/components/notification-banner/template.test.js
@@ -95,7 +95,7 @@ describe('Notification-banner', () => {
       const $ = render('notification-banner', examples['custom role'])
       const $component = $('.govuk-notification-banner')
 
-      expect($component.attr('role')).toBe('banner')
+      expect($component.attr('role')).toBe('dialog')
     })
 
     it('renders aria-labelledby attribute matching the title id when role overridden to region', () => {

diff --git a/packages/govuk-frontend/src/govuk/template.njk b/packages/govuk-frontend/src/govuk/template.njk
@@ -36,9 +36,11 @@
       }) }}
     {% endblock %}
 
+    <header>
     {% block header %}
       {{ govukHeader({}) }}
     {% endblock %}
+    </header>
 
     {% block main %}
       <div class="govuk-width-container {%- if containerClasses %} {{ containerClasses }}{% endif %}">