@justeattakeaway/pie-cookie-banner 1.10.21 → 1.11.0

package/dist/react.d.ts

@@ -102,6 +102,13 @@ export declare interface CookieBannerProps {
      * When false (default), links open in a new browser tab (`target="_blank"`).
      */
     openLinksInSameTab?: boolean;
+    /**
+     * When true, focus moves to the banner dialog when it is displayed on mount,
+     * so screen readers announce it. Only set this when the banner is opened
+     * in response to a user action; on initial page load focus must remain untouched.
+     * When false (default), the banner does not take focus on mount.
+     */
+    shouldFocusOnOpen?: boolean;
 }
 
 export declare const Country: {
@@ -176,14 +183,22 @@ declare class PieCookieBanner_2 extends PieElement implements CookieBannerProps
     country: string;
     language: string;
     openLinksInSameTab: boolean;
+    shouldFocusOnOpen: boolean;
     _preferencesNodes: NodeListOf<PieSwitch>;
+    private _bannerContainer;
     /**
      * Returns the target attribute value for external links based on the openLinksInSameTab prop.
      * - false (default): returns '_blank' (new tab)
      * - true: returns '_self' (same tab)
      */
     private get _linkTargetAttribute();
+    firstUpdated(): void;
     updated(changedProperties: PropertyValues<this>): Promise<void>;
+    /**
+     * Moves focus to the banner dialog container.
+     * The container uses tabindex="-1", so it is only focusable programmatically.
+     */
+    private _focusBanner;
     private _setLocaleBasedOnCountryAndLanguage;
     /**
      * Gets the locale string for the requested language and country.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-cookie-banner",
   "description": "PIE Design System Cookie Banner built using Web Components",
-  "version": "1.10.21",
+  "version": "1.11.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -49,19 +49,19 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.21.4",
+    "@justeattakeaway/pie-components-config": "0.21.5",
     "@justeattakeaway/pie-css": "1.9.1",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.11",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.12",
     "@justeattakeaway/pie-wrapper-react": "0.14.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.15.0",
-    "@justeattakeaway/pie-divider": "1.5.37",
-    "@justeattakeaway/pie-icon-button": "2.8.0",
-    "@justeattakeaway/pie-link": "1.5.8",
-    "@justeattakeaway/pie-modal": "1.27.14",
-    "@justeattakeaway/pie-switch": "2.7.6",
-    "@justeattakeaway/pie-webc-core": "22.0.0",
+    "@justeattakeaway/pie-button": "1.15.1",
+    "@justeattakeaway/pie-divider": "1.5.38",
+    "@justeattakeaway/pie-icon-button": "2.8.1",
+    "@justeattakeaway/pie-link": "1.5.9",
+    "@justeattakeaway/pie-modal": "1.27.15",
+    "@justeattakeaway/pie-switch": "2.7.7",
+    "@justeattakeaway/pie-webc-core": "22.0.1",
     "dompurify": "3.4.8"
   },
   "customElements": "custom-elements.json",

package/src/defs.ts

@@ -146,6 +146,14 @@ export interface CookieBannerProps {
      * When false (default), links open in a new browser tab (`target="_blank"`).
      */
     openLinksInSameTab?: boolean;
+
+    /**
+     * When true, focus moves to the banner dialog when it is displayed on mount,
+     * so screen readers announce it. Only set this when the banner is opened
+     * in response to a user action; on initial page load focus must remain untouched.
+     * When false (default), the banner does not take focus on mount.
+     */
+    shouldFocusOnOpen?: boolean;
 }
 
 /**
@@ -228,6 +236,7 @@ export const defaultProps: DefaultProps = {
     personalizedDescription: '',
     cookieTechnologiesLink: '',
     openLinksInSameTab: false,
+    shouldFocusOnOpen: false,
 };
 
 // Available locale files

package/src/index.ts

@@ -6,7 +6,7 @@ import {
 } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import {
-    property, state, queryAll,
+    property, state, query, queryAll,
 } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -92,9 +92,15 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
     @property({ type: Boolean })
     public openLinksInSameTab = defaultProps.openLinksInSameTab;
 
+    @property({ type: Boolean })
+    public shouldFocusOnOpen = defaultProps.shouldFocusOnOpen;
+
     @queryAll('pie-switch')
         _preferencesNodes!: NodeListOf<PieSwitch>;
 
+    @query('[data-test-id="pie-cookie-banner"]')
+    private _bannerContainer!: HTMLElement;
+
     /**
      * Returns the target attribute value for external links based on the openLinksInSameTab prop.
      * - false (default): returns '_blank' (new tab)
@@ -104,11 +110,31 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
         return this.openLinksInSameTab ? '_self' : '_blank';
     }
 
+    firstUpdated () {
+        // Only take focus on mount when the banner was opened by a user action
+        if (this.shouldFocusOnOpen && !this._isCookieBannerHidden) {
+            this._focusBanner();
+        }
+    }
+
     async updated (changedProperties: PropertyValues<this>) {
         // Re-fetch locale when country or language changes
         if (changedProperties.has('language') || changedProperties.has('country')) {
             await this._setLocaleBasedOnCountryAndLanguage(this.language, this.country);
         }
+
+        // Move focus to the banner whenever it reappears, so screen readers announce the dialog
+        if (changedProperties.get('_isCookieBannerHidden' as keyof PieCookieBanner) === true && !this._isCookieBannerHidden) {
+            this._focusBanner();
+        }
+    }
+
+    /**
+     * Moves focus to the banner dialog container.
+     * The container uses tabindex="-1", so it is only focusable programmatically.
+     */
+    private _focusBanner () : void {
+        this._bannerContainer?.focus();
     }
 
     // Dynamically import locale JSON based on country and language
@@ -342,10 +368,17 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
             @pie-modal-back="${this._displayCookieBanner}">
                 ${this.renderModalContent()}
         </pie-modal>
-        <aside data-test-id="pie-cookie-banner" class="c-cookieBanner" ?isCookieBannerHidden=${this._isCookieBannerHidden}>
-            <h2 class="c-cookieBanner-title">${this._localiseText('banner.title')}</h2>
+        <div
+            data-test-id="pie-cookie-banner"
+            class="c-cookieBanner"
+            role="dialog"
+            aria-labelledby="cookie-banner-title"
+            aria-describedby="cookie-banner-text"
+            tabindex="-1"
+            ?isCookieBannerHidden=${this._isCookieBannerHidden}>
+            <h2 id="cookie-banner-title" class="c-cookieBanner-title">${this._localiseText('banner.title')}</h2>
             <div class="c-cookieBanner-body" data-test-id="banner-description">
-                <p>${this._localiseRichText('banner.description')}</p>
+                <p id="cookie-banner-text">${this._localiseRichText('banner.description')}</p>
             </div>
 
             <div class="c-cookieBanner-actions">
@@ -374,7 +407,7 @@ export class PieCookieBanner extends PieElement implements CookieBannerProps {
                     ${this._localiseText('banner.cta.managePreferences')}
                 </pie-link>
             </div>
-        </aside>`;
+        </div>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite