optimized-react-component-library-xyz123 2.8.22 → 2.9.2

package/dist/index.d.mts

@@ -846,6 +846,7 @@ interface NavigationHeaderProps {
     menuLinks: INavigationItem[];
     linkComponent?: ElementType;
     noLogoLink?: boolean;
+    navigationCloseFocusId?: string;
 }
 
 declare const NavigationHeader: FC<NavigationHeaderProps>;
@@ -857,6 +858,7 @@ interface NavigationProps {
     isOpen: boolean;
     openButtonRef: RefObject<HTMLButtonElement | null>;
     linkComponent?: ElementType;
+    navigationCloseFocusId?: string;
 }
 type Locale = 'sv' | 'en';
 type Label = Record<Locale, string>;

package/dist/index.d.ts

@@ -846,6 +846,7 @@ interface NavigationHeaderProps {
     menuLinks: INavigationItem[];
     linkComponent?: ElementType;
     noLogoLink?: boolean;
+    navigationCloseFocusId?: string;
 }
 
 declare const NavigationHeader: FC<NavigationHeaderProps>;
@@ -857,6 +858,7 @@ interface NavigationProps {
     isOpen: boolean;
     openButtonRef: RefObject<HTMLButtonElement | null>;
     linkComponent?: ElementType;
+    navigationCloseFocusId?: string;
 }
 type Locale = 'sv' | 'en';
 type Label = Record<Locale, string>;

package/dist/index.js

@@ -1509,7 +1509,7 @@ var MenuIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { wid
   /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "0.666504", y1: "7", x2: "20.6665", y2: "7", stroke: "#6E3282", strokeWidth: "2" }),
   /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "0.666504", y1: "13", x2: "20.6665", y2: "13", stroke: "#6E3282", strokeWidth: "2" })
 ] });
-var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -1518,7 +1518,7 @@ var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xm
     fill: "white"
   }
 ) });
-var CollapseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var CollapseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -3965,16 +3965,20 @@ var Navigation = ({
   activatedLanguage = "sv",
   menuLinks = [],
   openButtonRef = null,
-  linkComponent: LinkComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { ...props })
+  linkComponent: LinkComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { ...props }),
+  navigationCloseFocusId
 }) => {
   const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
   const navRef = (0, import_react16.useRef)(null);
+  const firstVisitRef = (0, import_react16.useRef)(true);
   const [openSubMenu, setOpenSubMenu] = (0, import_react16.useState)(null);
   const handleSubMenu = (label) => {
     setOpenSubMenu(openSubMenu === label ? null : label);
   };
-  const handleCloseButton = () => {
-    setIsMenyOpen && setIsMenyOpen(false);
+  const handleMenuClick = (typeOfInteraction) => {
+    var _a, _b;
+    setIsMenyOpen == null ? void 0 : setIsMenyOpen(false);
+    typeOfInteraction === "close" ? (_a = openButtonRef == null ? void 0 : openButtonRef.current) == null ? void 0 : _a.focus() : navigationCloseFocusId && ((_b = document.getElementById(navigationCloseFocusId)) == null ? void 0 : _b.focus());
   };
   (0, import_react16.useEffect)(() => {
     if (!isOpen || !navRef.current) return;
@@ -3984,7 +3988,9 @@ var Navigation = ({
     const firstElement = focusableElements[0];
     const lastElement = focusableElements[focusableElements.length - 1];
     if (!firstElement || !lastElement) return;
-    firstElement == null ? void 0 : firstElement.focus();
+    requestAnimationFrame(() => {
+      firstElement.focus();
+    });
     const handleKeyDown = (event) => {
       var _a;
       if (event.key === "Escape") {
@@ -4022,8 +4028,21 @@ var Navigation = ({
     }
     return "\xD6ppna undermeny f\xF6r " + label["sv"];
   };
+  const [instruction, setInstruction] = (0, import_react16.useState)("");
+  (0, import_react16.useEffect)(() => {
+    if (firstVisitRef.current) {
+      firstVisitRef.current = false;
+      return;
+    }
+    if (isOpen)
+      requestAnimationFrame(() => {
+        setInstruction(
+          activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened"
+        );
+      });
+  }, [isOpen, activatedLanguage]);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-live": "polite", className: "sr-only", children: isOpen ? activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened" : activatedLanguage === "sv" ? "Navigationsmenyn st\xE4ngdes" : "Navigation menu closed" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-live": "polite", className: "sr-only", children: instruction }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       "nav",
       {
@@ -4032,12 +4051,13 @@ var Navigation = ({
         "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
         className: `pts-navigation-menu-container ${isOpen ? "open" : ""}`,
         inert: !isOpen,
+        "aria-expanded": isOpen,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
             "button",
             {
               className: "pts-navigation-close-button",
-              onClick: handleCloseButton,
+              onClick: () => handleMenuClick("close"),
               type: "button",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseIcon, {}) }),
@@ -4052,7 +4072,14 @@ var Navigation = ({
               lang: activatedLanguage,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "pts-navigation-button", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: href && href.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LinkComponent, { onClick: handleCloseButton, href, children: label[activatedLanguage] }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: href && href.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    LinkComponent,
+                    {
+                      onClick: () => handleMenuClick("link"),
+                      href,
+                      children: label[activatedLanguage]
+                    }
+                  ) }),
                   children && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     "button",
                     {
@@ -4075,7 +4102,14 @@ var Navigation = ({
                     className: "pts-sub-navigation-container",
                     id: "sub-menu-" + index,
                     role: "region",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { className: "pts-sub-navigation-list", lang: activatedLanguage, children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { className: "pts-sub-navigation-item", lang: activatedLanguage, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LinkComponent, { onClick: handleCloseButton, href: href2, children: label2[activatedLanguage] }) }, "nav-child-" + index2)) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { className: "pts-sub-navigation-list", lang: activatedLanguage, children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { className: "pts-sub-navigation-item", lang: activatedLanguage, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                      LinkComponent,
+                      {
+                        onClick: () => handleMenuClick("link"),
+                        href: href2,
+                        children: label2[activatedLanguage]
+                      }
+                    ) }, "nav-child-" + index2)) })
                   }
                 )
               ]
@@ -4151,11 +4185,11 @@ var NavigationHeader = ({
   SetActivatedLanguage = () => {
   },
   linkComponent: LinkComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("a", { ...props }),
-  noLogoLink = false
+  noLogoLink = false,
+  navigationCloseFocusId
 }) => {
   const logoLink = activatedLanguage === "en" ? "https://pts.se/en" : "https://pts.se/";
   const hasHeadline = headline && headline.length > 0;
-  const menuButtonFocusRef = (0, import_react18.useRef)(null);
   const handleLanguageClick = () => {
     if (activatedLanguage === "sv") {
       SetActivatedLanguage("en");
@@ -4168,6 +4202,7 @@ var NavigationHeader = ({
     else return "Svenska";
   };
   const [isMenuOpen, setIsMenuOpen] = (0, import_react18.useState)(false);
+  const menuButtonFocusRef = (0, import_react18.useRef)(null);
   const handleMenuClick = () => {
     setIsMenuOpen((prev) => !prev);
   };
@@ -4247,7 +4282,7 @@ var NavigationHeader = ({
         )
       ] }) })
     ] }) }),
