Add an aria-label and role to the cookie banner

x-govuk · Feb 17, 2021 · 5681ba0 · 5681ba0
1 parent c703e53
commit 5681ba0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/app/components/govuk_component/cookie_banner.html.erb b/app/components/govuk_component/cookie_banner.html.erb
@@ -1,4 +1,4 @@
-<%= tag.div(class: classes, **html_attributes) do %>
+<%= tag.div(class: classes, role: "region", aria: { label: aria_label }, **html_attributes) do %>
   <div class="govuk-cookie-banner__message govuk-width-container">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">

diff --git a/app/components/govuk_component/cookie_banner.rb b/app/components/govuk_component/cookie_banner.rb
@@ -1,12 +1,13 @@
 class GovukComponent::CookieBanner < GovukComponent::Base
   with_content_areas :body, :actions
 
-  attr_accessor :title
+  attr_accessor :title, :aria_label
 
-  def initialize(title: nil, classes: [], html_attributes: {})
+  def initialize(title: nil, aria_label: "Cookie banner", classes: [], html_attributes: {})
     super(classes: classes, html_attributes: html_attributes)
 
-    @title = title
+    @title      = title
+    @aria_label = aria_label
   end
 
 private

diff --git a/spec/components/govuk_component/cookie_banner_spec.rb b/spec/components/govuk_component/cookie_banner_spec.rb
@@ -42,6 +42,15 @@
     end
   end
 
+  context "custom aria labels" do
+    let(:aria_label) { "Cookie section" }
+    let(:kwargs) { { aria_label: aria_label } }
+
+    specify "sets the aria-label correctly" do
+      expect(page).to have_css(%(div.govuk-cookie-banner[aria-label="#{aria_label}"]))
+    end
+  end
+
   context "when there is no title" do
     let(:kwargs) { {} }