@arc-ui/components 11.21.0 → 11.22.0

package/dist/_shared/cjs/{Filter-1bde635c.js → Filter-f4b73f5d.js}

@@ -20,7 +20,7 @@ var FilterControl = function (_a) {
     return (React__default["default"].createElement("button", { className: index.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["default"].createElement("div", { className: "arc-FilterControl-text" }, children)));
 };
 
@@ -38,16 +38,20 @@ var FilterItem = function (_a) {
 };
 
 var FilterItems = function (_a) {
-    var children = _a.children, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = filterDataAttrs.__rest(_a, ["children", "displayType"]);
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-FilterItems", {
-            "arc-FilterItems--list": displayType === "list",
-            "arc-FilterItems--grid": displayType === "grid"
-        }) }, filterDataAttrs.filterDataAttrs(props)), displayType === "list"
-        ? React__default["default"].Children.toArray(children).map(function (child, index, array) { return (React__default["default"].createElement(React__default["default"].Fragment, { key: index },
-            child,
-            index !== array.length - 1 && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["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 = filterDataAttrs.__rest(_a, ["children", "error", "displayType"]);
+    return React__default["default"].Children.toArray(children).length > 0 ? (React__default["default"].createElement("div", null,
+        React__default["default"].createElement("div", { className: "arc-FilterItems-offscreen", "aria-live": "assertive" }, React__default["default"].Children.toArray(children).length > 0
+            ? "".concat(React__default["default"].Children.toArray(children).length, " records listed.")
+            : null),
+        React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames("arc-FilterItems", {
+                "arc-FilterItems--list": displayType === "list",
+                "arc-FilterItems--grid": displayType === "grid"
+            }) }, filterDataAttrs.filterDataAttrs(props)), displayType === "list"
+            ? React__default["default"].Children.toArray(children).map(function (child, index, array) { return (React__default["default"].createElement(React__default["default"].Fragment, { key: index },
+                child,
+                index !== array.length - 1 && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
+            : children))) : (React__default["default"].createElement("div", { "aria-live": "assertive" }, error));
 };
 
 /** use `Filter` for interactive elements that filter and categorise page content. */
@@ -107,7 +111,7 @@ var Filter = function (_a) {
         React__default["default"].createElement(FilterControls, { controlsAlignment: controlsAlignment }, controls &&
             React__default["default"].isValidElement(controls) &&
             React__default["default"].Children.map(controls.props.children, function (control, index) { return (React__default["default"].createElement(FilterControl, { key: index, onClick: function () { return handleControlClick(control.props.children); }, isSelected: control.props.isSelected }, control.props.children)); })),
-        filteredItems.length === 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, error)) : (React__default["default"].createElement(FilterItems, { displayType: displayType }, filteredItems.map(function (item) { return item.props.children; })))));
+        React__default["default"].createElement(FilterItems, { displayType: displayType, error: error }, filteredItems.map(function (item) { return item.props.children; }))));
 };
 Filter.Controls = FilterControls;
 Filter.Control = FilterControl;

package/dist/_shared/cjs/{SiteHeaderV2-301c765c.js → SiteHeaderV2-e0735a9d.js}

@@ -8,6 +8,7 @@ var BrandLogo = require('./BrandLogo-aea340c8.js');
 var Surface = require('./Surface-038db6e1.js');
 var handleLinkClick = require('./handle-link-click-17a44cf4.js');
 var BtIconChevronRightMid_esm = require('./BtIconChevronRightMid.esm-d01ebbd4.js');
+var ConditionalWrapper = require('./ConditionalWrapper-be3b2625.js');
 var BtIconChevronRight2Px_esm = require('./BtIconChevronRight2Px.esm-dbf8cbee.js');
 var Button = require('./Button-84533dc8.js');
 var suffixModifier = require('./suffix-modifier-64dcd338.js');
@@ -24,8 +25,8 @@ var Item = function (_a) {
     return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: index.classNames((_b = {},
             _b["arc-SiteHeaderV2Item"] = true,
             _b["arc-SiteHeaderV2Item--emphasised"] = true,
-            _b)) }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href },
+            _b)) }, filterDataAttrs.filterDataAttrs(props), { role: "none" }),
+        React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href, role: "menuitem" },
             children,
             React__default["default"].createElement("span", { className: "arc-SiteHeaderV2Item-linkIcon" },
                 React__default["default"].createElement(BtIconChevronRightMid_esm.BtIconChevronRightMid, null)))));
