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 <[email protected]>

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
 

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

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