-    useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       NavigationStandard_default,
       {
         activatedLanguage,
@@ -4255,9 +4290,10 @@ var NavigationHeader = ({
         menuLinks,
         isOpen: isMenuOpen,
         openButtonRef: menuButtonFocusRef,
-        linkComponent: LinkComponent
+        linkComponent: LinkComponent,
+        navigationCloseFocusId
       }
-    ),
+    ) }),
     isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
@@ -4366,6 +4402,7 @@ var LinkStandard = ({
       target: openTarget,
       rel: openTarget === "_blank" ? "noopener noreferrer" : void 0,
       "aria-label": ariaLabel || void 0,
+      lang: activatedLanguage,
       children: [
         IconComponent && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: `pts-link-icon-circle ${iconClass} ${customClass}`, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconComponent, {}) }),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pts-standard-link-text", children: linkTitle })
@@ -4385,15 +4422,15 @@ var LinkList = ({
 }) => {
   const uniqueId = (0, import_react19.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "pts-linkList-container", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { children: linkArray && linkArray.map((link, index) => {
-    var _a, _b;
+    var _a, _b, _c;
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       LinkStandard_default,
       {
         url: link.url,
         title: link.title,
-        activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv",
-        ariaLabel: (_a = link.ariaLabel) != null ? _a : void 0,
-        openTarget: (_b = link.openTarget) != null ? _b : "_blank",
+        activatedLanguage: (_a = link.activatedLanguage) != null ? _a : activatedLanguage,
+        ariaLabel: (_b = link.ariaLabel) != null ? _b : void 0,
+        openTarget: (_c = link.openTarget) != null ? _c : "_blank",
         linkComponent: LinkComponent
       }
     ) }, uniqueId + "_" + index);
@@ -4428,7 +4465,7 @@ var Collapse = ({
         "aria-controls": contentId,
         children: [
           `${isOpen ? closeLabel : openLabel} ${title}`,
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pts-open-close-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CollapseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ExpandIcon, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pts-collapse-open-close-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CollapseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ExpandIcon, {}) })
         ]
       }
     ),