optimized-react-component-library-xyz123 1.1.25 → 1.1.26

package/dist/index.d.mts

@@ -803,6 +803,7 @@ interface NavigationHeaderProps {
     showNavigationCloseButton?: boolean;
     menuLinks: INavigationItem[];
     linkComponent?: ElementType;
+    noLogoLink?: boolean;
 }
 
 declare const NavigationHeader: FC<NavigationHeaderProps>;
@@ -815,7 +816,6 @@ interface NavigationProps {
     isOpen: boolean;
     openButtonRef: RefObject<HTMLButtonElement | null>;
     linkComponent?: ElementType;
-    mainId?: string;
 }
 type Locale = 'sv' | 'en';
 type Label = Record<Locale, string>;
@@ -878,6 +878,7 @@ interface CollapseProps {
     defaultOpen?: boolean;
     onToggle?: (open: boolean) => void;
     id?: string;
+    activatedLanguage?: string;
 }
 
 declare const Collapse: FC<CollapseProps>;

package/dist/index.d.ts

@@ -803,6 +803,7 @@ interface NavigationHeaderProps {
     showNavigationCloseButton?: boolean;
     menuLinks: INavigationItem[];
     linkComponent?: ElementType;
+    noLogoLink?: boolean;
 }
 
 declare const NavigationHeader: FC<NavigationHeaderProps>;
@@ -815,7 +816,6 @@ interface NavigationProps {
     isOpen: boolean;
     openButtonRef: RefObject<HTMLButtonElement | null>;
     linkComponent?: ElementType;
-    mainId?: string;
 }
 type Locale = 'sv' | 'en';
 type Label = Record<Locale, string>;
@@ -878,6 +878,7 @@ interface CollapseProps {
     defaultOpen?: boolean;
     onToggle?: (open: boolean) => void;
     id?: string;
+    activatedLanguage?: string;
 }
 
 declare const Collapse: FC<CollapseProps>;

package/dist/index.js

@@ -3300,8 +3300,7 @@ var Navigation = ({
   menuLinks = [],
   showCloseButton = true,
   openButtonRef = null,
-  linkComponent: LinkComponent = "a",
-  mainId = "main-content"
+  linkComponent: LinkComponent = "a"
 }) => {
   const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
   const [openSubMenu, setOpenSubMenu] = (0, import_react13.useState)(null);
@@ -3324,16 +3323,19 @@ var Navigation = ({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, setIsMenyOpen]);
   (0, import_react13.useEffect)(() => {
-    const main = document.getElementById(mainId);
-    console.log(main);
+    const main = document.querySelector("main");
+    const footer = document.querySelector("footer");
     if (!main) return;
     if (isOpen) {
       main.setAttribute("inert", "");
+      footer && footer.setAttribute("inert", "");
     } else {
       main.removeAttribute("inert");
+      footer && footer.removeAttribute("inert");
     }
     return () => {
       main.removeAttribute("inert");
+      footer && footer.removeAttribute("inert");
     };
   }, [isOpen]);
   const getSubMenuAriaLabel = (label) => {
@@ -3348,53 +3350,68 @@ var Navigation = ({
     }
     return "\xD6ppna undermeny f\xF6r " + label["sv"];
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    "nav",
-    {
-      id: "main-navigation",
-      "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
-      className: `${showCloseButton ? "pts-navigation-with-close-button" : ""} pts-navigation-menu-container`,
-      hidden: !isOpen,
-      children: [
-        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pts-navigation-close-container", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { className: "pts-navigation-close-button", onClick: handleCloseButton, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CloseIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "pts-navigation-close-text", children: closeMenuText })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "pts-navigation-link-list", children: menuLinks && menuLinks.map(({ label, href, children }, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-          "li",
-          {
-            className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "pts-navigation-button", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: href.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LinkComponent, { onClick: handleCloseButton, to: href, href, children: label[activatedLanguage] }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "aria-live": "polite", className: "sr-only", children: isOpen && (activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened") }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "nav",
+      {
+        id: "main-navigation",
+        "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
+        className: `${showCloseButton ? "pts-navigation-with-close-button" : ""} pts-navigation-menu-container`,
+        hidden: !isOpen,
+        children: [
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pts-navigation-close-container", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            "button",
+            {
+              className: "pts-navigation-close-button",
+              onClick: handleCloseButton,
+              type: "button",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CloseIcon, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "pts-navigation-close-text", children: closeMenuText })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "pts-navigation-link-list", children: menuLinks && menuLinks.map(({ label, href, children }, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            "li",
+            {
+              className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "pts-navigation-button", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: href.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LinkComponent, { onClick: handleCloseButton, to: href, href, children: label[activatedLanguage] }) }),
+                  children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    "button",
+                    {
+                      className: `pts-navigation-link-expand-button`,
+                      onClick: () => handleSubMenu(label[activatedLanguage]),
+                      "aria-label": getSubMenuAriaLabel(label),
+                      "aria-expanded": openSubMenu === label[activatedLanguage],
+                      "aria-controls": "sub-menu-" + index,
+                      type: "button",
+                      id: "menu-button-" + index,
+                      children: openSubMenu === label[activatedLanguage] ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": true, className: "pts-contract-icon", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MinusIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": true, className: "pts-expand-icon", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AddIcon, {}) })
+                    }
+                  )
+                ] }) }),
                 children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  "button",
