diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fe168b6..213ec265 100644 --- 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 index 1377adf3..48fd7b33 100644 --- 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 index 7a6219e3..a437eaed 100644 --- 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 index 7b89f829..84e9c5d9 100644 --- a/src/nationalarchives/components/cookie-banner/template.njk +++ b/src/nationalarchives/components/cookie-banner/template.njk @@ -29,7 +29,7 @@ }) }} -
-