Merge pull request #2973 from alphagov/update-emergency-banner

Use section for emergency banner

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