Merge pull request #2267 from alphagov/revert-cookie-banner-ie10-fix

Revert "Fix cookie banner issue (IE10)"
alphagov · Aug 12, 2021 · 70c9278 · 70c9278
2 parents 41bd820 + 859d2a4
commit 70c9278
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 * Fix track click link tracking ([PR #2265](https://github.com/alphagov/govuk_publishing_components/pull/2265))
 * Add language tag for Welsh link in public layout template ([PR #2258](https://github.com/alphagov/govuk_publishing_components/pull/2258))
+* Revert "Fix cookie banner issue (IE10)" ([PR #2267](https://github.com/alphagov/govuk_publishing_components/pull/2267))
 
 # 25.3.0
 

diff --git a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js b/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js
@@ -27,11 +27,13 @@ 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)
     }
 
@@ -44,7 +46,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('cookies_preferences_set') !== 'true')
 
       if (shouldHaveCookieMessage) {
-        this.$module.removeAttribute('hidden')
+        this.$module.style.display = 'block'
 
         // Set the default consent cookie if it isn't already present
         if (!window.GOVUK.cookie('cookies_policy')) {
@@ -53,16 +55,17 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
         window.GOVUK.deleteUnconsentedCookies()
       } else {
-        this.$module.setAttribute('hidden', '')
+        this.$module.style.display = 'none'
       }
     } else {
-      this.$module.setAttribute('hidden', '')
+      this.$module.style.display = 'none'
     }
   }
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
     if (this.$module) {
-      this.$module.setAttribute('hidden', '')
+      this.$module.hidden = true
+      this.$module.style.display = 'none'
       window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     }
 
@@ -98,8 +101,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   CookieBanner.prototype.showConfirmationMessage = function () {
     this.$cookieBannerMainContent = document.querySelector('.js-banner-wrapper')
 
-    this.$cookieBannerMainContent.setAttribute('hidden', '')
-    this.$module.cookieBannerConfirmationMessage.removeAttribute('hidden')
+    this.$cookieBannerMainContent.hidden = true
+    this.$module.cookieBannerConfirmationMessage.style.display = 'block'
+    this.$module.cookieBannerConfirmationMessage.hidden = false
   }
 
   CookieBanner.prototype.isInCookiesPage = function () {

diff --git a/app/assets/stylesheets/component_guide/application.scss b/app/assets/stylesheets/component_guide/application.scss
@@ -499,9 +499,3 @@ $code-delete-bg: #fadddd;
   top: 0;
   background: govuk-colour("white");
 }
-
-.gem-c-cookie-banner[hidden] {
-  .js-enabled & {
-    display: block;
-  }
-}
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss b/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
@@ -1,10 +1,9 @@
 @import "govuk/components/cookie-banner/cookie-banner";
 $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 
-.gem-c-cookie-banner[hidden] {
-  display: block; // shown with JS, always on for non-JS
-  .js-enabled & {
-    display: none;
+.js-enabled {
+  .gem-c-cookie-banner {
+    display: none; // shown with JS, always on for non-JS
   }
 }
 
@@ -15,13 +14,9 @@ $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[hidden] {
+.gem-c-cookie-banner__confirmation {
   display: none;
   position: relative;
   padding: govuk-spacing(1);

diff --git a/app/views/govuk_publishing_components/components/_cookie_banner.html.erb b/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 hidden>
+<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
   <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">

diff --git a/spec/javascripts/components/cookie-banner-spec.js b/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="" hidden>' +
+    '<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 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">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>' +
+            '<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>' +
             '<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).hasAttribute('hidden')).toEqual(true)
+    expect(element).toBeHidden()
   })
 
   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).hasAttribute('hidden')).toEqual(true)
+    expect(element).toBeHidden()
     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).hasAttribute('hidden')).toEqual(true)
+      expect(element).toBeHidden()
     })
   })
 })