@arc-ui/components 11.21.0 → 11.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/Select/Select.cjs.js +1 -1
  2. package/dist/Select/Select.esm.js +1 -1
  3. package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js +1 -1
  4. package/dist/SiteHeaderV2/SiteHeaderV2.esm.js +1 -1
  5. package/dist/TextArea/TextArea.cjs.js +6 -5
  6. package/dist/TextArea/TextArea.esm.js +6 -5
  7. package/dist/_shared/cjs/{SiteHeaderV2-301c765c.js → SiteHeaderV2-b41fdb49.js} +32 -23
  8. package/dist/_shared/esm/{SiteHeaderV2-0096e25b.js → SiteHeaderV2-f06ac085.js} +33 -24
  9. package/dist/index.es.js +37 -27
  10. package/dist/index.es.js.map +1 -1
  11. package/dist/index.js +37 -27
  12. package/dist/index.js.map +1 -1
  13. package/dist/styles.css +3 -3
  14. package/dist/types/components/SiteHeaderV2/SiteHeaderV2.d.ts +5 -0
  15. package/package.json +1 -1
package/dist/Select/Select.cjs.js CHANGED
@@ -1201,7 +1201,7 @@ var Select = function (_a) {
1201
1201
  "arc-Select-trigger--invalid": errorMessage
1202
1202
  },
1203
1203
  _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
1204
- _b)) }, filterDataAttrs.filterDataAttrs(props)),
1204
+ _b)), "aria-describedby": "".concat(id, "-helper") }, filterDataAttrs.filterDataAttrs(props)),
1205
1205
  React__default["default"].createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
1206
1206
  React__default["default"].createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
1207
1207
  React__default["default"].createElement(Icon.Icon, { icon: BtIconChevronDown2Px_esm.BtIconChevronDown2Px, size: getIconSize(selectSize) }))),
package/dist/Select/Select.esm.js CHANGED
@@ -1193,7 +1193,7 @@ var Select = function (_a) {
1193
1193
  "arc-Select-trigger--invalid": errorMessage
1194
1194
  },
1195
1195
  _b["arc-Select-trigger--size".concat(selectSize && selectSize.toUpperCase())] = selectSize && selectSize !== "m",
1196
- _b)) }, filterDataAttrs(props)),
1196
+ _b)), "aria-describedby": "".concat(id, "-helper") }, filterDataAttrs(props)),
1197
1197
  React__default.createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { className: "arc-Select-triggerText", placeholder: placeholder, "aria-label": getSelectedValueName(uncontrolledValue) }),
1198
1198
  React__default.createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
1199
1199
  React__default.createElement(Icon, { icon: BtIconChevronDown2Px, size: getIconSize(selectSize) }))),
package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var SiteHeaderV2 = require('../_shared/cjs/SiteHeaderV2-301c765c.js');
5
+ var SiteHeaderV2 = require('../_shared/cjs/SiteHeaderV2-b41fdb49.js');
6
6
  require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
7
7
  require('../_shared/cjs/use-media-query-e61881d8.js');
8
8
  require('react');
package/dist/SiteHeaderV2/SiteHeaderV2.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- export { S as SiteHeaderV2 } from '../_shared/esm/SiteHeaderV2-0096e25b.js';
1
+ export { S as SiteHeaderV2 } from '../_shared/esm/SiteHeaderV2-f06ac085.js';
2
2
  import '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
3
3
  import '../_shared/esm/use-media-query-4c807227.js';
4
4
  import 'react';
package/dist/TextArea/TextArea.cjs.js CHANGED
@@ -24,11 +24,12 @@ require('../_shared/cjs/RadioGroup-07bb155e.js');
24
24
  require('../_shared/cjs/debounce-123468fb.js');
25
25
  require('../_shared/cjs/SiteFooter-65b6360c.js');
26
26
  require('../_shared/cjs/SiteHeader.rehydrator-ea49f8d5.js');
27
- require('../_shared/cjs/SiteHeaderV2-301c765c.js');
27
+ require('../_shared/cjs/SiteHeaderV2-b41fdb49.js');
28
28
  require('../_shared/cjs/Tabs-24e6f45b.js');
