@royaloperahouse/chord 2.8.0-a-development → 2.8.0-b-development

package/dist/chord.esm.js

@@ -6291,7 +6291,8 @@ var Dropdown = function Dropdown(_ref) {
       _ref$withIcon = _ref.withIcon,
       withIcon = _ref$withIcon === void 0 ? 'right' : _ref$withIcon,
       _ref$colorPrimary = _ref.colorPrimary,
-      colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary;
+      colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary,
+      className = _ref.className;
   var node = useRef();
 
   var _useState = useState(false),
@@ -6445,7 +6446,8 @@ var Dropdown = function Dropdown(_ref) {
     ref: node,
     onClick: function onClick() {
       return clickMobileHandler();
-    }
+    },
+    className: className
   }, renderTab()) : /*#__PURE__*/React__default.createElement(TabContainer, {
     ref: node,
     onMouseEnter: function onMouseEnter() {
@@ -6453,7 +6455,8 @@ var Dropdown = function Dropdown(_ref) {
     },
     onMouseLeave: function onMouseLeave() {
       return onMouseHandler(false);
-    }
+    },
+    className: className
   }, renderTab()));
 };
 
@@ -11300,7 +11303,7 @@ var Table = function Table(_ref) {
   }))))))));
 };
 
-var _templateObject$1k, _templateObject2$Z, _templateObject3$P, _templateObject4$E, _templateObject5$x, _templateObject6$p, _templateObject7$h, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$2, _templateObject13$2;
+var _templateObject$1k, _templateObject2$Z, _templateObject3$P, _templateObject4$E, _templateObject5$x, _templateObject6$p, _templateObject7$h, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1;
 var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return "var(--base-color-" + theme + ")";
@@ -11319,11 +11322,13 @@ var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$8 || (_templat
 var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject10$8 || (_templateObject10$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 36px;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n"])), devices.mobile);
 var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
 var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject12$2 || (_templateObject12$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  gap: var(--grid-column-gap);\n  cursor: pointer;\n"])));
-var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  div {\n    border-bottom: none !important;\n  }\n  transform: rotate(", ");\n"])), function (_ref3) {
+var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  transform: rotate(", ");\n  .dropdown-icon > div {\n    border-bottom: none;\n    color: var(--base-color-black);\n    margin: 0;\n  }\n"])), function (_ref3) {
   var _ref3$isOpen = _ref3.isOpen,
       isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
   return isOpen ? '180deg' : '0deg';
 });
+var HiddenInstructions = /*#__PURE__*/styled.div(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n"])));
+var SignUpHeader = /*#__PURE__*/styled(Grid)(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n"])));
 
 var regex = {
   signInEmail: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
@@ -11635,6 +11640,8 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
       _ref5$isLoggedIn = _ref5.isLoggedIn,
       isLoggedIn = _ref5$isLoggedIn === void 0 ? false : _ref5$isLoggedIn,
       submitHandler = _ref5.submitHandler;
+  var signUpHeaderId = 'signup-header';
+  var signUpInstructionsId = 'sign-up-instructions';
   var isMobile = useMobile();
 
   var _useState3 = useState(false),
@@ -11647,15 +11654,22 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
 
   return /*#__PURE__*/React__default.createElement(Wrapper$8, {
     theme: themeToColor(theme)
-  }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownAreaWrapper, {
-    role: 'button',
+  }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
+    id: signUpInstructionsId,
+    "aria-hidden": "true"
+  }, dropdownOpen ? 'Collapse content. Use the arrow key or tap to collapse.' : 'Expand content. Use the arrow key or tap to expand.'), /*#__PURE__*/React__default.createElement(DropdownAreaWrapper, {
+    role: "button",
     onClick: function onClick() {
       return setDropdownOpen(function (prev) {
         return !prev;
       });
     },
     tabIndex: 0,
-    "aria-label": dropdownOpen ? 'Collapse content' : 'Expand content'
+    "aria-labelledby": signUpHeaderId,
+    "aria-describedby": signUpInstructionsId,
+    "aria-expanded": dropdownOpen
+  }, /*#__PURE__*/React__default.createElement(SignUpHeader, {
+    id: signUpHeaderId
   }, /*#__PURE__*/React__default.createElement(SignUpTitle, {
     title: isSuccess ? submittedState.title : initialState.title,
     isMobile: isMobile
@@ -11664,12 +11678,14 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
     withDropdown: isMobile
   }), /*#__PURE__*/React__default.createElement(DropdownWrapper, {
     "data-testid": "dropdown",
-    isOpen: dropdownOpen
+    isOpen: dropdownOpen,
+    "aria-hidden": "true"
   }, /*#__PURE__*/React__default.createElement(Dropdown, {
+    className: "dropdown-icon",
     colorPrimary: Colors.Black,
     isMobileBehaviour: isMobile,
     withIcon: "left"
-  }))), dropdownOpen && /*#__PURE__*/React__default.createElement(SignUpForm, {
+  })))), dropdownOpen && /*#__PURE__*/React__default.createElement(SignUpForm, {
     submitHandler: submitHandler,
     errorMessage: errorMessage,
     ctaPrivacy: ctaPrivacy,