+                  "div",
                   {
-                    className: `pts-navigation-link-expand-button`,
-                    onClick: () => handleSubMenu(label[activatedLanguage]),
-                    "aria-label": getSubMenuAriaLabel(label),
-                    "aria-expanded": openSubMenu === label[activatedLanguage],
-                    "aria-controls": "sub-menu-" + index,
-                    children: openSubMenu === label[activatedLanguage] ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": true, className: "pts-contract-icon", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MinusIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": true, className: "pts-expand-icon", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AddIcon, {}) })
+                    hidden: openSubMenu !== label[activatedLanguage],
+                    className: "pts-sub-navigation-container",
+                    id: "sub-menu-" + index,
+                    role: "region",
+                    "aria-labelledby": "menu-button-" + index,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "pts-sub-navigation-list", children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { className: "pts-sub-navigation-item", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LinkComponent, { onClick: handleCloseButton, href: href2, to: href2, children: label2[activatedLanguage] }) }, "nav-child-" + index2)) })
                   }
                 )
-              ] }) }),
-              children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                "div",
-                {
-                  hidden: openSubMenu !== label[activatedLanguage],
-                  className: "pts-sub-navigation-container",
-                  id: "sub-menu-" + index,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "pts-sub-navigation-list", children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { className: "pts-sub-navigation-item", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LinkComponent, { onClick: handleCloseButton, href: href2, to: href2, children: label2[activatedLanguage] }) }, "nav-child-" + index2)) })
-                }
-              )
-            ]
-          },
-          "nav-" + index
-        )) })
-      ]
-    }
-  );
+              ]
+            },
+            "nav-" + index
+          )) })
+        ]
+      }
+    )
+  ] });
 };
 var NavigationStandard_default = Navigation;
 