29
29
  require('../_shared/cjs/TextInput-5da70ec2.js');
30
30
  require('../_shared/cjs/Toast-7a20d1b9.js');
31
31
  require('../_shared/cjs/UniversalHeader-b8389447.js');
32
+ var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
32
33
  require('../_shared/cjs/suffix-modifier-64dcd338.js');
33
34
  require('../_shared/cjs/BtIconChevronRight2Px.esm-dbf8cbee.js');
34
35
  require('../_shared/cjs/Icon-b46897a3.js');
@@ -39,7 +40,6 @@ require('../_shared/cjs/BtIconTickAlt2Px.esm-57c89acc.js');
39
40
  require('../_shared/cjs/BtIconAlert.esm-1a0ff9f0.js');
40
41
  require('../_shared/cjs/DisclosureMini-d0eeb6bb.js');
41
42
  require('../_shared/cjs/BtIconChevronDown2Px.esm-39030ee0.js');
42
- require('../_shared/cjs/VisuallyHidden-e2c8b291.js');
43
43
  require('../_shared/cjs/use-media-query-e61881d8.js');
44
44
  require('../_shared/cjs/BrandLogo-aea340c8.js');
45
45
  require('../_shared/cjs/Curve-d038052b.js');
@@ -89,15 +89,16 @@ var TextArea = React.forwardRef(function (_a, ref) {
89
89
  return (React__default["default"].createElement(FormControl.FormControl, filterDataAttrs.__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 &&
90
90
  showCharacterCount && (React__default["default"].createElement(React__default["default"].Fragment, null,
91
91
  React__default["default"].createElement(Text.Text, { tone: isDisabled ? "muted" : "default" },
92
- React__default["default"].createElement("span", { className: "arc-TextArea-characterCount" },
92
+ React__default["default"].createElement("span", { className: "arc-TextArea-characterCount", "aria-live": "polite" },
93
93
  characterCount,
94
94
  " / ",
95
- maxLength)))) }, filterDataAttrs.filterDataAttrs(props)),
95
+ maxLength,
96
+ characterCount === maxLength && (React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null, "Maximum characters reached")))))) }, filterDataAttrs.filterDataAttrs(props)),
96
97
  React__default["default"].createElement("textarea", { id: id, className: index.classNames("arc-TextArea", {
97
98
  "arc-TextArea--noResize": resize !== "manual",
98
99
  "arc-TextArea--onDarkSurface": surface === "dark",
99
100
  "arc-TextArea--invalid": errorMessage
100
- }), 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 } })));
101
+ }), 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") })));
101
102
  });
102
103
 
103
104
  exports.TextArea = TextArea;
package/dist/TextArea/TextArea.esm.js CHANGED
@@ -20,11 +20,12 @@ import '../_shared/esm/RadioGroup-362be63f.js';
20
20
  import '../_shared/esm/debounce-6fed6b84.js';
21
21
  import '../_shared/esm/SiteFooter-38ee1536.js';
22
22
  import '../_shared/esm/SiteHeader.rehydrator-65c8cf71.js';
23
- import '../_shared/esm/SiteHeaderV2-0096e25b.js';
23
+ import '../_shared/esm/SiteHeaderV2-f06ac085.js';
24
24
  import '../_shared/esm/Tabs-a85af483.js';
25
25
  import '../_shared/esm/TextInput-1d1c5fd6.js';
26
26
  import '../_shared/esm/Toast-7a232e15.js';
27
27
  import '../_shared/esm/UniversalHeader-80c7313f.js';
28
+ import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-b9eebf71.js';
28
29
  import '../_shared/esm/suffix-modifier-3d548e45.js';
29
30
  import '../_shared/esm/BtIconChevronRight2Px.esm-75e92636.js';
30
31
  import '../_shared/esm/Icon-15799695.js';
@@ -35,7 +36,6 @@ import '../_shared/esm/BtIconTickAlt2Px.esm-0bc2ded0.js';
35
36
  import '../_shared/esm/BtIconAlert.esm-a4608d47.js';
36
37
  import '../_shared/esm/DisclosureMini-ec17b008.js';
37
38
  import '../_shared/esm/BtIconChevronDown2Px.esm-217276c2.js';
