@arc-ui/components 11.20.0 → 11.21.1

package/dist/_shared/esm/{SiteHeaderV2-0096e25b.js → SiteHeaderV2-f06ac085.js}

@@ -1,7 +1,7 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
 import { u as useMediaQuery, b as ArcBreakpointL } from './use-media-query-4c807227.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import React__default, { useState, useEffect, Fragment, useRef, createContext, useContext } from 'react';
+import React__default, { useEffect, Fragment, useRef, useState, createContext, useContext } from 'react';
 import { B as BrandLogo } from './BrandLogo-1af78f76.js';
 import { S as Surface } from './Surface-0ca6817d.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
@@ -18,8 +18,8 @@ var Item = function (_a) {
     return (React__default.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderV2Item"] = true,
             _b["arc-SiteHeaderV2Item--emphasised"] = true,
-            _b)) }, filterDataAttrs(props)),
-        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href },
+            _b)) }, filterDataAttrs(props), { role: "none" }),
+        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href, role: "menuitem" },
             children,
             React__default.createElement("span", { className: "arc-SiteHeaderV2Item-linkIcon" },
                 React__default.createElement(BtIconChevronRightMid, null)))));
@@ -27,7 +27,6 @@ var Item = function (_a) {
 
 var ItemGroup = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, subtitle = _a.subtitle, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "title", "subtitle", "onClick", "viewAllTitle"]);
-    var _b = useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
@@ -36,10 +35,6 @@ var ItemGroup = function (_a) {
             }
         });
     }, [children]);
-    useEffect(function () {
-        // useEffect does not run in ReactDomServer renders
-        setHasClientSideJavaScript(true);
-    }, [setHasClientSideJavaScript]);
     var ElementType = "div";
     if (title) {
         ElementType = "details";
@@ -47,16 +42,14 @@ var ItemGroup = function (_a) {
     return (React__default.createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
         React__default.createElement(ElementType, __assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
             title ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
+                React__default.createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
                     React__default.createElement("a", { onClick: handleLinkClick({
                             handler: onClick
-                        }), className: "arc-SiteHeaderV2ItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL
-                            ? 0
-                            : -1 }, title),
+                        }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, title),
                     React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
                         React__default.createElement(BtIconChevronRightMid, null)))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
                 React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
-            React__default.createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
+            React__default.createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items", role: "menubar" },
                 children,
                 href && title ? (React__default.createElement("li", { className: "arc-SiteHeaderV2Item arc-SiteHeaderV2Item--viewAll" },
                     React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
@@ -73,8 +66,8 @@ var Column = function (_a) {
             }
         });
     }, [children]);
