Hide items with hidden attribute instead of display style

alphagov · Feb 12, 2021 · 3f36902 · 3f36902
1 parent 7b2d261
commit 3f36902
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js b/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js
@@ -62,7 +62,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
     if (this.$module) {
-      this.$module.style.display = 'none'
+      this.$module.hidden = true
       window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     }
 
@@ -97,8 +97,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   CookieBanner.prototype.showConfirmationMessage = function () {
     this.$cookieBannerMainContent = document.querySelector('.gem-c-cookie-banner__wrapper')
 
-    this.$cookieBannerMainContent.style.display = 'none'
+    this.$cookieBannerMainContent.hidden = true
     this.$module.cookieBannerConfirmationMessage.style.display = 'block'
+    this.$module.cookieBannerConfirmationMessage.hidden = false
   }
 
   CookieBanner.prototype.isInCookiesPage = function () {

diff --git a/app/views/govuk_publishing_components/components/_cookie_banner.html.erb b/app/views/govuk_publishing_components/components/_cookie_banner.html.erb
@@ -72,7 +72,7 @@
     </div>
   </div>
 
-  <div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1">
+  <div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1" hidden>
     <p class="gem-c-cookie-banner__confirmation-message" role="alert"><%= confirmation_message %></p>
     <button class="gem-c-cookie-banner__hide-button" data-hide-cookie-banner="true" data-module="track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide</button>
   </div>