Skip to content

Commit

Permalink
Merge pull request #3830 from alphagov/hide-cookie-banner-js-disabled
Browse files Browse the repository at this point in the history
Hide our cookie banner when JS is disabled
AshGDS authored Feb 5, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 4b40e8d + c5f6a41 commit 5e02f61
Showing 6 changed files with 30 additions and 28 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@
* Allow GA4 link tracker to track to multiple child classes ([PR #3835](https://github.com/alphagov/govuk_publishing_components/pull/3835))
* Add GA4 link tracking to govspeak callout links ([PR #3843](https://github.com/alphagov/govuk_publishing_components/pull/3843))
* Allow inputs to be exempt from GA4 form tracker [REDACT] code ([PR #3848](https://github.com/alphagov/govuk_publishing_components/pull/3848))
* Hide our cookie banner when JS is disabled ([PR #3830](https://github.com/alphagov/govuk_publishing_components/pull/3830))

## 37.2.4

Original file line number Diff line number Diff line change
@@ -26,13 +26,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};

this.$acceptCookiesButton = this.$module.querySelector('button[data-accept-cookies]')
if (this.$acceptCookiesButton) {
this.$acceptCookiesButton.style.display = 'block'
this.$acceptCookiesButton.addEventListener('click', this.$module.setCookieConsent)
}

this.$rejectCookiesButton = this.$module.querySelector('button[data-reject-cookies]')
if (this.$rejectCookiesButton) {
this.$rejectCookiesButton.style.display = 'block'
this.$rejectCookiesButton.addEventListener('click', this.$module.rejectCookieConsent)
}

@@ -45,26 +43,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('cookies_preferences_set') !== 'true')

if (shouldHaveCookieMessage) {
this.$module.style.display = 'block'
this.$module.removeAttribute('hidden')

// Set the default consent cookie if it isn't already present
if (!window.GOVUK.cookie('cookies_policy')) {
window.GOVUK.setDefaultConsentCookie()
}

window.GOVUK.deleteUnconsentedCookies()
} else {
this.$module.style.display = 'none'
}
} else {
this.$module.style.display = 'none'
}
}

CookieBanner.prototype.hideCookieMessage = function (event) {
if (this.$module) {
this.$module.hidden = true
this.$module.style.display = 'none'
window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
}

Original file line number Diff line number Diff line change
@@ -1,25 +1,14 @@
@import "govuk_publishing_components/individual_component_support";
@import "govuk/components/cookie-banner/cookie-banner";

.gem-c-cookie-banner .govuk-button-group[hidden] {
display: none;
}

.govuk-cookie-banner .govuk-cookie-banner__heading[hidden] {
display: none;
}

.js-enabled {
.gem-c-cookie-banner {
display: none; // shown with JS, always on for non-JS
.gem-c-cookie-banner {
[hidden],
.govuk-button-group[hidden],
.govuk-cookie-banner__heading[hidden] {
display: none;
}
}

// can't be used without js so implement there
.gem-c-cookie-banner .gem-c-button {
display: none;
}

.gem-c-cookie-banner__confirmation {
// This element is focused using JavaScript so that it's being read out by screen readers
// for this reason we don't want to show the default outline or emphasise it visually using `govuk-focused-text`
Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@
disable_ga4 ||= false
%>

<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" data-nosnippet role="region" aria-label="<%= title %>">
<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" data-nosnippet role="region" aria-label="<%= title %>" hidden>
<div class="govuk-cookie-banner__message govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
name: Cookie banner
description: Help users manage their personal data by telling them when you store cookies on their device.
body: |
By default the cookie banner is shown to all users with just a link to the settings page. If JavaScript is on this is enhanced to show accept/reject buttons if preferences aren't set, or to hide the banner if they are.
By default the cookie banner is hidden. If JavaScript is enabled, the banner is displayed if cookie preferences are not set. The banner will stay hidden if cookie preferences are already set.
Setting `data-hide-cookie-banner="true"` on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
If the examples below are not showing the banner, make sure the `cookies_preferences_set` cookie is not present or is set to false.
If the examples below are not showing the banner, make sure JS is enabled, and the `cookies_preferences_set` cookie is not present or is set to false.
accessibility_criteria: |
Text in the cookie banner must be clear and unambiguous and should provide a way to dismiss the message.
shared_accessibility_criteria:
21 changes: 20 additions & 1 deletion spec/javascripts/components/cookie-banner-spec.js
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ describe('Cookie banner', function () {
container = document.createElement('div')

container.innerHTML =
'<div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix govuk-cookie-banner js-banner-wrapper" data-module="cookie-banner" data-nosnippet="" role="region" aria-label="Cookies on GOV.UK">' +
'<div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix govuk-cookie-banner js-banner-wrapper" data-module="cookie-banner" data-nosnippet="" role="region" aria-label="Cookies on GOV.UK" hidden>' +
'<div class="govuk-cookie-banner__message govuk-width-container">' +
'<div class="govuk-grid-row">' +
'<div class="govuk-grid-column-two-thirds">' +
@@ -94,6 +94,25 @@ describe('Cookie banner', function () {
expect(element).toBeHidden()
})

it('should have the hidden attribute by default, and remove it once the JS loads when cookies are not set', function () {
var element = document.querySelector('[data-module="cookie-banner"]')
expect(element.hasAttribute('hidden')).toEqual(true)
expect(element.offsetParent).toEqual(null)
new GOVUK.Modules.CookieBanner(element).init()
expect(element.hasAttribute('hidden')).toEqual(false)
expect(!!element.offsetParent).toEqual(true)
})

it('should have the hidden attribute by default, and leave it when cookies are set', function () {
GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
var element = document.querySelector('[data-module="cookie-banner"]')
expect(element.offsetParent).toEqual(null)
expect(element.hasAttribute('hidden')).toEqual(true)
new GOVUK.Modules.CookieBanner(element).init()
expect(element.offsetParent).toEqual(null)
expect(element.hasAttribute('hidden')).toEqual(true)
})

it('sets a default consent cookie', function () {
var element = document.querySelector('[data-module="cookie-banner"]')
new GOVUK.Modules.CookieBanner(element).init()

0 comments on commit 5e02f61

Please sign in to comment.