Control cookie message focus on accept or reject

nationalarchives · Sep 14, 2023 · e8ebf8d · e8ebf8d
1 parent b57fa57
commit e8ebf8d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- Focus on the confirmation message of the cookie banner once accepted or rejected
+
 ### Deprecated
 ### Removed
 ### Fixed

diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.mjs b/src/nationalarchives/components/cookie-banner/cookie-banner.mjs
@@ -56,6 +56,8 @@ export class CookieBanner {
     this.$prompt.setAttribute("hidden", true);
     this.complete();
     this.$acceptedMessage.removeAttribute("hidden");
+    this.$acceptedMessage.focus();
+    this.$acceptedMessage.setAttribute("tabindex", "-1");
     this.cookies.acceptAllPolicies();
     if (this.loadScriptsOnAccept) {
       this.loadScriptsOnAccept.split(",").forEach((script) => {
@@ -70,6 +72,8 @@ export class CookieBanner {
     this.$prompt.setAttribute("hidden", true);
     this.complete();
     this.$rejectedMessage.removeAttribute("hidden");
+    this.$rejectedMessage.focus();
+    this.$rejectedMessage.setAttribute("tabindex", "-1");
     this.cookies.rejectAllPolicies();
   }
 

diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.scss b/src/nationalarchives/components/cookie-banner/cookie-banner.scss
@@ -20,6 +20,10 @@
   }
 
   &__message {
+    &:focus {
+      outline: none !important;
+    }
+
     &--prompt {
     }
 

diff --git a/src/nationalarchives/components/cookie-banner/template.njk b/src/nationalarchives/components/cookie-banner/template.njk
@@ -29,7 +29,7 @@
         }) }}
       </div>
     </div>
-    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted" hidden>
+    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted" tabindex="0" hidden>
       <p>
         You have accepted optional cookies. You can change your cookie settings on the <a href="#">Cookies page</a>.
       </p>
@@ -43,7 +43,7 @@
         }) }}
       </div>
     </div>
-    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected" hidden>
+    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected" tabindex="0" hidden>
       <p>
         You have rejected optional cookies. You can change your cookie settings on the <a href="#">Cookies page</a>.
       </p>