@seamly/web-ui 25.0.0 → 25.1.0

package/build/dist/lib/index.debug.js

@@ -14485,7 +14485,7 @@ class API {
     return {
       clientName: "@seamly/web-ui",
       clientVariant: this.#layoutMode,
-      clientVersion: "25.0.0",
+      clientVersion: "25.1.0",
       currentUrl: window.location.toString(),
       screenResolution: `${window.screen.width}x${window.screen.height}`,
       timezone: (0,_utils__WEBPACK_IMPORTED_MODULE_13__.getTimeZone)(),
@@ -16646,6 +16646,7 @@ const initialStoreState = {
   skiplinkTargetId: (0,lib_id__WEBPACK_IMPORTED_MODULE_10__.randomId)(),
   optionsButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_10__.randomId)(),
   headerCollapseButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_10__.randomId)(),
+  windowOpenButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_10__.randomId)(),
   serviceData: {},
   options: {
     features: {
@@ -19679,13 +19680,15 @@ const Conversation = () => {
       className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('chat__body'),
       children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("div", {
         className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('conversation__container'),
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__["default"], {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("ol", {
-          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('conversation'),
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__["default"], {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("div", {
           role: "log",
           "aria-label": t('chat.srLabel'),
-          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(_component_filter__WEBPACK_IMPORTED_MODULE_10__["default"], {
-            children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(Events, {})
-          }), debouncedIsLoading ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(_loader__WEBPACK_IMPORTED_MODULE_12__["default"], {}) : null, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(_entry_abort_transaction_button_abort_transaction_button__WEBPACK_IMPORTED_MODULE_9__["default"], {})]
+          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("ol", {
+            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('conversation'),
+            children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(_component_filter__WEBPACK_IMPORTED_MODULE_10__["default"], {
+              children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(Events, {})
+            }), debouncedIsLoading ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(_loader__WEBPACK_IMPORTED_MODULE_12__["default"], {}) : null, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(_entry_abort_transaction_button_abort_transaction_button__WEBPACK_IMPORTED_MODULE_9__["default"], {})]
+          })
         })]
       })
     })]
@@ -20569,7 +20572,7 @@ const ChoicePrompt = ({
       child.props = {
         ...child.props,
         event: subEvent,
-        descriptorId,
+        id: descriptorId,
         showTranslationToggle: false
       };
       return child;
@@ -23835,6 +23838,7 @@ const UploadToggle = () => {
           "aria-disabled": !showUploadButton,
           type: "button",
           onClick: showUploadButton ? onClickHandler : undefined,
+          tabIndex: !showUploadButton ? -1 : undefined,
           children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__["default"], {
             name: "file",
             size: "32",
@@ -24628,13 +24632,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var domains_app_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/app/hooks */ "./src/javascripts/core/domains/app/hooks.ts");
 /* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/hooks */ "./src/javascripts/core/domains/config/hooks.ts");
 /* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n/hooks */ "./src/javascripts/core/domains/i18n/hooks.ts");
-/* harmony import */ var domains_visibility_constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility/constants */ "./src/javascripts/core/domains/visibility/constants.ts");
-/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility/hooks */ "./src/javascripts/core/domains/visibility/hooks.ts");
-/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ "./src/javascripts/core/lib/css.ts");
-/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/compat */ "preact/compat");
-/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var ui_components_suggestions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/components/suggestions */ "./src/javascripts/core/ui/components/suggestions/index.tsx");
-/* harmony import */ var ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/component-helper-hooks */ "./src/javascripts/core/ui/hooks/component-helper-hooks.ts");
+/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility/hooks */ "./src/javascripts/core/domains/visibility/hooks.ts");
+/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/css */ "./src/javascripts/core/lib/css.ts");
+/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! preact/compat */ "preact/compat");
+/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var ui_components_suggestions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/components/suggestions */ "./src/javascripts/core/ui/components/suggestions/index.tsx");
+/* harmony import */ var ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/hooks/component-helper-hooks */ "./src/javascripts/core/ui/hooks/component-helper-hooks.ts");
+/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ "./src/javascripts/core/ui/hooks/focus-helper-hooks.ts");
 /* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ "./src/javascripts/core/ui/hooks/seamly-state-hooks.ts");
 /* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/hooks/utility-hooks */ "./src/javascripts/core/ui/hooks/utility-hooks.ts");
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
@@ -24651,15 +24655,16 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const Chat = (0,preact_compat__WEBPACK_IMPORTED_MODULE_7__.forwardRef)(({
+const Chat = (0,preact_compat__WEBPACK_IMPORTED_MODULE_6__.forwardRef)(({
   children,
   className: givenClassName = ''
 }, forwardedRef) => {
   const {
+    closeChat,
     isOpen,
-    isVisible,
-    setVisibility
-  } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();
+    isVisible
+  } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_4__.useVisibility)();
+  const focusWindowOpenButton = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__.useWindowOpenButtonFocusing)();
   const {
     namespace,
     layoutMode
@@ -24667,7 +24672,7 @@ const Chat = (0,preact_compat__WEBPACK_IMPORTED_MODULE_7__.forwardRef)(({
   const {
     isInline
   } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_10__.useSeamlyLayoutMode)();
-  const appContainerClassNames = (0,ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_9__.useSeamlyAppContainerClassNames)();
+  const appContainerClassNames = (0,ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_8__.useSeamlyAppContainerClassNames)();
   const headingId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_11__.useGeneratedId)();
   const userHasResponded = (0,domains_app_hooks__WEBPACK_IMPORTED_MODULE_1__.useUserHasResponded)();
   const {
@@ -24686,26 +24691,25 @@ const Chat = (0,preact_compat__WEBPACK_IMPORTED_MODULE_7__.forwardRef)(({
   }
   const onKeyDownHandler = e => {
     if (e.code && e.code === 'Escape' || e.keyCode === 27) if (!isInline && isOpen) {
-      setVisibility({
-        visibility: domains_visibility_constants__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.minimized
-      });
+      closeChat();
+      focusWindowOpenButton();
     }
   };
   return isVisible && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("section", {
-    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(classNames),
+    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)(classNames),
     onKeyDown: onKeyDownHandler,
     tabIndex: -1,
     ref: forwardedRef,
     role: layoutMode === 'window' ? 'dialog' : undefined,
     "aria-labelledby": headingId,
     children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("h2", {
-      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('chat__title', 'visually-hidden'),
+      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('chat__title', 'visually-hidden'),
       id: headingId,
-      children: t('chat.srLabel')
+      children: t('window.srModalLayoutLabel')
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", {
-      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('chat-wrapper'),
+      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('chat-wrapper'),
       children: children
-    }), layoutMode === 'inline' && isOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_suggestions__WEBPACK_IMPORTED_MODULE_8__["default"], {
+    }), layoutMode === 'inline' && isOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_suggestions__WEBPACK_IMPORTED_MODULE_7__["default"], {
       isAside: true
     })]
   });
@@ -26343,9 +26347,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/i18n/hooks */ "./src/javascripts/core/domains/i18n/hooks.ts");
 /* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/visibility/hooks */ "./src/javascripts/core/domains/visibility/hooks.ts");
 /* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ "./src/javascripts/core/lib/css.ts");
-/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/layout/icon */ "./src/javascripts/core/ui/components/layout/icon.tsx");
-/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ "./src/javascripts/core/ui/hooks/seamly-state-hooks.ts");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
+/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! preact/hooks */ "preact/hooks");
+/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/components/layout/icon */ "./src/javascripts/core/ui/components/layout/icon.tsx");
+/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ "./src/javascripts/core/ui/hooks/focus-helper-hooks.ts");
+/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ "./src/javascripts/core/ui/hooks/seamly-state-hooks.ts");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
+
+
 
 
 
