@arc-ui/components 11.21.0 → 11.22.0

package/dist/index.es.js

@@ -699,7 +699,7 @@ const BtIconPlayFill = (props) =>
   );
 
 var CardFooter = function (_a) {
-    var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.showButton, showButton = _d === void 0 ? true : _d, _e = _a.showFilledIcon, showFilledIcon = _e === void 0 ? false : _e;
+    var metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isDarkPathway, isDarkPathway = _c === void 0 ? false : _c, _d = _a.showButton, showButton = _d === void 0 ? true : _d, _e = _a.isHovered, isHovered = _e === void 0 ? false : _e;
     var icons = {
         arrow: {
             regular: BtIconArrowRight,
@@ -711,16 +711,18 @@ var CardFooter = function (_a) {
         }
     };
     return (React__default.createElement("div", { className: classNames("arc-CardFooter", {
-            "arc-CardFooter--darkPathway": isDarkPathway,
-            "arc-CardFooter--showFilledIcon": showFilledIcon
+            "arc-CardFooter--darkPathway": isDarkPathway
         }) },
         React__default.createElement("div", { className: "arc-CardFooter-metaTextContainer" }, metaText && (React__default.createElement("span", { className: "arc-CardFooter-metaText" }, metaText))),
         showButton && (React__default.createElement("div", null,
             React__default.createElement("div", { className: "arc-CardFooter-button" },
-                React__default.createElement("div", { className: classNames("arc-CardFooter-buttonIcon", "arc-CardFooter-buttonIcon--regular") },
-                    React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 })),
-                React__default.createElement("div", { className: "arc-CardFooter-buttonIcon arc-CardFooter-buttonIcon--filled" },
-                    React__default.createElement(Icon, { icon: icons[buttonIcon].filled, size: 40 })))))));
+                React__default.createElement("div", { className: "arc-CardFooter-buttonIcon" },
+                    React__default.createElement("div", { className: classNames("arc-CardFooter-buttonIconRight", {
+                            "arc-CardFooter-buttonIconRight--isHovered": isHovered
+                        }) },
+                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 })),
+                    React__default.createElement("div", { className: "arc-CardFooter-buttonIconLeft" },
+                        React__default.createElement(Icon, { icon: icons[buttonIcon].regular, size: 40 }))))))));
 };
 
 var ConditionalWrapper = function (_a) {
@@ -2166,7 +2168,7 @@ var FilterControl = function (_a) {
     return (React__default.createElement("button", { className: classNames("arc-FilterControl", {
             "arc-FilterControl--onDarkSurface": surface === "dark",
             "arc-FilterControl--selected": selected
-        }), onClick: onClickHandler, tabIndex: 0 },
+        }), onClick: onClickHandler, tabIndex: 0, "aria-pressed": selected },
         React__default.createElement("div", { className: "arc-FilterControl-text" }, children)));
 };
 