@@ -33,7 +34,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 = filterDataAttrs.__rest(_a, ["children", "href", "title", "subtitle", "onClick", "viewAllTitle"]);
-    var _b = React.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
@@ -42,27 +42,18 @@ var ItemGroup = function (_a) {
             }
         });
     }, [children]);
-    React.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["default"].createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
         React__default["default"].createElement(ElementType, filterDataAttrs.__assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs.filterDataAttrs(props)),
             title ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
-                    React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
-                            handler: onClick
-                        }), className: "arc-SiteHeaderV2ItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL
-                            ? 0
-                            : -1 }, title),
+                React__default["default"].createElement("summary", { tabIndex: isMinWidthArcBreakpointL ? -1 : 0, className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
+                    React__default["default"].createElement(ConditionalWrapper.ConditionalWrapper, { condition: isMinWidthArcBreakpointL, wrapper: function (children) { return (React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
+                                handler: onClick
+                            }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, children)); }, fallback: function (children) { return (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, children)); } }, title),
                     React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
                         React__default["default"].createElement(BtIconChevronRightMid_esm.BtIconChevronRightMid, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
                 React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
-            React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
+            React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items", role: "menubar" },
                 children,
                 href && title ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderV2Item arc-SiteHeaderV2Item--viewAll" },
                     React__default["default"].createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick.handleLinkClick({
@@ -79,8 +70,8 @@ var Column = function (_a) {
             }
         });
     }, [children]);
-    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs.filterDataAttrs(props)),
-        React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2Column-items" }, children)));
+    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs.filterDataAttrs(props), { role: "none" }),
+        React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2Column-items", role: "none" }, children)));
 };
 
 var BackButton = function (_a) {
@@ -98,19 +89,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 = filterDataAttrs.__rest(_a, ["children", "navItemRef", "isNavItem", "open", "setOpen", "setOpenPanelOnFirstClick", "subNavItemRef", "navLink", "subNavLink", "title", "subtitle", "viewAll", "withSubNav", "fade", "isPrimary"]);
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
+    var menubarRef = useHeaderV2Context().menubarRef;
     React.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
@@ -142,9 +135,12 @@ var Panel = function (_a) {
         subNavItemRef,
         subNavLink,
         setOpenPanelOnFirstClick,
+        menubarRef,
     ]);
     React.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);
