@royaloperahouse/chord 2.3.0 → 2.3.1

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.3.1]
+- AuxiliaryNav: accessibility improvements
+
 ## [2.3.0]
 - New component: VideoWithControls
 - PromoWithTitle: handle video

package/dist/chord.cjs.development.js

@@ -10057,55 +10057,92 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
 };
 
-var _templateObject$1g, _templateObject2$V, _templateObject3$M, _templateObject4$B;
-var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n    @media ", " {\n      margin-left: 0px;\n    }\n  }\n  @media ", " {\n    display: ", ";\n    background: var(--base-color-", ");\n    border: 1px solid var(--base-color-", ");\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n  }\n"])), exports.Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
-  var mobileOpen = _ref.mobileOpen;
-  return mobileOpen ? "block" : 'none';
-}, exports.Colors.White, exports.Colors.DarkGrey);
-var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  border: 0;\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n  @media ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), exports.Colors.Black, function (_ref2) {
-  var active = _ref2.active;
-  return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
-}, exports.Colors.MidGrey, devices.mobile);
-var MobileButton = /*#__PURE__*/styled__default.button(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: none;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n  @media ", " {\n    display: block;\n  }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey, devices.mobile);
+var _templateObject$1g, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$r;
+var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), exports.Colors.LightGrey);
+var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
+var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), exports.Colors.Black, function (_ref) {
+  var isActive = _ref.isActive;
+  return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
+}, exports.Colors.MidGrey);
+var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
+  var isOpen = _ref2.isOpen;
+  return isOpen ? 'block' : 'none';
+}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
+
+var NavItem = function NavItem(_ref) {
+  var text = _ref.text,
+      href = _ref.href,
+      onClick = _ref.onClick,
+      isActive = _ref.isActive,
+      isMobile = _ref.isMobile;
 
-/**
- * Vertical menu component uses for navigation
- * inside website chapter. It looks like a vertical
- * list with clickable items on desktop and dropdown
- * list on mobile.
- *
- * ## Menu items
- * Menu items should be passed as `items` prop. This
- * should be an array of objects. Each object should
- * have `text` (text displayed as a menu item) and
- * `onClick` (click handler function)
- *
- * ## Active menu item
- * Active menu item should be passed as component `activeItem`
- * prop. This indicates on which menu item should be highlighted
- * as active one. Should be equal to `text` prop from one of the `items`
- */
+  var clickHandler = function () {
+    if (!onClick) return undefined;
+    return function (e) {
+      e.preventDefault();
+      onClick();
+    };
+  }();
+
+  var ariaCurrent = isMobile ? undefined : isActive;
+  var ariaSelected = isMobile ? isActive : undefined;
+  var role = isMobile ? 'option' : undefined;
+  return /*#__PURE__*/React__default.createElement("li", {
+    "aria-current": ariaCurrent,
+    "aria-selected": ariaSelected,
+    role: role
+  }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
+    onClick: clickHandler,
+    href: href,
+    isActive: isActive,
+    "data-testid": "nav-menu-item" + (isActive ? '-active' : '')
+  }, text));
+};
+
+var DesktopNav = function DesktopNav(_ref2) {
+  var items = _ref2.items,
+      activeItem = _ref2.activeItem,
+      ariaLabel = _ref2.ariaLabel;
+  return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
+    "data-testid": "nav-menu-container-desktop",
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React__default.createElement(MenuList, {
+    "data-testid": "nav-menu-list"
+  }, items.map(function (_ref3, idx) {
+    var text = _ref3.text,
+        href = _ref3.href,
+        onClick = _ref3.onClick;
+    return /*#__PURE__*/React__default.createElement(NavItem, {
+      key: text + "-" + idx,
+      text: text,
+      href: href,
+      onClick: onClick,
+      isActive: text === activeItem
+    });
+  })));
+};
 