38
- import '../_shared/esm/VisuallyHidden-b9eebf71.js';
39
39
  import '../_shared/esm/use-media-query-4c807227.js';
40
40
  import '../_shared/esm/BrandLogo-1af78f76.js';
41
41
  import '../_shared/esm/Curve-d8679dde.js';
@@ -81,15 +81,16 @@ var TextArea = forwardRef(function (_a, ref) {
81
81
  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 &&
82
82
  showCharacterCount && (React__default.createElement(React__default.Fragment, null,
83
83
  React__default.createElement(Text, { tone: isDisabled ? "muted" : "default" },
84
- React__default.createElement("span", { className: "arc-TextArea-characterCount" },
84
+ React__default.createElement("span", { className: "arc-TextArea-characterCount", "aria-live": "polite" },
85
85
  characterCount,
86
86
  " / ",
87
- maxLength)))) }, filterDataAttrs(props)),
87
+ maxLength,
88
+ characterCount === maxLength && (React__default.createElement(VisuallyHidden, null, "Maximum characters reached")))))) }, filterDataAttrs(props)),
88
89
  React__default.createElement("textarea", { id: id, className: classNames("arc-TextArea", {
89
90
  "arc-TextArea--noResize": resize !== "manual",
90
91
  "arc-TextArea--onDarkSurface": surface === "dark",
91
92
  "arc-TextArea--invalid": errorMessage
92
- }), 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 } })));
93
+ }), 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") })));
93
94
  });
94
95
 
95
96
  export { TextArea };
package/dist/_shared/cjs/{SiteHeaderV2-301c765c.js → SiteHeaderV2-b41fdb49.js} RENAMED
@@ -24,8 +24,8 @@ var Item = function (_a) {
24
24
  return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: index.classNames((_b = {},
25
25
  _b["arc-SiteHeaderV2Item"] = true,
26
26
  _b["arc-SiteHeaderV2Item--emphasised"] = true,
27
- _b)) }, filterDataAttrs.filterDataAttrs(props)),
28
- React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href },
27
+ _b)) }, filterDataAttrs.filterDataAttrs(props), { role: "none" }),
28
+ React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href, role: "menuitem" },
29
29
  children,
30
30
  React__default["default"].createElement("span", { className: "arc-SiteHeaderV2Item-linkIcon" },
31
31
  React__default["default"].createElement(BtIconChevronRightMid_esm.BtIconChevronRightMid, null)))));
@@ -33,7 +33,6 @@ var Item = function (_a) {
33
33
 
34
34
  var ItemGroup = function (_a) {
35
35
  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"]);
36
- var _b = React.useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
37
36
  var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
38
37
  React.useEffect(function () {
39
38
  React__default["default"].Children.map(children, function (item) {
@@ -42,10 +41,6 @@ var ItemGroup = function (_a) {
42
41
  }
43
42
  });
44
43
  }, [children]);
45
- React.useEffect(function () {
46
- // useEffect does not run in ReactDomServer renders
47
- setHasClientSideJavaScript(true);
48
- }, [setHasClientSideJavaScript]);
49
44
  var ElementType = "div";
50
45
  if (title) {
51
46
  ElementType = "details";
@@ -53,16 +48,14 @@ var ItemGroup = function (_a) {
53
48
  return (React__default["default"].createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
54
49
  React__default["default"].createElement(ElementType, filterDataAttrs.__assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs.filterDataAttrs(props)),
55
50
  title ? (React__default["default"].createElement(React__default["default"].Fragment, null,
56
- React__default["default"].createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
51
+ React__default["default"].createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
57
52
  React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({
58
53
  handler: onClick
59
- }), className: "arc-SiteHeaderV2ItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL
60
- ? 0
61
- : -1 }, title),
54
+ }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, title),
62
55
  React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
63
56
  React__default["default"].createElement(BtIconChevronRightMid_esm.BtIconChevronRightMid, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
64
57
  React__default["default"].createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
65
- React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
58
+ React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items", role: "menubar" },
66
59
  children,
67
60
  href && title ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderV2Item arc-SiteHeaderV2Item--viewAll" },
68
61
  React__default["default"].createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick.handleLinkClick({
@@ -79,8 +72,8 @@ var Column = function (_a) {
79
72
  }
80
73
  });
81
74
  }, [children]);
82
- return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs.filterDataAttrs(props)),
83
- React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2Column-items" }, children)));
75
+ return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs.filterDataAttrs(props), { role: "none" }),
76
+ React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2Column-items", role: "none" }, children)));
84
77
  };