@@ -160,9 +156,10 @@ var Panel = function (_a) {
         return function () {
             document.removeEventListener("click", handleClick);
         };
-    }, [navItemRef, setOpenPanelOnFirstClick]);
+    }, [navItemRef, setOpenPanelOnFirstClick, menubarRef]);
     React.useEffect(function () {
         var handleKeydown = function (e) {
+            var _a, _b;
             // Check the viewport width at time of press
             var isMinWidthArcBreakpointL = window.matchMedia("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)")).matches;
             if (e.key === "Escape" || e.keyCode === 27) {
@@ -173,12 +170,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["default"].createElement("div", { style: { display: "flex" } },
         React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
                 _b["arc-SiteHeaderV2Panel"] = true,
@@ -267,8 +267,9 @@ var NavItem = function (_a) {
             handler: onClick
         }), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
-            React__default["default"].createElement("button", { "aria-expanded": panelOpen, className: index.classNames((_c = {},
+            React__default["default"].createElement("button", { "aria-expanded": panelOpen, role: "menuitem", "aria-haspopup": "true", "aria-label": title, className: index.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,
@@ -406,10 +407,11 @@ var NavItemWithSubNav = function (_a) {
                     ? horizontalPanelOpen
                     : panelOpen,
                 _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
-                _b)), ref: navItem }, filterDataAttrs.filterDataAttrs(props)),
+                _b)), role: "none", ref: navItem }, filterDataAttrs.filterDataAttrs(props)),
             React__default["default"].createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
-                React__default["default"].createElement("button", { "aria-expanded": horizontalPanelOpen, className: index.classNames((_c = {},
+                React__default["default"].createElement("button", { "aria-expanded": horizontalPanelOpen || panelOpen, role: "menuitem", "aria-label": title, "aria-haspopup": "true", tabIndex: 0, className: index.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,
@@ -542,7 +544,7 @@ var VerticalDivider = function () {
     return React__default["default"].createElement("li", { className: "arc-SiteHeaderV2VerticalDivider-line" });
 };
 
-var defaultContext = { transparent: false };
+var defaultContext = { transparent: false, menubarRef: null };
 var Context = React.createContext(defaultContext);
 var Provider = Context.Provider;
 /**
@@ -554,6 +556,7 @@ var SiteHeaderV2 = function (_a) {
     var _j = React.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
     var _k = React.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
     var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
+    var menubarRef = React.useRef();
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item &&
@@ -587,6 +590,10 @@ var SiteHeaderV2 = function (_a) {
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [setMenuOpen]);
+    React.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");
+    }, []);
     React.useEffect(function () {
         var handleClick = function (e) {
             if (e.target.getAttribute("href")) {
@@ -602,7 +609,7 @@ var SiteHeaderV2 = function (_a) {
         // useEffect does not run in ReactDomServer renders
         setHasClientSideJavaScript(true);
     }, [setHasClientSideJavaScript]);
-    return (React__default["default"].createElement(Provider, { value: { transparent: isTransparent } },
+    return (React__default["default"].createElement(Provider, { value: { transparent: isTransparent, menubarRef: menubarRef } },
         React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
                 _b["arc-SiteHeaderV2"] = true,
                 _b["arc-SiteHeaderV2--menuOpen"] = menuOpen,
@@ -619,8 +626,8 @@ var SiteHeaderV2 = function (_a) {
                     children && (React__default["default"].createElement("nav", { className: "arc-SiteHeaderV2-nav" },
                         React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
                             React__default["default"].createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
-                        React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-main" },
-                            React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2-navItems" }, children),
+                        React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-main", tabIndex: -1 },
+                            React__default["default"].createElement("ul", { role: "menubar", "aria-label": "navigation", ref: menubarRef, className: "arc-SiteHeaderV2-navItems" }, children),
                             hasLogin && (React__default["default"].createElement(React__default["default"].Fragment, null, loginOnClick ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
                                 React__default["default"].createElement("button", { className: "arc-SiteHeaderV2-mobileLogin", onClick: loginOnClick },
                                     loginTitle,
@@ -635,6 +642,9 @@ var SiteHeaderV2 = function (_a) {
                         basket ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-basket" }, basket)) : null,
                         hasLogin && (React__default["default"].createElement(React__default["default"].Fragment, null, loginOnClick ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-loginLink arc-SiteHeaderV2-loginLink--function", onClick: loginOnClick }, loginTitle)) : (React__default["default"].createElement("a", { className: "arc-SiteHeaderV2-loginLink", href: loginHref }, loginTitle)))))))))));
 };
+function useHeaderV2Context() {
+    return React.useContext(Context);
+}
 SiteHeaderV2.Column = Column;
 SiteHeaderV2.Item = Item;
 SiteHeaderV2.ItemGroup = ItemGroup;

package/dist/_shared/esm/{CardFooter-a08b70ee.js → CardFooter-e13f77b0.js}

@@ -47,7 +47,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,
@@ -59,16 +59,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 }))))))));
 };
 
 export { CardFooter as C };

package/dist/_shared/esm/{Filter-58a42358.js → Filter-ad254e3d.js}

@@ -14,7 +14,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)));
 };
 
@@ -32,16 +32,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. */
@@ -101,7 +105,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;

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

@@ -1,11 +1,12 @@
 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';
 import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-32268f1a.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper-59be8f35.js';
 import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-75e92636.js';
 import { B as Button } from './Button-3f294e64.js';
 import { s as suffixModifier } from './suffix-modifier-3d548e45.js';
@@ -18,8 +19,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 +28,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,27 +36,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({
@@ -73,8 +64,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,19 +83,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
@@ -136,9 +129,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);
@@ -154,9 +150,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) {
@@ -167,12 +164,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,
@@ -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,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")) {
@@ -596,7 +603,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 +620,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 +636,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;