Merge pull request #2192 from alphagov/cookie-banner-tweaks

Add data-nosnippet to prevent cookie banner text appearing in Google Search snippets

CHANGELOG.md

@@ -18,6 +18,7 @@ This was added in [pull request #2164: Enable cookie banner to set link styled a
 - [#2157: Use pointer cursor for 'Menu' button in header](https://github.com/alphagov/govuk-frontend/pull/2157) – thanks to [@MalcolmVonMoJ](https://github.com/MalcolmVonMoJ) for contributing this.
 - [#2171: Fix padding on GOV.UK logo affecting hover and focus states](https://github.com/alphagov/govuk-frontend/pull/2171)
 - [#2186: Fix display of warning text in Edge when Windows High Contrast Mode is enabled](https://github.com/alphagov/govuk-frontend/pull/2186)
+- [#2192: Add data-nosnippet to prevent cookie banner text appearing in Google Search snippets](https://github.com/alphagov/govuk-frontend/pull/2192)
 
 ## 3.11.0 (Feature release)
 

src/govuk/components/cookie-banner/README.md

@@ -0,0 +1,15 @@
+# Cookie banner
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the cookie banner component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/cookie-banner).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/cookie-banner/#options-default-cookie-banner-example) for details.

src/govuk/components/cookie-banner/template.njk

@@ -1,6 +1,6 @@
 {% from "../button/macro.njk" import govukButton -%}
 
-<div class="govuk-cookie-banner {{ params.classes if params.classes }}" role="region" aria-label="{{ params.ariaLabel | default("Cookie banner") }}"
+<div class="govuk-cookie-banner {{ params.classes if params.classes }}" data-nosnippet role="region" aria-label="{{ params.ariaLabel | default("Cookie banner") }}"
   {%- if params.hidden %} hidden{% endif %}
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
 

src/govuk/components/cookie-banner/template.test.js

@@ -248,6 +248,13 @@ describe('Cookie Banner', () => {
       const $actions = $('.govuk-cookie-banner__message[hidden]')
       expect($actions.length).toEqual(2)
     })
+
+    it('has a data-nosnippet attribute to hide it from search result snippets', () => {
+      const $ = render('cookie-banner', examples['client-side implementation'])
+
+      const $parentContainer = $('.govuk-cookie-banner')
+      expect($parentContainer.attr('data-nosnippet')).toEqual('')
+    })
   })
 
   describe('full cookie banner hidden', () => {