@vodafone_de/brix-components 17.1.0 → 17.1.1

package/dist/components/ConsentMessage/index.js

@@ -19,7 +19,7 @@ import Heading from "../Heading/index.js";
 import { h as headingAlignCenter } from "../../props-GrMT6XLD.js";
 import { t as tertiaryAppearance } from "../../ButtonAppearances-BEMZJMeh.js";
 import { t as textHeadingXs } from "../../HeadingSize-O__w72MO.js";
-import { notifyConsentChange } from "../../hooks/useThirdPartyConsent/index.js";
+import { requestConsentFocus, notifyConsentChange } from "../../hooks/useThirdPartyConsent/index.js";
 const ConsentMessageBackgroundStyled = styled.div.withConfig({
   displayName: "ConsentMessageBackgroundStyled",
   componentId: "sc-gbn604-0"
@@ -120,13 +120,15 @@ const ConsentMessage = ({
       (window._dfq || (window._dfq = [])).push(["consent show", {
         page: "settings",
         callback: (result) => {
-          var _a, _b;
+          var _a;
+          const consentDenied = false === result.permissions.externalContent;
+          if (!consentDenied) {
+            requestConsentFocus(focusOnConsent);
+          }
           notifyConsentChange();
-          if (false === result.permissions.externalContent) {
+          if (consentDenied) {
             (_a = document.getElementById(buttonId)) == null ? void 0 : _a.focus();
-            return;
           }
-          (_b = document.getElementById(focusOnConsent)) == null ? void 0 : _b.focus();
         }
       }]);
     } catch (e) {

package/dist/components/ConsentMessage/props.d.ts

@@ -29,7 +29,8 @@ export interface ConsentMessageProps extends BrixComponentProps, Omit<HTMLAttrib
      */
     button: string;
     /**
-     * CSS selector or ID of the element to focus after consent is granted.
+     * ID of the element that receives focus after consent is granted.
+     * Focus moves as soon as that element is rendered.
      */
     focusOnConsent: string;
     /**

package/dist/components/GoogleMap/index.js

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import ConsentMessage from "../ConsentMessage/index.js";
 import { S as ScreenreaderOnly } from "../../index-Dgu9iIhb.js";
 import { s as spacingMd } from "../../Spacing-Dj-qX3Z5.js";
-import { useThirdPartyConsent } from "../../hooks/useThirdPartyConsent/index.js";
+import { useThirdPartyConsent, useConsentFocus } from "../../hooks/useThirdPartyConsent/index.js";
 import styled from "styled-components";
 import { v as viewport } from "../../index-CG4uiVbZ.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
@@ -95,6 +95,7 @@ const GoogleMap = ({
   const [map, setMap] = useState(null);
   const id = `maps-${props.uid}`;
   const screenreaderId = `screenreader-${props.uid}`;
+  useConsentFocus(screenreaderId, consent);
   children = children || defaultBasicMap;
   useEffect(() => {
     if (!map) {

package/dist/components/YouTubeVideo/index.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import ConsentMessage from "../ConsentMessage/index.js";
 import { S as ScreenreaderOnly } from "../../index-Dgu9iIhb.js";
-import { useThirdPartyConsent } from "../../hooks/useThirdPartyConsent/index.js";
+import { useThirdPartyConsent, useConsentFocus } from "../../hooks/useThirdPartyConsent/index.js";
 import styled from "styled-components";
 import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
@@ -80,6 +80,7 @@ const YouTubeVideo = ({
 }) => {
   const consent = useThirdPartyConsent();
   const id = `youtube-${props.uid}`;
+  useConsentFocus(id, consent);
   return /* @__PURE__ */ jsx(YouTubeVideoStyled, { ...props, roundedCorners, children: !consent ? /* @__PURE__ */ jsx(ConsentMessage, { ...consentMessage, focusOnConsent: id, variant: consentVariantVideo }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ScreenreaderOnly, { id, tabIndex: -1, children: consentSuccessText }),
     /* @__PURE__ */ jsx(YouTubeVideoIframeStyled, { src: getYouTubeUrl({

package/dist/hooks/useThirdPartyConsent/index.d.ts

@@ -21,6 +21,17 @@ export declare const checkThirdPartyConsentStorage: () => boolean;
  * This should be called whenever the consent storage is updated.
  */
 export declare const notifyConsentChange: () => void;
+/**
+ * Requests focus for `targetId`, either right away or once `useConsentFocus` sees it mounted.
+ * Supersedes a request that is still pending.
+ */
+export declare const requestConsentFocus: (targetId: string) => void;
+/**
+ * Completes the focus handover started by a ConsentMessage once the consented content is
+ * mounted, so focus stays inside the surrounding context (for example a Tray). Without a
+ * pending request nothing happens, so an already consented page load never moves focus.
+ */
+export declare const useConsentFocus: (targetId: string, consent: boolean) => void;
 /**
  * The useThirdPartyConsent hook is a custom React Hook designed to
  * track and respond to changes in a user's third-party consent status,

package/dist/hooks/useThirdPartyConsent/index.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 const CONSENT_CHANGE_EVENT = "brix-consent-change";
 const consentStorageItemName = "adv_fcData";
 const consentStorageFeature = "permissions";
@@ -31,6 +31,38 @@ const checkThirdPartyConsentStorage = () => {
 const notifyConsentChange = () => {
   window.dispatchEvent(new CustomEvent(CONSENT_CHANGE_EVENT));
 };
+let requestedConsentFocusId = null;
+const focusRequestedConsentTarget = (targetId) => {
+  const target = document.getElementById(targetId);
+  if (!target) {
+    return;
+  }
+  requestedConsentFocusId = null;
+  target.focus();
+};
+const requestConsentFocus = (targetId) => {
+  requestedConsentFocusId = targetId;
+  focusRequestedConsentTarget(targetId);
+};
+const clearConsentFocusRequest = () => {
+  requestedConsentFocusId = null;
+};
+const useConsentFocus = (targetId, consent) => {
+  useEffect(() => {
+    if (!consent) {
+      return;
+    }
+    if (requestedConsentFocusId !== targetId) {
+      return;
+    }
+    focusRequestedConsentTarget(targetId);
+    return () => {
+      if (requestedConsentFocusId === targetId) {
+        clearConsentFocusRequest();
+      }
+    };
+  }, [consent, targetId]);
+};
 const useThirdPartyConsent = () => {
   const [consent, setConsent] = useState(false);
   useEffect(() => {
@@ -54,5 +86,7 @@ export {
   consentStorageItemName,
   consentStorageKey,
   notifyConsentChange,
+  requestConsentFocus,
+  useConsentFocus,
   useThirdPartyConsent
 };

package/dist/index.js

@@ -117,7 +117,7 @@ import { translateLayoutPropsToCss } from "./foundations/layout/index.js";
 import { gridColSpans } from "./foundations/GridConfig/index.js";
 import { GlobalStyle, cssReset } from "./foundations/GlobalStyle/index.js";
 import { u } from "./index-DlENLqPq.js";
-import { CONSENT_CHANGE_EVENT, checkThirdPartyConsentStorage, consentStorageFeature, consentStorageItemName, consentStorageKey, notifyConsentChange, useThirdPartyConsent } from "./hooks/useThirdPartyConsent/index.js";
+import { CONSENT_CHANGE_EVENT, checkThirdPartyConsentStorage, consentStorageFeature, consentStorageItemName, consentStorageKey, notifyConsentChange, requestConsentFocus, useConsentFocus, useThirdPartyConsent } from "./hooks/useThirdPartyConsent/index.js";
 import { useReducedMotion } from "./hooks/useReducedMotion/index.js";
 import { DefaultPicture, PictureContext, PictureProvider, filterAspectRatioFromSources, filterImagePropsToPictureComponentImageProps, usePictureComponent } from "./hooks/usePictureComponent/index.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/index.js";
@@ -539,6 +539,7 @@ export {
   i12 as priceSizes,
   p2 as primaryBadgeAppearance,
   reducedMotionQuery,
+  requestConsentFocus,
   r as richTextContentfulTags,
   s2 as secondaryBadgeAppearance,
   c5 as successBadgeAppearance,
@@ -553,6 +554,7 @@ export {
   t3 as tertiaryBadgeAppearance,
   t7 as textListTags,
   translateLayoutPropsToCss,
+  useConsentFocus,
   useFocusWithin,
   useForcedColors,
   useImageComponent,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vodafone_de/brix-components",
   "description": "Brix is the digital design system for vodafone.de",
-  "version": "17.1.0",
+  "version": "17.1.1",
   "exports": {
     "./package.json": "./package.json",
     ".": {