@@ -2184,16 +2186,20 @@ var FilterItem = function (_a) {
 };
 
 var FilterItems = function (_a) {
-    var children = _a.children, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = __rest(_a, ["children", "displayType"]);
-    return (React__default.createElement("div", __assign({ className: classNames("arc-FilterItems", {
-            "arc-FilterItems--list": displayType === "list",
-            "arc-FilterItems--grid": displayType === "grid"
-        }) }, filterDataAttrs(props)), displayType === "list"
-        ? React__default.Children.toArray(children).map(function (child, index, array) { return (React__default.createElement(React__default.Fragment, { key: index },
-            child,
-            index !== array.length - 1 && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
-        : children));
+    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = __rest(_a, ["children", "error", "displayType"]);
+    return React__default.Children.toArray(children).length > 0 ? (React__default.createElement("div", null,
+        React__default.createElement("div", { className: "arc-FilterItems-offscreen", "aria-live": "assertive" }, React__default.Children.toArray(children).length > 0
+            ? "".concat(React__default.Children.toArray(children).length, " records listed.")
+            : null),
+        React__default.createElement("div", __assign({ className: classNames("arc-FilterItems", {
+                "arc-FilterItems--list": displayType === "list",
+                "arc-FilterItems--grid": displayType === "grid"
+            }) }, filterDataAttrs(props)), displayType === "list"
+            ? React__default.Children.toArray(children).map(function (child, index, array) { return (React__default.createElement(React__default.Fragment, { key: index },
+                child,
+                index !== array.length - 1 && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
+            : children))) : (React__default.createElement("div", { "aria-live": "assertive" }, error));
 };
 
 /** use `Filter` for interactive elements that filter and categorise page content. */
@@ -2253,7 +2259,7 @@ var Filter = function (_a) {
         React__default.createElement(FilterControls, { controlsAlignment: controlsAlignment }, controls &&
             React__default.isValidElement(controls) &&
             React__default.Children.map(controls.props.children, function (control, index) { return (React__default.createElement(FilterControl, { key: index, onClick: function () { return handleControlClick(control.props.children); }, isSelected: control.props.isSelected }, control.props.children)); })),
-        filteredItems.length === 0 ? (React__default.createElement(React__default.Fragment, null, error)) : (React__default.createElement(FilterItems, { displayType: displayType }, filteredItems.map(function (item) { return item.props.children; })))));
+        React__default.createElement(FilterItems, { displayType: displayType, error: error }, filteredItems.map(function (item) { return item.props.children; }))));
 };
 Filter.Controls = FilterControls;
 Filter.Control = FilterControl;
@@ -2393,7 +2399,8 @@ var VerticalSpace = function (_a) {
 };
 
 var InformationCard = function (_a) {
-    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "headingLevel"]);
+    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, minHeight = _a.minHeight, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "minHeight", "headingLevel"]);
+    var surface = useContext(Context$5).surface;
     var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
     var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
     var _c = useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
@@ -2401,8 +2408,10 @@ var InformationCard = function (_a) {
     var assetSpacing = isMinWidthArcBreakpointM ? "24" : "20";
     var containerSpacing = isMinWidthArcBreakpointS ? "32" : "24";
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    return (React__default.createElement("div", __assign({ className: classNames("arc-InformationCard", {
-            "arc-InformationCard--outlined": cardUrl && showHoverState
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-InformationCard", {
+            "arc-InformationCard--isALink": cardUrl,
+            "arc-InformationCard--outlined": cardUrl && showHoverState,
+            "arc-InformationCard--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
         React__default.createElement(Surface, { growVertically: true, padding: containerSpacing, background: "white" },
             React__default.createElement("div", null,
@@ -2435,6 +2444,27 @@ var InformationCard = function (_a) {
                     React__default.createElement(Image, __assign({}, footerLogo))))))));
 };
 
+var ImpactCard = function (_a) {
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "linkData", "pathway", "headingLevel", "buttonIcon"]);
+    var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
+    var surface = useContext(Context$5).surface;
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    var isDarkPathway = pathway === "dark";
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-ImpactCard", {
+            "arc-ImpactCard--darkPathway": isDarkPathway,
+            "arc-ImpactCard--outlined": url && showHoverState,
+            "arc-ImpactCard--isHovered": showHoverState,
+            "arc-ImpactCard--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-ImpactCard-backgroundImageContainer" },
+            React__default.createElement(Image, __assign({ fit: "cover", alt: "" }, img))),
+        React__default.createElement("div", { className: "arc-ImpactCard-contentContainer" },
+            label && (React__default.createElement("div", { className: "arc-ImpactCard-labelContainer" },
+                React__default.createElement(CardLabel, { isDarkPathway: isDarkPathway, color: "supporting", isBold: true, text: label }))),
+            React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, linkData: linkData, href: url, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
+        React__default.createElement(CardFooter, { buttonIcon: buttonIcon, showButton: true, isDarkPathway: isDarkPathway, isHovered: showHoverState })));
+};
+
 /**
  * Use `Markup` to display HTML-formatted text.
  */