@@ -26362,12 +26371,17 @@ const CollapseButton = () => {
   } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_1__.useVisibility)();
   const {
     isWindow
-  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyLayoutMode)();
-  return isOpen && isWindow ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("button", {
+  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyLayoutMode)();
+  const focusWindowOpenButton = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_5__.useWindowOpenButtonFocusing)();
+  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_3__.useCallback)(() => {
+    closeChat();
+    focusWindowOpenButton();
+  }, [closeChat, focusWindowOpenButton]);
+  return isOpen && isWindow ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button", {
     type: "button",
     className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button', 'collapse-button'),
-    onClick: closeChat,
-    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    onClick: handleClick,
+    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_4__["default"], {
       name: "chevronDown",
       size: "32",
       alt: t('window.srCollapseButton')
@@ -26483,8 +26497,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ "./src/javascripts/core/ui/components/widgets/in-out-transition.tsx");
 /* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ "./src/javascripts/core/ui/hooks/focus-helper-hooks.ts");
 /* harmony import */ var ui_hooks_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/hooks/seamly-api-hooks */ "./src/javascripts/core/ui/hooks/seamly-api-hooks.ts");
-/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ "./src/javascripts/core/ui/hooks/seamly-state-hooks.ts");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
+/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ "./src/javascripts/core/ui/hooks/seamly-hooks.ts");
+/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ "./src/javascripts/core/ui/hooks/seamly-state-hooks.ts");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
+
 
 
 