85
78
 
86
79
  var BackButton = function (_a) {
@@ -98,11 +91,13 @@ var Panel = function (_a) {
98
91
  var _b, _c, _d, _e, _f;
99
92
  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"]);
100
93
  var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
94
+ var menubarRef = useHeaderV2Context().menubarRef;
101
95
  React.useEffect(function () {
102
96
  // Where appropriate, close the Panel when clicking outside of it,
103
97
  // by listening to clicks on the entire document and acting accordingly.
104
98
  var handleClick = function (e) {
105
99
  var _a, _b;
100
+ menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
106
101
  // Don't close the Panel…
107
102
  if (
108
103
  // The click is inside the current SubNavItem.
@@ -142,9 +137,11 @@ var Panel = function (_a) {
142
137
  subNavItemRef,
143
138
  subNavLink,
144
139
  setOpenPanelOnFirstClick,
140
+ menubarRef,
145
141
  ]);
146
142
  React.useEffect(function () {
147
143
  var handleClick = function (e) {
144
+ menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
148
145
  // Close the Panel…
149
146
  if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
150
147
  setOpenPanelOnFirstClick(false);
@@ -160,7 +157,7 @@ var Panel = function (_a) {
160
157
  return function () {
161
158
  document.removeEventListener("click", handleClick);
162
159
  };
163
- }, [navItemRef, setOpenPanelOnFirstClick]);
160
+ }, [navItemRef, setOpenPanelOnFirstClick, menubarRef]);
164
161
  React.useEffect(function () {
165
162
  var handleKeydown = function (e) {
166
163
  // Check the viewport width at time of press
@@ -173,12 +170,15 @@ var Panel = function (_a) {
173
170
  }
174
171
  return setOpen(false);
175
172
  }
173
+ if (e.key === "Tab") {
174
+ menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.remove("noFocus");
175
+ }
176
176
  };
177
177
  window.addEventListener("keydown", handleKeydown);
178
178
  return function () {
179
179
  window.removeEventListener("keydown", handleKeydown);
180
180
  };
181
- }, [setOpen, subNavItemRef]);
181
+ }, [setOpen, subNavItemRef, menubarRef]);
182
182
  return (React__default["default"].createElement("div", { style: { display: "flex" } },
183
183
  React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
184
184
  _b["arc-SiteHeaderV2Panel"] = true,
@@ -267,8 +267,9 @@ var NavItem = function (_a) {
267
267
  handler: onClick
268
268
  }), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default["default"].createElement(React__default["default"].Fragment, null,
269
269
  React__default["default"].createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
270
- React__default["default"].createElement("button", { "aria-expanded": panelOpen, className: index.classNames((_c = {},
270
+ React__default["default"].createElement("button", { "aria-expanded": panelOpen, role: "menuitem", "aria-haspopup": "true", "aria-label": title, className: index.classNames((_c = {},
271
271
  _c["arc-SiteHeaderV2NavItem-link"] = true,
272
+ _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
272
273
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
273
274
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
274
275
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
@@ -406,10 +407,11 @@ var NavItemWithSubNav = function (_a) {
406
407
  ? horizontalPanelOpen
407
408
  : panelOpen,
408
409
  _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
409
- _b)), ref: navItem }, filterDataAttrs.filterDataAttrs(props)),
410
+ _b)), role: "none", ref: navItem }, filterDataAttrs.filterDataAttrs(props)),
410
411
  React__default["default"].createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
411
- React__default["default"].createElement("button", { "aria-expanded": horizontalPanelOpen, className: index.classNames((_c = {},
412
+ React__default["default"].createElement("button", { "aria-expanded": horizontalPanelOpen || panelOpen, role: "menuitem", "aria-label": title, "aria-haspopup": "true", tabIndex: 0, className: index.classNames((_c = {},
412
413
  _c["arc-SiteHeaderV2NavItem-link"] = true,
414
+ _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
413
415
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
414
416
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
415
417
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
@@ -542,7 +544,7 @@ var VerticalDivider = function () {
542
544
  return React__default["default"].createElement("li", { className: "arc-SiteHeaderV2VerticalDivider-line" });
543
545
  };
544
546
 
545
- var defaultContext = { transparent: false };
547
+ var defaultContext = { transparent: false, menubarRef: null };
546
548
  var Context = React.createContext(defaultContext);
547
549
  var Provider = Context.Provider;
548
550
  /**
@@ -554,6 +556,7 @@ var SiteHeaderV2 = function (_a) {
554
556
  var _j = React.useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
555
557
  var _k = React.useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
556
558
  var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(useMediaQuery.ArcBreakpointL, "px)"));
559
+ var menubarRef = React.useRef();
557
560
  React.useEffect(function () {
558
561
  React__default["default"].Children.map(children, function (item) {
559
562
  if (item &&
@@ -587,6 +590,9 @@ var SiteHeaderV2 = function (_a) {
587
590
  window.removeEventListener("keydown", handleKeydown);
588
591
  };
589
592
  }, [setMenuOpen]);
593
+ React.useEffect(function () {
594
+ menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
595
+ }, []);
590
596
  React.useEffect(function () {
591
597
  var handleClick = function (e) {
592
598
  if (e.target.getAttribute("href")) {
@@ -602,7 +608,7 @@ var SiteHeaderV2 = function (_a) {
602
608
  // useEffect does not run in ReactDomServer renders
603
609
  setHasClientSideJavaScript(true);
604
610
  }, [setHasClientSideJavaScript]);
605
- return (React__default["default"].createElement(Provider, { value: { transparent: isTransparent } },
611
+ return (React__default["default"].createElement(Provider, { value: { transparent: isTransparent, menubarRef: menubarRef } },
606
612
  React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames((_b = {},
607
613
  _b["arc-SiteHeaderV2"] = true,
608
614
  _b["arc-SiteHeaderV2--menuOpen"] = menuOpen,
@@ -619,8 +625,8 @@ var SiteHeaderV2 = function (_a) {
619
625
  children && (React__default["default"].createElement("nav", { className: "arc-SiteHeaderV2-nav" },
620
626
  React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
621
627
  React__default["default"].createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
622
- React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-main" },
623
- React__default["default"].createElement("ul", { className: "arc-SiteHeaderV2-navItems" }, children),
628
+ React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-main", tabIndex: -1 },
629
+ React__default["default"].createElement("ul", { role: "menubar", "aria-label": "navigation", ref: menubarRef, className: "arc-SiteHeaderV2-navItems" }, children),
624
630
  hasLogin && (React__default["default"].createElement(React__default["default"].Fragment, null, loginOnClick ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
625
631
  React__default["default"].createElement("button", { className: "arc-SiteHeaderV2-mobileLogin", onClick: loginOnClick },
626
632
  loginTitle,
@@ -635,6 +641,9 @@ var SiteHeaderV2 = function (_a) {
635
641
  basket ? (React__default["default"].createElement("div", { className: "arc-SiteHeaderV2-basket" }, basket)) : null,
636
642
  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)))))))))));
637
643
  };
644
+ function useHeaderV2Context() {
645
+ return React.useContext(Context);
646
+ }
638
647
  SiteHeaderV2.Column = Column;
639
648
  SiteHeaderV2.Item = Item;
640
649
  SiteHeaderV2.ItemGroup = ItemGroup;
package/dist/_shared/esm/{SiteHeaderV2-0096e25b.js → SiteHeaderV2-f06ac085.js} RENAMED
@@ -1,7 +1,7 @@
1
1
  import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-ea8f4ed4.js';
2
2
  import { u as useMediaQuery, b as ArcBreakpointL } from './use-media-query-4c807227.js';
3
3
  import { c as classNames } from './index-2e73c2e9.js';
4
- import React__default, { useState, useEffect, Fragment, useRef, createContext, useContext } from 'react';
4
+ import React__default, { useEffect, Fragment, useRef, useState, createContext, useContext } from 'react';
5
5
  import { B as BrandLogo } from './BrandLogo-1af78f76.js';
6
6
  import { S as Surface } from './Surface-0ca6817d.js';
7
7
  import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
@@ -18,8 +18,8 @@ var Item = function (_a) {
18
18
  return (React__default.createElement("li", __assign({ className: classNames((_b = {},
19
19
  _b["arc-SiteHeaderV2Item"] = true,
20
20
  _b["arc-SiteHeaderV2Item--emphasised"] = true,
21
- _b)) }, filterDataAttrs(props)),
22
- React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href },
21
+ _b)) }, filterDataAttrs(props), { role: "none" }),
22
+ React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderV2Item-link", href: href, role: "menuitem" },
23
23
  children,
24
24
  React__default.createElement("span", { className: "arc-SiteHeaderV2Item-linkIcon" },
25
25
  React__default.createElement(BtIconChevronRightMid, null)))));
@@ -27,7 +27,6 @@ var Item = function (_a) {
27
27
 
28
28
  var ItemGroup = function (_a) {
29
29
  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"]);
30
- var _b = useState(false), hasClientSideJavaScript = _b[0], setHasClientSideJavaScript = _b[1];
31
30
  var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
32
31
  useEffect(function () {
33
32
  React__default.Children.map(children, function (item) {
@@ -36,10 +35,6 @@ var ItemGroup = function (_a) {
36
35
  }
37
36
  });
38
37
  }, [children]);
39
- useEffect(function () {
40
- // useEffect does not run in ReactDomServer renders
41
- setHasClientSideJavaScript(true);
42
- }, [setHasClientSideJavaScript]);
43
38
  var ElementType = "div";
44
39
  if (title) {
45
40
  ElementType = "details";
@@ -47,16 +42,14 @@ var ItemGroup = function (_a) {
47
42
  return (React__default.createElement("li", { className: "arc-SiteHeaderV2ItemGroup" },
48
43
  React__default.createElement(ElementType, __assign({ className: "arc-SiteHeaderV2ItemGroup-details", open: Boolean(title && isMinWidthArcBreakpointL) }, filterDataAttrs(props)),
49
44
  title ? (React__default.createElement(React__default.Fragment, null,
50
- React__default.createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary", tabIndex: isMinWidthArcBreakpointL ? -1 : 0 }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
45
+ React__default.createElement("summary", { className: "arc-SiteHeaderV2ItemGroup-summary" }, href ? (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-heading" },
51
46
  React__default.createElement("a", { onClick: handleLinkClick({
52
47
  handler: onClick
53
- }), className: "arc-SiteHeaderV2ItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL
54
- ? 0
55
- : -1 }, title),
48
+ }), className: "arc-SiteHeaderV2ItemGroup-title", href: href }, title),
56
49
  React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-titleIcon" },
57
50
  React__default.createElement(BtIconChevronRightMid, null)))) : (React__default.createElement("div", { className: "arc-SiteHeaderV2ItemGroup-title" }, title))),
58
51
  React__default.createElement("span", { className: "arc-SiteHeaderV2ItemGroup-subtitle" }, subtitle))) : null,
59
- React__default.createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items" },
52
+ React__default.createElement("ul", { className: "arc-SiteHeaderV2ItemGroup-items", role: "menubar" },
60
53
  children,
61
54
  href && title ? (React__default.createElement("li", { className: "arc-SiteHeaderV2Item arc-SiteHeaderV2Item--viewAll" },
62
55
  React__default.createElement("a", { className: "arc-SiteHeaderV2Item-link", onClick: handleLinkClick({
@@ -73,8 +66,8 @@ var Column = function (_a) {
73
66
  }
74
67
  });
75
68
  }, [children]);
76
- return (React__default.createElement("li", __assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs(props)),
77
- React__default.createElement("ul", { className: "arc-SiteHeaderV2Column-items" }, children)));
69
+ return (React__default.createElement("li", __assign({ className: "arc-SiteHeaderV2Column" }, filterDataAttrs(props), { role: "none" }),
70
+ React__default.createElement("ul", { className: "arc-SiteHeaderV2Column-items", role: "none" }, children)));
78
71
  };
79
72
 
80
73
  var BackButton = function (_a) {
@@ -92,11 +85,13 @@ var Panel = function (_a) {
92
85
  var _b, _c, _d, _e, _f;
93
86
  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"]);
94
87
  var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
88
+ var menubarRef = useHeaderV2Context().menubarRef;
95
89
  useEffect(function () {
96
90
  // Where appropriate, close the Panel when clicking outside of it,
97
91
  // by listening to clicks on the entire document and acting accordingly.
98
92
  var handleClick = function (e) {
99
93
  var _a, _b;
94
+ menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
100
95
  // Don't close the Panel…
101
96
  if (
102
97
  // The click is inside the current SubNavItem.
@@ -136,9 +131,11 @@ var Panel = function (_a) {
136
131
  subNavItemRef,
137
132
  subNavLink,
138
133
  setOpenPanelOnFirstClick,
134
+ menubarRef,
139
135
  ]);
140
136
  useEffect(function () {
141
137
  var handleClick = function (e) {
138
+ menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
142
139
  // Close the Panel…
143
140
  if (e.target.classList.contains("arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel")) {
144
141
  setOpenPanelOnFirstClick(false);
@@ -154,7 +151,7 @@ var Panel = function (_a) {
154
151
  return function () {
155
152
  document.removeEventListener("click", handleClick);
156
153
  };
157
- }, [navItemRef, setOpenPanelOnFirstClick]);
154
+ }, [navItemRef, setOpenPanelOnFirstClick, menubarRef]);
158
155
  useEffect(function () {
159
156
  var handleKeydown = function (e) {
160
157
  // Check the viewport width at time of press
@@ -167,12 +164,15 @@ var Panel = function (_a) {
167
164
  }
168
165
  return setOpen(false);
169
166
  }
167
+ if (e.key === "Tab") {
168
+ menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.remove("noFocus");
169
+ }
170
170
  };
171
171
  window.addEventListener("keydown", handleKeydown);
172
172
  return function () {
173
173
  window.removeEventListener("keydown", handleKeydown);
174
174
  };
175
- }, [setOpen, subNavItemRef]);
175
+ }, [setOpen, subNavItemRef, menubarRef]);
176
176
  return (React__default.createElement("div", { style: { display: "flex" } },
177
177
  React__default.createElement("div", __assign({ className: classNames((_b = {},
178
178
  _b["arc-SiteHeaderV2Panel"] = true,
@@ -261,8 +261,9 @@ var NavItem = function (_a) {
261
261
  handler: onClick
262
262
  }), className: "arc-SiteHeaderV2NavItem-link", href: href }, title)) : null) : (React__default.createElement(React__default.Fragment, null,
263
263
  React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
264
- React__default.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
264
+ React__default.createElement("button", { "aria-expanded": panelOpen, role: "menuitem", "aria-haspopup": "true", "aria-label": title, className: classNames((_c = {},
265
265
  _c["arc-SiteHeaderV2NavItem-link"] = true,
266
+ _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
266
267
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
267
268
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
268
269
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
@@ -400,10 +401,11 @@ var NavItemWithSubNav = function (_a) {
400
401
  ? horizontalPanelOpen
401
402
  : panelOpen,
402
403
  _b["arc-SiteHeaderV2NavItemWithSubNav-active"] = panelOpen || (opensFirstWithPanel && openSecondaryWithSubNav),
403
- _b)), ref: navItem }, filterDataAttrs(props)),
404
+ _b)), role: "none", ref: navItem }, filterDataAttrs(props)),
404
405
  React__default.createElement("div", { className: "arc-SiteHeaderV2NavItemWithSubNav-buttonContainer" },
405
- React__default.createElement("button", { "aria-expanded": horizontalPanelOpen, className: classNames((_c = {},
406
+ React__default.createElement("button", { "aria-expanded": horizontalPanelOpen || panelOpen, role: "menuitem", "aria-label": title, "aria-haspopup": "true", tabIndex: 0, className: classNames((_c = {},
406
407
  _c["arc-SiteHeaderV2NavItem-link"] = true,
408
+ _c["arc-SiteHeaderV2NavItem-horizontalPanelFocus"] = !isPrimary,
407
409
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren"] = true,
408
410
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-closeFirstPanel"] = !isPrimary && !opensFirstWithPanel,
409
411
  _c["arc-SiteHeaderV2NavItem-link--itemHasChildren-hasFirstPanel"] = opensFirstWithPanel,
@@ -536,7 +538,7 @@ var VerticalDivider = function () {
536
538
  return React__default.createElement("li", { className: "arc-SiteHeaderV2VerticalDivider-line" });
537
539
  };
538
540
 
539
- var defaultContext = { transparent: false };
541
+ var defaultContext = { transparent: false, menubarRef: null };
540
542
  var Context = createContext(defaultContext);
541
543
  var Provider = Context.Provider;
542
544
  /**
@@ -548,6 +550,7 @@ var SiteHeaderV2 = function (_a) {
548
550
  var _j = useState(false), hasClientSideJavaScript = _j[0], setHasClientSideJavaScript = _j[1];
549
551
  var _k = useState(false), menuOpen = _k[0], setMenuOpen = _k[1];
550
552
  var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
553
+ var menubarRef = useRef();
551
554
  useEffect(function () {
552
555
  React__default.Children.map(children, function (item) {
553
556
  if (item &&
@@ -581,6 +584,9 @@ var SiteHeaderV2 = function (_a) {
581
584
  window.removeEventListener("keydown", handleKeydown);
582
585
  };
583
586
  }, [setMenuOpen]);
587
+ useEffect(function () {
588
+ menubarRef === null || menubarRef === void 0 ? void 0 : menubarRef.current.classList.add("noFocus");
589
+ }, []);
584
590
  useEffect(function () {
585
591
  var handleClick = function (e) {
586
592
  if (e.target.getAttribute("href")) {
@@ -596,7 +602,7 @@ var SiteHeaderV2 = function (_a) {
596
602
  // useEffect does not run in ReactDomServer renders
597
603
  setHasClientSideJavaScript(true);
598
604
  }, [setHasClientSideJavaScript]);
599
- return (React__default.createElement(Provider, { value: { transparent: isTransparent } },
605
+ return (React__default.createElement(Provider, { value: { transparent: isTransparent, menubarRef: menubarRef } },
600
606
  React__default.createElement("div", __assign({ className: classNames((_b = {},
601
607
  _b["arc-SiteHeaderV2"] = true,
602
608
  _b["arc-SiteHeaderV2--menuOpen"] = menuOpen,
@@ -613,8 +619,8 @@ var SiteHeaderV2 = function (_a) {
613
619
  children && (React__default.createElement("nav", { className: "arc-SiteHeaderV2-nav" },
614
620
  React__default.createElement("div", { className: "arc-SiteHeaderV2-menuButton" },
615
621
  React__default.createElement(MenuButton, { menuOpen: menuOpen, setMenuOpen: setMenuOpen })),
616
- React__default.createElement("div", { className: "arc-SiteHeaderV2-main" },
617
- React__default.createElement("ul", { className: "arc-SiteHeaderV2-navItems" }, children),
622
+ React__default.createElement("div", { className: "arc-SiteHeaderV2-main", tabIndex: -1 },
623
+ React__default.createElement("ul", { role: "menubar", "aria-label": "navigation", ref: menubarRef, className: "arc-SiteHeaderV2-navItems" }, children),
618
624
  hasLogin && (React__default.createElement(React__default.Fragment, null, loginOnClick ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-mobileButtonContainer" },
619
625
  React__default.createElement("button", { className: "arc-SiteHeaderV2-mobileLogin", onClick: loginOnClick },
620
626
  loginTitle,
@@ -629,6 +635,9 @@ var SiteHeaderV2 = function (_a) {
629
635
  basket ? (React__default.createElement("div", { className: "arc-SiteHeaderV2-basket" }, basket)) : null,
630
636
  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)))))))))));
631
637
  };
638
+ function useHeaderV2Context() {
639
+ return useContext(Context);
640
+ }
632
641
  SiteHeaderV2.Column = Column;
633
642
  SiteHeaderV2.Item = Item;
634
643
  SiteHeaderV2.ItemGroup = ItemGroup;