-var AuxiliaryNav = function AuxiliaryNav(_ref) {
-  var items = _ref.items,
-      activeItem = _ref.activeItem;
+var MobileNav = function MobileNav(_ref4) {
+  var items = _ref4.items,
+      activeItem = _ref4.activeItem,
+      ariaLabel = _ref4.ariaLabel;
 
   var _useState = React.useState(false),
-      mobileOpen = _useState[0],
-      setMobileOpen = _useState[1];
+      isOpen = _useState[0],
+      setIsOpen = _useState[1];
 
   var containerRef = React.useRef(null);
 
-  var mobileButtonClickHandler = function mobileButtonClickHandler() {
-    setMobileOpen(function (prev) {
+  var buttonClickHandler = function buttonClickHandler() {
+    setIsOpen(function (prev) {
       return !prev;
     });
   };
 
   var outsideClickHandler = function outsideClickHandler(event) {
     if (containerRef.current && !containerRef.current.contains(event.target)) {
-      setMobileOpen(false);
+      setIsOpen(false);
     }
   };
 
@@ -10117,29 +10154,79 @@ var AuxiliaryNav = function AuxiliaryNav(_ref) {
   }, [containerRef]);
   return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
     ref: containerRef,
-    "data-testid": "nav-menu-container"
+    "data-testid": "nav-menu-container-mobile",
+    "aria-label": ariaLabel
   }, /*#__PURE__*/React__default.createElement(MobileButton, {
-    mobileOpen: mobileOpen,
-    onClick: mobileButtonClickHandler,
-    "data-testid": "nav-menu-mobile-button"
+    onClick: buttonClickHandler,
+    "data-testid": "nav-menu-mobile-button",
+    "aria-expanded": isOpen,
+    "aria-controls": "auxiliary-nav-list",
+    "aria-haspopup": "listbox",
+    role: 'combobox'
   }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow",
-    direction: mobileOpen ? 'left' : 'right'
-  })), /*#__PURE__*/React__default.createElement(MenuList, {
-    mobileOpen: mobileOpen,
-    "data-testid": "nav-menu-list"
-  }, items.map(function (item, idx) {
-    return /*#__PURE__*/React__default.createElement("li", {
-      key: item.text + "-" + idx
-    }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
-      onClick: item.onClick,
-      active: item.text === activeItem,
-      "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
-    }, item.text));
+    direction: isOpen ? 'left' : 'right'
+  })), /*#__PURE__*/React__default.createElement(MobileMenuList, {
+    id: 'auxiliary-nav-list',
+    "data-testid": "nav-menu-list",
+    isOpen: isOpen,
+    "aria-hidden": !isOpen,
+    role: 'listbox'
+  }, items.map(function (_ref5, idx) {
+    var text = _ref5.text,
+        href = _ref5.href,
+        onClick = _ref5.onClick;
+    return /*#__PURE__*/React__default.createElement(NavItem, {
+      key: text + "-" + idx,
+      text: text,
+      href: href,
+      onClick: onClick,
+      isActive: text === activeItem,
+      isMobile: true
+    });
   })));
 };
+/**
+ * Vertical menu component uses for navigation
+ * inside website chapter. It looks like a vertical
+ * list with clickable items on desktop and dropdown
+ * list on mobile.
+ *
+ * ## Menu items
+ * Menu items should be passed as `items` prop. This
+ * should be an array of objects. Each object should
+ * have `text` (text displayed as a menu item) and
+ * `onClick` (click handler function)
+ *
+ * ## Active menu item
+ * Active menu item should be passed as component `activeItem`
+ * prop. This indicates on which menu item should be highlighted
+ * as active one. Should be equal to `text` prop from one of the `items`
+ */
+
+
+var AuxiliaryNav = function AuxiliaryNav(_ref6) {
+  var items = _ref6.items,
+      activeItem = _ref6.activeItem,
+      isMobile = _ref6.isMobile,
+      ariaLabel = _ref6.ariaLabel;
+
+  if (isMobile) {
+    return /*#__PURE__*/React__default.createElement(MobileNav, {
+      items: items,
+      activeItem: activeItem,
+      ariaLabel: ariaLabel
+    });
+  }
+
+  return /*#__PURE__*/React__default.createElement(DesktopNav, {
+    items: items,
+    activeItem: activeItem,
+    ariaLabel: ariaLabel
+  });
+};
 
-var _templateObject$1h, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$r, _templateObject6$m;
+var _templateObject$1h, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$s, _templateObject6$m;
 var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var Sections = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
@@ -10147,7 +10234,7 @@ var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateO
   return "var(--base-color-" + color + ")";
 });
 var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
-var Text = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+var Text = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
 });
@@ -10237,14 +10324,14 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1i, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$s, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
+var _templateObject$1i, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
 var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
 var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
-var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
+var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.mobile);
 var LineContainer$1 = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: ", ";\n  width: 100%;\n"])), function (props) {