Fix cookie banner issue (IE10)

It seems that IE10 does not support the hidden attribute. This is
causing some issues with the cookie banner script: when the confirmation
banner is visible (upon rejecting/accepting cookies), the cookie choice
panel should disappear, which does not happen in IE10.
This fixes the issue by using CSS to hide elements accordingly when the
hidden attribute is present (as opposed to toggling display with JS).
Additionally, switch from using property dot notation to set hidden to
true/false, to using setAttribute because even though the former worked
in all major modern browsers, IE10 seemed to ignore it. This is perhaps
due to the distinction between properties and attributes.

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+# Unreleased
+
+* Fix cookie banner issue (IE10) ([PR #2231](https://github.com/alphagov/govuk_publishing_components/pull/2231))
+
 # 25.2.3
 
 * Fix final issues with tracking on super nav header ([PR #2256](https://github.com/alphagov/govuk_publishing_components/pull/2256))

app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -27,13 +27,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)
     }
 
@@ -46,7 +44,7 @@ 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')) {
@@ -55,17 +53,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
         window.GOVUK.deleteUnconsentedCookies()
       } else {
-        this.$module.style.display = 'none'
+        this.$module.setAttribute('hidden', '')
       }
     } else {
-      this.$module.style.display = 'none'
+      this.$module.setAttribute('hidden', '')
     }
   }
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
     if (this.$module) {
-      this.$module.hidden = true
-      this.$module.style.display = 'none'
+      this.$module.setAttribute('hidden', '')
       window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     }
 
@@ -101,9 +98,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   CookieBanner.prototype.showConfirmationMessage = function () {
     this.$cookieBannerMainContent = document.querySelector('.js-banner-wrapper')
 
-    this.$cookieBannerMainContent.hidden = true
-    this.$module.cookieBannerConfirmationMessage.style.display = 'block'
-    this.$module.cookieBannerConfirmationMessage.hidden = false
+    this.$cookieBannerMainContent.setAttribute('hidden', '')
+    this.$module.cookieBannerConfirmationMessage.removeAttribute('hidden')
   }
 
   CookieBanner.prototype.isInCookiesPage = function () {

app/assets/stylesheets/component_guide/application.scss

@@ -499,3 +499,9 @@ $code-delete-bg: #fadddd;
   top: 0;
   background: govuk-colour("white");
 }
+
+.gem-c-cookie-banner[hidden] {
+  .js-enabled & {
+    display: block;
+  }
+}

app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss

@@ -1,9 +1,10 @@
 @import "govuk/components/cookie-banner/cookie-banner";
 $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 
-.js-enabled {
-  .gem-c-cookie-banner {
-    display: none; // shown with JS, always on for non-JS
+.gem-c-cookie-banner[hidden] {
+  display: block; // shown with JS, always on for non-JS
+  .js-enabled & {
+    display: none;
   }
 }
 
@@ -14,9 +15,13 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 // can't be used without js so implement there
 .gem-c-cookie-banner .gem-c-button {
   display: none;
+
+  .js-enabled & {
+    display: block;
+  }
 }
 
-.gem-c-cookie-banner__confirmation {
+.gem-c-cookie-banner__confirmation[hidden] {
   display: none;
   position: relative;
   padding: govuk-spacing(1);

app/views/govuk_publishing_components/components/_cookie_banner.html.erb

@@ -29,7 +29,7 @@
   css_classes = %w(gem-c-cookie-banner govuk-clearfix)
   css_classes << "gem-c-cookie-banner--services" if services_cookies
 %>
-<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
+<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet hidden>
   <div class="govuk-cookie-banner js-banner-wrapper" role="region" aria-label="<%= title %>">
     <div class="gem-c-cookie-banner__message govuk-cookie-banner__message govuk-width-container">
       <div class="govuk-grid-row">

spec/javascripts/components/cookie-banner-spec.js

@@ -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" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="" style="display: block;">' +
+    '<div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="" hidden>' +
       '<div class="govuk-cookie-banner js-banner-wrapper" role="region" aria-label="Cookies on GOV.UK">' +
         '<div class="gem-c-cookie-banner__message govuk-cookie-banner__message govuk-width-container govuk-body">' +
           '<div class="govuk-grid-row">' +
@@ -28,13 +28,13 @@ describe('Cookie banner', function () {
             '</div>' +
           '</div>' +
           '<div class="govuk-button-group">' +
-            '<button class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-accept-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner accepted" data-cookie-types="all" style="display: block;">Accept additional cookies</button>' +
-            '<button class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-reject-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner rejected" style="display: block;">Reject additional cookies</button>' +
+            '<button class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-accept-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner accepted" data-cookie-types="all">Accept additional cookies</button>' +
+            '<button class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-reject-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner rejected">Reject additional cookies</button>' +
             '<a class="govuk-link" href="/help/cookies">View cookies</a>' +
           '</div>' +
         '</div>' +
       '</div>' +
-      '<div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1" hidden="">' +
+      '<div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1" hidden>' +
         '<p class="gem-c-cookie-banner__confirmation-message" role="alert">You can <a class="govuk-link" href="/help/cookies" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Cookie banner settings clicked from confirmation">change your cookie settings</a> at any time.</p>' +
         '<div class="govuk-button-group">' +
           '<button class="gem-c-cookie-banner__hide-button govuk-button" data-hide-cookie-banner="true" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide this message</button>' +
@@ -88,7 +88,7 @@ describe('Cookie banner', function () {
     var element = document.querySelector('[data-module="cookie-banner"]')
     new GOVUK.Modules.CookieBanner(element).init()
 
-    expect(element).toBeHidden()
+    expect((element).hasAttribute('hidden')).toEqual(true)
   })
 
   it('sets a default consent cookie', function () {
@@ -182,7 +182,7 @@ describe('Cookie banner', function () {
     var link = document.querySelector('button[data-hide-cookie-banner="true"]')
     link.dispatchEvent(new window.Event('click'))
 
-    expect(element).toBeHidden()
+    expect((element).hasAttribute('hidden')).toEqual(true)
     expect(GOVUK.getCookie('cookies_preferences_set')).toBeTruthy()
   })
 
@@ -201,7 +201,7 @@ describe('Cookie banner', function () {
     it('should hide the cookie banner', function () {
       var element = document.querySelector('[data-module="cookie-banner"]')
       new GOVUK.Modules.CookieBanner(element).init()
-      expect(element).toBeHidden()
+      expect((element).hasAttribute('hidden')).toEqual(true)
     })
   })
 })