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