-    return (React__default.createElement("li", __assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs(props)),
-        React__default.createElement("ul", { className: "arc-SiteHeaderV2Column-items" }, children)));
+    return (React__default.createElement("li", __assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs(props), { role: "none" }),
+        React__default.createElement("ul", { className: "arc-SiteHeaderV2Column-items", role: "none" }, children)));
 };
 
 var BackButton = function (_a) {
@@ -92,11 +85,13 @@ var Panel = function (_a) {
     var _b, _c, _d, _e, _f;
     var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick, subNavItemRef = _a.subNavItemRef; _a.navLink; var _h = _a.subNavLink, subNavLink = _h === void 0 ? "" : _h, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav; _a.fade; var isPrimary = _a.isPrimary, props = __rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var menubarRef = useHeaderV2Context().menubarRef;
     useEffect(function () {
         // Where appropriate, close the Panel when clicking outside of it,
         // by listening to clicks on the entire document and acting accordingly.
         var handleClick = function (e) {
             var _a, _b;
+            menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
             // Don't close the Panel…
             if (
             // The click is inside the current SubNavItem.
@@ -136,9 +131,11 @@ var Panel = function (_a) {
         subNavItemRef,
         subNavLink,
         setOpenPanelOnFirstClick,
+        menubarRef,
     ]);
     useEffect(function () {
         var handleClick = function (e) {
+            menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
             // Close the Panel…
             if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
                 setOpenPanelOnFirstClick(false);
@@ -154,7 +151,7 @@ var Panel = function (_a) {
         return function () {
             document.removeEventListener("click", handleClick);
         };
-    }, [navItemRef, setOpenPanelOnFirstClick]);
+    }, [navItemRef, setOpenPanelOnFirstClick, menubarRef]);
     useEffect(function () {
         var handleKeydown = function (e) {
             // Check the viewport width at time of press
@@ -167,12 +164,15 @@ var Panel = function (_a) {
                 }
                 return setOpen(false);
             }
+            if (e.key === "Tab") {
+                menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.remove("noFocus");
+            }
         };
         window.addEventListener("keydown", handleKeydown);
         return function () {
             window.removeEventListener("keydown", handleKeydown);
         };
-    }, [setOpen, subNavItemRef]);
+    }, [setOpen, subNavItemRef, menubarRef]);
     return (React__default.createElement("div", { style: { display: "flex" } },
         React__default.createElement("div", __assign({ className: classNames((_b = {},
                 _b["arc-SiteHeaderV2Panel"] = true,
@@ -261,8 +261,9 @@ var NavItem = function (_a) {
             handler: onClick
         }), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
-            React__default.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+            React__default.createElement("button", { "aria-expanded": panelOpen, role: "menuitem", "aria-haspopup": "true", "aria-label": title, className: classNames((_c = {},
                     _c["arc-SiteHeaderV2NavItem-link"] = true,
+                    _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
                     _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
                     _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
                     _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
@@ -400,10 +401,11 @@ var NavItemWithSubNav = function (_a) {
                     ? horizontalPanelOpen
                     : panelOpen,
                 _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
-                _b)), ref: navItem }, filterDataAttrs(props)),
+                _b)), role: "none", ref: navItem }, filterDataAttrs(props)),
             React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
-                React__default.createElement("button", { "aria-expanded": horizontalPanelOpen, className: classNames((_c = {},
+                React__default.createElement("button", { "aria-expanded": horizontalPanelOpen || panelOpen, role: "menuitem", "aria-label": title, "aria-haspopup": "true", tabIndex: 0, className: classNames((_c = {},
                         _c["arc-SiteHeaderV2NavItem-link"] = true,
+                        _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
                         _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
                         _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
                         _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
@@ -536,7 +538,7 @@ var VerticalDivider = function () {
     return React__default.createElement("li", { className: "arc-SiteHeaderV2VerticalDivider-line" });
 };
 
-var defaultContext = { transparent: false };
+var defaultContext = { transparent: false, menubarRef: null };
 var Context = createContext(defaultContext);
 var Provider = Context.Provider;
 /**
@@ -548,6 +550,7 @@ var SiteHeaderV2 = function (_a) {
     var _j = useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
     var _k = useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var menubarRef = useRef();
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item &&
@@ -581,6 +584,9 @@ var SiteHeaderV2 = function (_a) {
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [setMenuOpen]);
+    useEffect(function () {
+        menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
+    }, []);
     useEffect(function () {
         var handleClick = function (e) {
             if (e.target.getAttribute("href")) {
@@ -596,7 +602,7 @@ var SiteHeaderV2 = function (_a) {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
-    return (React__default.createElement(Provider, { value: { transparent: isTransparent } },
+    return (React__default.createElement(Provider, { value: { transparent: isTransparent, menubarRef: menubarRef } },
         React__default.createElement("div", __assign({ className: classNames((_b = {},
                 _b["arc-SiteHeaderV2"] = true,
                 _b["arc-SiteHeaderV2--menuOpen"] = menuOpen,
@@ -613,8 +619,8 @@ var SiteHeaderV2 = function (_a) {
                     children && (React__default.createElement("nav", { className: "arc-SiteHeaderV2-nav" },
                         React__default.createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
                             React__default.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
-                        React__default.createElement("div", { className: "arc-SiteHeaderV2-main" },
-                            React__default.createElement("ul", { className: "arc-SiteHeaderV2-navItems" }, children),
+                        React__default.createElement("div", { className: "arc-SiteHeaderV2-main", tabIndex: -1 },
+                            React__default.createElement("ul", { role: "menubar", "aria-label": "navigation", ref: menubarRef, className: "arc-SiteHeaderV2-navItems" }, children),
                             hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
                                 React__default.createElement("button", { className: "arc-SiteHeaderV2-mobileLogin", onClick: loginOnClick },
                                     loginTitle,
@@ -629,6 +635,9 @@ var SiteHeaderV2 = function (_a) {
                         basket ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-basket" }, basket)) : null,
                         hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-loginLink arc-SiteHeaderV2-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React__default.createElement("a", { className: "arc-SiteHeaderV2-loginLink", href: loginHref }, loginTitle)))))))))));
 };
+function useHeaderV2Context() {
+    return useContext(Context);
+}
 SiteHeaderV2.Column = Column;
 SiteHeaderV2.Item = Item;
 SiteHeaderV2.ItemGroup = ItemGroup;

package/dist/index.es.js

@@ -35626,68 +35626,48 @@ var ProgressBar = function (_a) {
                             React__default.createElement(Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
 };
 
-const BtIconTickVariant = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCrossAlt = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M16.70709,16.02l4.48236-4.49365a.4996.4996,0,1,0-.707-.70606l-4.481,4.49225-4.481-4.49225a.4996.4996,0,1,0-.707.70606L15.29584,16.02l-4.48236,4.49365a.4996.4996,0,1,0,.707.70606l4.481-4.49225,4.481,4.49225a.4996.4996,0,1,0,.707-.70606Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCircle = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 32 32",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M9 16C9 19.87 12.13 23 16 23C19.87 23 23 19.87 23 16C23 12.13 19.87 9 16 9C12.13 9 9 12.13 9 16ZM16 7C11.03 7 7 11.03 7 16C7 20.97 11.03 25 16 25C20.97 25 25 20.97 25 16C25 11.03 20.97 7 16 7Z",
-      fill: "currentColor",
-    }),
-  );
-
+var Error$1 = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("g", { "clip-path": "url(#a)" },
+        React__default.createElement("path", { d: "m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z", fill: "currentColor" })),
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("clipPath", { id: "a" },
+            React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
+
+var Warning = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }),
+    React__default.createElement("path", { d: "M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z", fill: "currentColor", stroke: "currentColor", "stroke-width": ".3" }))); };
+
+var Complete = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("g", { "clip-path": "url(#a)" },
+        React__default.createElement("path", { d: "m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z", fill: "currentColor" })),
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("clipPath", { id: "a" },
+            React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
+
+var Current = function () { return (React__default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("rect", { x: "0.666667", y: "0.666667", width: "22.6667", height: "22.6667", rx: "11.3333", stroke: "url(#paint0_linear_1_1050)", "stroke-width": "1.33333" }),
+    React__default.createElement("circle", { cx: "12", cy: "12", r: "7", fill: "currentColor" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("linearGradient", { id: "paint0_linear_1_1050", x1: "36.6036", y1: "-4.31391e-07", x2: "-12.6036", y2: "24", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { "stop-color": "#F200F5" }),
+            React__default.createElement("stop", { offset: "1", "stop-color": "#1EC8E6" }))))); };
+
+var Todo = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", "stroke-width": "1.333" }))); };
+
+// export current step as an icon
 var ProgressStepperItem = function (_a) {
-    var _b, _c, _d;
-    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _e = _a.direction, direction = _e === void 0 ? "horizontal" : _e, _f = _a.status, status = _f === void 0 ? "todo" : _f, _g = _a.size, size = _g === void 0 ? "large" : _g, _h = _a.position, position = _h === void 0 ? "middle" : _h, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, isExpandable = _a.isExpandable, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "position", "isFluid", "ariaLabel", "onClick", "previousStep", "isExpandable", "stepContent", "isStepContentHidden"]);
+    var _b;
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
     var surface = useContext(Context$5).surface;
     var statusIcons = {
-        completed: BtIconTickVariant,
-        current: BtIconCircle,
-        warning: BtIconAlert,
-        error: BtIconCrossAlt
+        todo: Todo,
+        completed: Complete,
+        current: Current,
+        warning: Warning,
+        error: Error$1
     };
     var onClickHandler = function (event) {
         event.preventDefault();
@@ -35696,37 +35676,25 @@ var ProgressStepperItem = function (_a) {
     var capitaliseFirstLetter = function (word) {
         return word.charAt(0).toUpperCase() + word.slice(1);
     };
-    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", (_b = {
+    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
                 "arc-ProgressStepperItem--vertical": direction === "vertical",
-                "arc-ProgressStepperItem--isFluid": isFluid,
+                "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
                 "arc-ProgressStepperItem--onDarkSurface": surface === "dark",
                 "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
             },
-            _b["arc-ProgressStepperItem--".concat(size)] = size === "small",
+            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
             _b)) }, filterDataAttrs(props)),
-        React__default.createElement("div", { className: classNames("arc-ProgressStepperItem-iconSection", (_c = {},
-                _c["arc-ProgressStepperItem-iconSection--".concat(position)] = position !== "middle",
-                _c)) },
-            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailBefore" }),
-            React__default.createElement("div", { className: classNames("arc-ProgressStepperItem-iconWrapper", (_d = {},
-                    _d["arc-ProgressStepperItem-iconWrapper--".concat(status)] = status !== "todo",
-                    _d)), "data-testid": "arc-ProgressStepperItem-iconWrapper" }, statusIcons[status] === undefined ? (React__default.createElement("div", { style: {
-                    width: size === "small" ? "16px" : "32px",
-                    height: size === "small" ? "16px" : "32px"
-                } })) : (React__default.createElement(Icon, { size: size === "small" ? 16 : 32, icon: statusIcons[status] }))),
-            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailAfter" })),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
+                React__default.createElement(Icon, { size: size === "small" ? 16 : 24, icon: statusIcons[status] }))),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
             status !== "todo" && (React__default.createElement(VisuallyHidden, null,
                 capitaliseFirstLetter(status),
                 ":")),
-            titleHref ? (React__default.createElement("a", { href: titleHref, "aria-label": ariaLabel, className: "arc-ProgressStepperItem-title", onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
+            titleHref ? (React__default.createElement("a", { href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
             React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
-            isExpandable && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" },
-                    React__default.createElement("div", { className: "arc-ProgressStepperItem-keyline" }),
-                    stepContent && !isStepContentHidden && (React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(VerticalSpace, { size: "8" }),
-                        stepContent))))))));
+            stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
 };
 
 /** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
@@ -35739,15 +35707,8 @@ var ProgressStepper = function (_a) {
     };
     return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepper", {
             "arc-ProgressStepper--vertical": direction === "vertical"
-        }) }, filterDataAttrs(props)), items.map(function (item, index) {
-        var currentPosition = index === 0
-            ? "first"
-            : index === React__default.Children.count(children) - 1
-                ? "last"
-                : undefined;
-        return (React__default.createElement(React__default.Fragment, { key: "StepperItem-".concat(index) },
-            React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, direction: direction, isExpandable: isExpandable, size: size, position: currentPosition, previousStep: getStepStatus(items[index - 1]) }, filterDataAttrs(item.props)))));
-    })));
+        }) }, filterDataAttrs(props)), items.map(function (item, index) { return (React__default.createElement(React__default.Fragment, { key: "StepperItem-".concat(index) },
+        React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterDataAttrs(item.props))))); })));
 };
 ProgressStepper.Item = ProgressStepperItem;
 
@@ -39318,7 +39279,7 @@ var Select = function (_a) {
                             "arc-Select-trigger--invalid": errorMessage
                         },
                         _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
-                        _b)) }, filterDataAttrs(props)),
+                        _b)), "aria-describedby": "".concat(id, "-helper") }, filterDataAttrs(props)),
                     React__default.createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
                     React__default.createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
                         React__default.createElement(Icon, { icon: BtIconChevronDown2Px, size: getIconSize(selectSize) }))),
@@ -40066,8 +40027,8 @@ var Item = function (_a) {
     return (React__default.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderV2Item"] = true,
             _b["arc-SiteHeaderV2Item--emphasised"] = true,
-            _b)) }, filterDataAttrs(props)),
-        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href },
+            _b)) }, filterDataAttrs(props), { role: "none" }),
+        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href, role: "menuitem" },
             children,
             React__default.createElement("span", { className: "arc-SiteHeaderV2Item-linkIcon" },
                 React__default.createElement(BtIconChevronRightMid, null)))));
@@ -40075,7 +40036,6 @@ var Item = function (_a) {
 
 var ItemGroup = function (_a) {
     var children = _a.children, href = _a.href, title = _a.title, subtitle = _a.subtitle, onClick = _a.onClick, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "href", "title", "subtitle", "onClick", "viewAllTitle"]);
-    var _b = useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React__default.Children.map(children, function (item) {
@@ -40084,10 +40044,6 @@ var ItemGroup = function (_a) {
             }
         });
     }, [children]);
-    useEffect(function () {
-        // useEffect does not run in ReactDomServer renders
-        setHasClientSideJavaScript(true);
-    }, [setHasClientSideJavaScript]);
     var ElementType = "div";
     if (title) {
         ElementType = "details";
@@ -40095,16 +40051,14 @@ var ItemGroup = function (_a) {
     return (React__default.createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
         React__default.createElement(ElementType, __assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
             title ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
+                React__default.createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
                     React__default.createElement("a", { onClick: handleLinkClick({
                             handler: onClick
-                        }), className: "arc-SiteHeaderV2ItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL
-                            ? 0
-                            : -1 }, title),
+                        }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, title),
                     React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
                         React__default.createElement(BtIconChevronRightMid, null)))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
                 React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
-            React__default.createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
+            React__default.createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items", role: "menubar" },
                 children,
                 href && title ? (React__default.createElement("li", { className: "arc-SiteHeaderV2Item arc-SiteHeaderV2Item--viewAll" },
                     React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
@@ -40121,8 +40075,8 @@ var Column = function (_a) {
             }
         });
     }, [children]);
-    return (React__default.createElement("li", __assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs(props)),
-        React__default.createElement("ul", { className: "arc-SiteHeaderV2Column-items" }, children)));
+    return (React__default.createElement("li", __assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs(props), { role: "none" }),
+        React__default.createElement("ul", { className: "arc-SiteHeaderV2Column-items", role: "none" }, children)));
 };
 
 var BackButton = function (_a) {
@@ -40140,11 +40094,13 @@ var Panel = function (_a) {
     var _b, _c, _d, _e, _f;
     var children = _a.children, navItemRef = _a.navItemRef, isNavItem = _a.isNavItem, open = _a.open, setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick, subNavItemRef = _a.subNavItemRef; _a.navLink; var _h = _a.subNavLink, subNavLink = _h === void 0 ? "" : _h, title = _a.title, subtitle = _a.subtitle, viewAll = _a.viewAll, withSubNav = _a.withSubNav; _a.fade; var isPrimary = _a.isPrimary, props = __rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var menubarRef = useHeaderV2Context().menubarRef;
     useEffect(function () {
         // Where appropriate, close the Panel when clicking outside of it,
         // by listening to clicks on the entire document and acting accordingly.
         var handleClick = function (e) {
             var _a, _b;
+            menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
             // Don't close the Panel…
             if (
             // The click is inside the current SubNavItem.
@@ -40184,9 +40140,11 @@ var Panel = function (_a) {
         subNavItemRef,
         subNavLink,
         setOpenPanelOnFirstClick,
+        menubarRef,
     ]);
     useEffect(function () {
         var handleClick = function (e) {
+            menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
             // Close the Panel…
             if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
                 setOpenPanelOnFirstClick(false);
@@ -40202,7 +40160,7 @@ var Panel = function (_a) {
         return function () {
             document.removeEventListener("click", handleClick);
         };
-    }, [navItemRef, setOpenPanelOnFirstClick]);
+    }, [navItemRef, setOpenPanelOnFirstClick, menubarRef]);
     useEffect(function () {
         var handleKeydown = function (e) {
             // Check the viewport width at time of press
@@ -40215,12 +40173,15 @@ var Panel = function (_a) {
                 }
                 return setOpen(false);
             }
+            if (e.key === "Tab") {
+                menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.remove("noFocus");
+            }
         };
         window.addEventListener("keydown", handleKeydown);
         return function () {
             window.removeEventListener("keydown", handleKeydown);
         };
-    }, [setOpen, subNavItemRef]);
+    }, [setOpen, subNavItemRef, menubarRef]);
     return (React__default.createElement("div", { style: { display: "flex" } },
         React__default.createElement("div", __assign({ className: classNames((_b = {},
                 _b["arc-SiteHeaderV2Panel"] = true,
@@ -40309,8 +40270,9 @@ var NavItem = function (_a) {
             handler: onClick
         }), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
-            React__default.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
+            React__default.createElement("button", { "aria-expanded": panelOpen, role: "menuitem", "aria-haspopup": "true", "aria-label": title, className: classNames((_c = {},
                     _c["arc-SiteHeaderV2NavItem-link"] = true,
+                    _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
                     _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
                     _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
                     _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
@@ -40448,10 +40410,11 @@ var NavItemWithSubNav = function (_a) {
                     ? horizontalPanelOpen
                     : panelOpen,
                 _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
-                _b)), ref: navItem }, filterDataAttrs(props)),
+                _b)), role: "none", ref: navItem }, filterDataAttrs(props)),
             React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
-                React__default.createElement("button", { "aria-expanded": horizontalPanelOpen, className: classNames((_c = {},
+                React__default.createElement("button", { "aria-expanded": horizontalPanelOpen || panelOpen, role: "menuitem", "aria-label": title, "aria-haspopup": "true", tabIndex: 0, className: classNames((_c = {},
                         _c["arc-SiteHeaderV2NavItem-link"] = true,
+                        _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
                         _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
                         _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
                         _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
@@ -40584,7 +40547,7 @@ var VerticalDivider = function () {
     return React__default.createElement("li", { className: "arc-SiteHeaderV2VerticalDivider-line" });
 };
 
-var defaultContext = { transparent: false };
+var defaultContext = { transparent: false, menubarRef: null };
 var Context = createContext(defaultContext);
 var Provider = Context.Provider;
 /**
@@ -40596,6 +40559,7 @@ var SiteHeaderV2 = function (_a) {
     var _j = useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
     var _k = useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
+    var menubarRef = useRef();
     useEffect(function () {
         React__default.Children.map(children, function (item) {
             if (item &&
@@ -40629,6 +40593,9 @@ var SiteHeaderV2 = function (_a) {
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [setMenuOpen]);
+    useEffect(function () {
+        menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
+    }, []);
     useEffect(function () {
         var handleClick = function (e) {
             if (e.target.getAttribute("href")) {
@@ -40644,7 +40611,7 @@ var SiteHeaderV2 = function (_a) {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
-    return (React__default.createElement(Provider, { value: { transparent: isTransparent } },
+    return (React__default.createElement(Provider, { value: { transparent: isTransparent, menubarRef: menubarRef } },
         React__default.createElement("div", __assign({ className: classNames((_b = {},
                 _b["arc-SiteHeaderV2"] = true,
                 _b["arc-SiteHeaderV2--menuOpen"] = menuOpen,
@@ -40661,8 +40628,8 @@ var SiteHeaderV2 = function (_a) {
                     children && (React__default.createElement("nav", { className: "arc-SiteHeaderV2-nav" },
                         React__default.createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
                             React__default.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
-                        React__default.createElement("div", { className: "arc-SiteHeaderV2-main" },
-                            React__default.createElement("ul", { className: "arc-SiteHeaderV2-navItems" }, children),
+                        React__default.createElement("div", { className: "arc-SiteHeaderV2-main", tabIndex: -1 },
+                            React__default.createElement("ul", { role: "menubar", "aria-label": "navigation", ref: menubarRef, className: "arc-SiteHeaderV2-navItems" }, children),
                             hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
                                 React__default.createElement("button", { className: "arc-SiteHeaderV2-mobileLogin", onClick: loginOnClick },
                                     loginTitle,
@@ -40677,6 +40644,9 @@ var SiteHeaderV2 = function (_a) {
                         basket ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-basket" }, basket)) : null,
                         hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-loginLink arc-SiteHeaderV2-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React__default.createElement("a", { className: "arc-SiteHeaderV2-loginLink", href: loginHref }, loginTitle)))))))))));
 };
+function useHeaderV2Context() {
+    return useContext(Context);
+}
 SiteHeaderV2.Column = Column;
 SiteHeaderV2.Item = Item;
 SiteHeaderV2.ItemGroup = ItemGroup;
@@ -41688,15 +41658,16 @@ var TextArea = forwardRef(function (_a, ref) {
     return (React__default.createElement(FormControl, __assign({ errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure, supplementaryInfo: maxLength &&
             showCharacterCount && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Text, { tone: isDisabled ? "muted" : "default" },
-                React__default.createElement("span", { className: "arc-TextArea-characterCount" },
+                React__default.createElement("span", { className: "arc-TextArea-characterCount", "aria-live": "polite" },
                     characterCount,
                     " / ",
-                    maxLength)))) }, filterDataAttrs(props)),
+                    maxLength,
+                    characterCount === maxLength && (React__default.createElement(VisuallyHidden, null, "Maximum characters reached")))))) }, filterDataAttrs(props)),
         React__default.createElement("textarea", { id: id, className: classNames("arc-TextArea", {
                 "arc-TextArea--noResize": resize !== "manual",
                 "arc-TextArea--onDarkSurface": surface === "dark",
                 "arc-TextArea--invalid": errorMessage
-            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width } })));
+            }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width }, "aria-describedby": "".concat(id, "-helper") })));
 });
 
 /**