@@ -2452,14 +2482,16 @@ var Markup = function (_a) {
  * Use `MediaCard` to contain content and an image about a single subject.
  */
 var MediaCard = function (_a) {
-    var img = _a.img, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = __rest(_a, ["img", "url", "onClick", "heading", "label", "text", "metaText", "buttonIcon", "isContained", "headingLevel"]);
+    var img = _a.img, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = __rest(_a, ["img", "url", "onClick", "heading", "label", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
+    var surface = useContext(Context$5).surface;
     var _e = useState(false), showHoverState = _e[0], setShowHoverState = _e[1];
     var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
     var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    return (React__default.createElement("div", __assign({ className: classNames("arc-MediaCard", {
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-MediaCard", {
             "arc-MediaCard--outlined": url && isContained && showHoverState,
-            "arc-MediaCard--contained": isContained
+            "arc-MediaCard--contained": isContained,
+            "arc-MediaCard--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
         React__default.createElement(ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React__default.createElement(Surface, { growVertically: true, background: "white" }, children)); } },
             React__default.createElement("div", { className: "arc-MediaCard-imgContainer" },
@@ -2473,7 +2505,7 @@ var MediaCard = function (_a) {
                     React__default.createElement(VerticalSpace, { size: headingSpacing }),
                     React__default.createElement(Text, null, text),
                     (url || metaText) && React__default.createElement(VerticalSpace, { size: "24" })))),
-                React__default.createElement(CardFooter, { showFilledIcon: showHoverState, buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) })))));
+                React__default.createElement(CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url), isHovered: showHoverState })))));
 };
 
 function _extends() {
@@ -39279,7 +39311,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) }))),
@@ -40027,8 +40059,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)))));
@@ -40036,7 +40068,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) {
@@ -40045,27 +40076,18 @@ var ItemGroup = function (_a) {
             }
         });
     }, [children]);