@@ -3496,7 +3513,8 @@ var NavigationHeader = ({
   showNavigationCloseButton = false,
   SetActivatedLanguage = () => {
   },
-  linkComponent: LinkComponent = "a"
+  linkComponent: LinkComponent = "a",
+  noLogoLink = false
 }) => {
   const logoLink = activatedLanguage === "en" ? "https://pts.se/en" : "https://pts.se/";
   const hasHeadline = headline && headline.length > 0;
@@ -3512,7 +3530,6 @@ var NavigationHeader = ({
     if (activatedLanguage === "sv") return "English";
     else return "Svenska";
   };
-  const resolvedHomelink = homelink && homelink.trim() !== "" ? homelink : activatedLanguage === "en" ? "https://pts.se/en" : "https://pts.se/";
   const [isMenuOpen, setIsMenuOpen] = (0, import_react17.useState)(false);
   const handleMenuClick = () => {
     setIsMenuOpen((prev) => !prev);
@@ -3547,7 +3564,7 @@ var NavigationHeader = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("header", { className: "pts-navigation-header-container", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "pts-navigation-header-content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pts-navigation-header-logo-container", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pts-navigation-header-logo-container", children: noLogoLink ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", children: activatedLanguage === "en" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo_en2, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo_sv2, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         LinkComponent,
         {
           className: "pts-navigation-header-logo",
@@ -3556,34 +3573,37 @@ var NavigationHeader = ({
           target: "_blank",
           rel: "noopener",
           "aria-label": activatedLanguage === "en" ? "PTS logotype (to the homepage on pts.se, opens in new tab)" : "PTS logotyp (till startsidan p\xE5 pts.se, \xF6ppnas i ny flik)",
-          children: activatedLanguage === "en" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo_en2, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo_sv2, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", children: activatedLanguage === "en" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo_en2, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo_sv2, {}) })
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `${hasHeadline ? "pts-navigation-header-headline-container" : ""}`, children: hasHeadline && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "pts-site-headline", children: headline }) }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pts-navigation-header-nav-container", children: (useLanguage || useNavigationMenu || useSearch) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-        useSearch && !isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("button", { onClick: handleSearchClick, children: [
+        useSearch && !isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("button", { type: "button", onClick: handleSearchClick, children: [
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", className: "pts-navigation-header-icons", children: getSearchIcon() }),
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "pts-navigation-header-button-label", children: getSearchLabel() })
         ] }) }),
         useLanguage && !isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "button",
           {
+            type: "button",
             lang: activatedLanguage === "en" ? "en" : "sv",
             onClick: handleLanguageClick,
+            "aria-label": activatedLanguage === "sv" ? "Change language to English" : "\xC4ndra spr\xE5k till svenska",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", className: "pts-navigation-header-icons", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LanguageIcon2, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", className: "pts-navigation-header-button-label", children: getLanguageLabel() }),
-              activatedLanguage === "en" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sr-only", children: "\xC4ndra spr\xE5k till svenska" }),
-              activatedLanguage === "sv" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sr-only", children: "Change language to English" })
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", className: "pts-navigation-header-button-label", children: getLanguageLabel() })
             ]
           }
         ),
         useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "button",
           {
+            type: "button",
             onClick: handleMenuClick,
             "aria-expanded": isMenuOpen,
             "aria-controls": "main-navigation",
+            role: "dialog",
+            "aria-modal": "true",
             ref: menuButtonFocusRef,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", className: isMenuOpen ? "pts-close-icon" : "pts-open-icon", children: getMenuIcon() }),
@@ -3591,15 +3611,7 @@ var NavigationHeader = ({
             ]
           }
         )
-      ] }) }),
-      isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        "div",
-        {
-          className: "pts-navigation-overlay",
-          onClick: () => setIsMenuOpen(false),
-          "aria-hidden": "true"
-        }
-      )
+      ] }) })
     ] }) }),
     useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       NavigationStandard_default,
@@ -3613,6 +3625,15 @@ var NavigationHeader = ({
         linkComponent: LinkComponent
       }
     ),
+    isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "div",
+      {
+        className: "pts-navigation-overlay",
+        onClick: () => setIsMenuOpen(false),
+        "aria-hidden": "true",
+        tabIndex: -1
+      }
+    ),
     !isMenuOpen && isSearchOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SearchBarStandard_default, { activatedLanguage }),
     !isMenuOpen && !isSearchOpen && useBreadCrumbs && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BreadCrumbsStandard_default, { activatedLanguage })
   ] });
@@ -3747,12 +3768,15 @@ var Collapse = ({
   title,
   children,
   defaultOpen = false,
-  id
+  id,
+  activatedLanguage = "sv"
 }) => {
   const [isOpen, setIsOpen] = (0, import_react19.useState)(defaultOpen);
   const uniqueId = id != null ? id : (0, import_react19.useId)();
   const contentId = `${uniqueId}-content`;
   const buttonId = `${uniqueId}-button`;
+  const openLabel = activatedLanguage === "sv" ? "Visa" : "Show";
+  const closeLabel = activatedLanguage === "sv" ? "D\xF6lj" : "Hide";
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "pts-collapse", children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "button",
@@ -3764,7 +3788,7 @@ var Collapse = ({
         "aria-expanded": isOpen,
         "aria-controls": contentId,
         children: [
-          title,
+          `${isOpen ? closeLabel : openLabel} ${title}`,
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pts-open-close-icon", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CollapseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ExpandIcon, {}) })
         ]
       }