From a0eee16f7aa2a426fb7dd6d51310881bcc765944 Mon Sep 17 00:00:00 2001
From: Patrick Cartlidge <patrickcartlidge@gmail.com>
Date: Tue, 20 Sep 2022 14:58:00 +0100
Subject: [PATCH] Use section for emergency banner

When the emergency banner was deployed on GOV.UK, some changes were made
based on the feedback from an accessibility specialist. These changes
involved removing the role attribute from the parent div and changing
the element of the parent div to a section. This is to avoid any
accidental duplication of roles on any page of GOV.UK. In accordance
with this change, the aria-label has been changed to aria-labelledby
instead. Have also added a test to make sure the label is being applied
correctly.

Co-authored-by: Max Froumentin <maxf@users.noreply.github.com>
---
 CHANGELOG.md                                              | 1 +
 .../components/_emergency_banner.html.erb                 | 4 ++--
 spec/components/emergency_banner_spec.rb                  | 8 ++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5bd2406f18..693ec47ed5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Add ecommerce tracking documentation ([PR #2997](https://github.com/alphagov/govuk_publishing_components/pull/2997))
+* Use section for emergency banner ([PR #2973](https://github.com/alphagov/govuk_publishing_components/pull/2973))
 
 ## 31.0.0
 
diff --git a/app/views/govuk_publishing_components/components/_emergency_banner.html.erb b/app/views/govuk_publishing_components/components/_emergency_banner.html.erb
index 83a0068ae7..d718fcd80d 100644
--- a/app/views/govuk_publishing_components/components/_emergency_banner.html.erb
+++ b/app/views/govuk_publishing_components/components/_emergency_banner.html.erb
@@ -28,11 +28,11 @@
 
 %>
 
-<%= content_tag('div', class: banner_classes, "aria-label": "emergency banner", "role": "region", "data-nosnippet": true ) do %>
+<%= content_tag('section', class: banner_classes, "aria-labelledby": "emergency-banner-heading", "data-nosnippet": true ) do %>
   <div class="govuk-width-container">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
-        <%= content_tag('h2', class: heading_classes) do %>
+        <%= content_tag('h2', id: "emergency-banner-heading", class: heading_classes) do %>
           <%= heading %>
         <% end %>
         <% if short_description %>
diff --git a/spec/components/emergency_banner_spec.rb b/spec/components/emergency_banner_spec.rb
index 43a53942de..cff6875ab4 100644
--- a/spec/components/emergency_banner_spec.rb
+++ b/spec/components/emergency_banner_spec.rb
@@ -69,4 +69,12 @@ def emergency_banner_attributes(options = {})
       render_component(emergency_banner_attributes({ campaign_class: "national-emergence" }))
     end
   end
+
+  it "is labelled by the correct id" do
+    render_component(emergency_banner_attributes({ campaign_class: "local-emergency", link_text: "Link Text", link: "https://www.gov.uk" }))
+    # get the id of the header that is used for labelling
+    id = css_select(".gem-c-emergency-banner h2")[0][:id]
+    # check that the aria-labelledby points to that header using the header id
+    assert_select(".gem-c-emergency-banner[aria-labelledby='#{id}']")
+  end
 end