@@ -26500,15 +26516,15 @@ __webpack_require__.r(__webpack_exports__);
 
 const ButtonIcon = () => {
   const startChatIcon = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_0__.useStartChatIcon)();
-  const currentAgent = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_11__.useSeamlyCurrentAgent)();
+  const currentAgent = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_12__.useSeamlyCurrentAgent)();
   const hasError = (0,react_redux__WEBPACK_IMPORTED_MODULE_6__.useSelector)(domains_interrupt_selectors__WEBPACK_IMPORTED_MODULE_2__.selectHasError);
   const isActiveConversation = currentAgent && !hasError;
   const src = isActiveConversation ? currentAgent.avatar : startChatIcon;
-  return src ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("img", {
+  return src ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("img", {
     className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)(isActiveConversation ? 'avatar' : 'icon'),
     src: src,
     alt: ""
-  }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_7__["default"], {
+  }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_7__["default"], {
     name: "avatar",
     size: "32",
     alt: ""
@@ -26526,28 +26542,33 @@ const WindowOpenButton = ({
   const {
     isOpen
   } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_3__.useVisibility)();
-  const count = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_11__.useSeamlyUnreadCount)();
+  const {
+    windowOpenButtonId
+  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_11__.useSeamlyStateContext)();
+  const count = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_12__.useSeamlyUnreadCount)();
   const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_5__.useCallback)(() => {
     onClick();
     focusSkiplinkTarget();
   }, [focusSkiplinkTarget, onClick]);
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__["default"], {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__["default"], {
     isActive: !isOpen,
     transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__.transitionStartStates.rendered,
-    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("button", {
+    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("button", {
+      type: "button",
       className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('window-open-button'),
       "aria-label": ariaLabel,
-      "aria-hidden": isOpen,
       onClick: handleClick,
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__["default"], {
+      inert: isOpen || undefined,
+      id: windowOpenButtonId,
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__["default"], {
         isActive: !!count,
         transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__.transitionStartStates.notRendered,
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("span", {
           className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('message-count'),
           "aria-hidden": "true",
           children: count
         })
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ButtonIcon, {})]
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(ButtonIcon, {})]
     })
   });
 };
@@ -27378,7 +27399,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useElementFocusingById: () => (/* binding */ useElementFocusingById),
 /* harmony export */   useFocusIfSeamlyContainedFocus: () => (/* binding */ useFocusIfSeamlyContainedFocus),
 /* harmony export */   useSeamlyContainerElement: () => (/* binding */ useSeamlyContainerElement),
-/* harmony export */   useSkiplinkTargetFocusing: () => (/* binding */ useSkiplinkTargetFocusing)
+/* harmony export */   useSkiplinkTargetFocusing: () => (/* binding */ useSkiplinkTargetFocusing),
+/* harmony export */   useWindowOpenButtonFocusing: () => (/* binding */ useWindowOpenButtonFocusing)
 /* harmony export */ });
 /* harmony import */ var domains_store__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/store */ "./src/javascripts/core/domains/store/index.ts");
 /* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/store/slice */ "./src/javascripts/core/domains/store/slice.ts");
@@ -27418,6 +27440,12 @@ const useSkiplinkTargetFocusing = () => {
   const skiplinkTargetId = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplink)();
   return useElementFocusingById(skiplinkTargetId);
 };
+const useWindowOpenButtonFocusing = () => {
+  const {
+    windowOpenButtonId
+  } = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSeamlyStateContext)();
+  return useElementFocusingById(windowOpenButtonId);
+};
 const useFocusIfSeamlyContainedFocus = () => {
   const containerElementRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useRef)(null);
   const [seamlyContainerElement] = useSeamlyContainerElement();