-    useEffect(function () {
-        // useEffect does not run in ReactDomServer renders
-        setHasClientSideJavaScript(true);
-    }, [setHasClientSideJavaScript]);
-    var ElementType = "div";
-    if (title) {
-        ElementType = "details";
-    }
+    var ElementType = title ? "details" : "div";
     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("a", { onClick: handleLinkClick({
-                            handler: onClick
-                        }), className: "arc-SiteHeaderV2ItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL
-                            ? 0
-                            : -1 }, title),
+                React__default.createElement("summary", { tabIndex: isMinWidthArcBreakpointL ? -1 : 0, className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
+                    React__default.createElement(ConditionalWrapper, { condition: isMinWidthArcBreakpointL, wrapper: function (children) { return (React__default.createElement("a", { onClick: handleLinkClick({
+                                handler: onClick
+                            }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, children)); }, fallback: function (children) { return (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, children)); } }, 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({
@@ -40082,8 +40104,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) {
@@ -40101,19 +40123,21 @@ 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;
+            var _a, _b, _c, _d;
+            (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
             // Don't close the Panel…
             if (
             // The click is inside the current SubNavItem.
-            ((_a = subNavItemRef === null || subNavItemRef === void 0 ? void 0 : subNavItemRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) ||
+            ((_c = subNavItemRef === null || subNavItemRef === void 0 ? void 0 : subNavItemRef.current) === null || _c === void 0 ? void 0 : _c.contains(e.target)) ||
                 // The click is inside the current NavItem
                 // and the Panel is not inside a SubNavItem.
                 // and the target is not a link
-                (((_b = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target)) &&
+                (((_d = navItemRef === null || navItemRef === void 0 ? void 0 : navItemRef.current) === null || _d === void 0 ? void 0 : _d.contains(e.target)) &&
                     !subNavItemRef &&
                     !e.target.getAttribute("href")) ||
                 // The Panel is inside a SubNavItem
@@ -40145,9 +40169,12 @@ var Panel = function (_a) {
         subNavItemRef,
         subNavLink,
         setOpenPanelOnFirstClick,
+        menubarRef,
     ]);
     useEffect(function () {
         var handleClick = function (e) {
+            var _a, _b;
+            (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
             // Close the Panel…
             if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
                 setOpenPanelOnFirstClick(false);
@@ -40163,9 +40190,10 @@ var Panel = function (_a) {
         return function () {
             document.removeEventListener("click", handleClick);
         };
-    }, [navItemRef, setOpenPanelOnFirstClick]);
+    }, [navItemRef, setOpenPanelOnFirstClick, menubarRef]);
     useEffect(function () {
         var handleKeydown = function (e) {
+            var _a, _b;
             // Check the viewport width at time of press
             var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(ArcBreakpointL, "px)")).matches;
             if (e.key === "Escape" || e.keyCode === 27) {
@@ -40176,12 +40204,15 @@ var Panel = function (_a) {
                 }
                 return setOpen(false);
             }
+            if (e.key === "Tab") {
+                (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.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,
@@ -40270,8 +40301,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,
@@ -40409,10 +40441,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,
@@ -40545,7 +40578,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;
 /**
@@ -40557,6 +40590,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 &&
@@ -40590,6 +40624,10 @@ var SiteHeaderV2 = function (_a) {
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [setMenuOpen]);
+    useEffect(function () {
+        var _a, _b;
+        (_b = (_a = menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add("noFocus");
+    }, []);
     useEffect(function () {
         var handleClick = function (e) {
             if (e.target.getAttribute("href")) {
@@ -40605,7 +40643,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,
@@ -40622,8 +40660,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,
@@ -40638,6 +40676,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;
@@ -41649,15 +41690,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") })));
 });
 
 /**
@@ -42674,20 +42716,22 @@ var Truncate = function (_a) {
 };
 
 var TypographyCard = function (_a) {
-    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.buttonIcon, buttonIcon = _d === void 0 ? "arrow" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "linkData", "pathway", "buttonIcon", "headingLevel"]);
+    var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.buttonIcon, buttonIcon = _d === void 0 ? "arrow" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "linkData", "pathway", "buttonIcon", "headingLevel"]);
+    var surface = useContext(Context$5).surface;
     var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     var isDarkPathway = pathway === "dark";
-    return (React__default.createElement("div", __assign({ className: classNames("arc-TypographyCard", {
+    return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-TypographyCard", {
             "arc-TypographyCard--outlined": showHoverState,
             "arc-TypographyCard--darkPathway": isDarkPathway,
-            "arc-TypographyCard--lightPathway": !isDarkPathway
+            "arc-TypographyCard--lightPathway": !isDarkPathway,
+            "arc-TypographyCard--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
         React__default.createElement("div", { className: "arc-TypographyCard-contentContainer" },
             label && (React__default.createElement("div", { className: "arc-TypographyCard-labelContainer" },
-                React__default.createElement(CardLabel, { isDarkPathway: isDarkPathway, isBold: false, text: label }))),
+                React__default.createElement(CardLabel, { isDarkPathway: isDarkPathway, isBold: true, text: label }))),
             React__default.createElement(CardHeading, { size: "m", linkData: linkData, heading: heading, headingLevel: headingLevel, href: url, onClick: onClick, isDarkPathway: isDarkPathway, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
-        React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, showFilledIcon: showHoverState, buttonIcon: buttonIcon, metaText: metaText })));
+        React__default.createElement(CardFooter, { showButton: true, isDarkPathway: isDarkPathway, buttonIcon: buttonIcon, metaText: metaText, isHovered: showHoverState })));
 };
 
 /**
@@ -42715,5 +42759,5 @@ var UniversalHeaderItem = function (_a) {
 };
 UniversalHeader.Item = UniversalHeaderItem;
 
-export { Alert, Align, Avatar, AvatarGroup, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Group, Heading, Icon, Image, InformationCard, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, SiteHeaderV2, Surface, Context$5 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, VisuallyHidden };
+export { Alert, Align, Avatar, AvatarGroup, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Group, Heading, Icon, Image, ImpactCard, InformationCard, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, SiteHeaderV2, Surface, Context$5 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, VisuallyHidden };
 //# sourceMappingURL=index.es.js.map