@royaloperahouse/chord 2.6.1-b-development → 2.6.1-d-development

package/dist/chord.esm.js

@@ -4207,12 +4207,14 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$1, {
     darkMode: darkMode,
-    "data-testid": "text-field-text-label"
+    "data-testid": "text-field-text-label",
+    "aria-hidden": true
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 6
   }, label)), /*#__PURE__*/React__default.createElement(InputWrapper, {
     width: width
   }, /*#__PURE__*/React__default.createElement(Input, Object.assign({
+    "aria-label": label,
     isPasswordField: isPasswordField,
     type: inputType,
     error: error,
@@ -4226,7 +4228,10 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     level: 1
   }, showHideButtonText)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$1, {
     darkMode: darkMode,
-    "data-testid": "text-field-error-label"
+    id: inputProps.name + "-error",
+    "data-testid": "text-field-error-label",
+    role: "alert",
+    "aria-live": "assertive"
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 6
   }, error)));
@@ -11303,14 +11308,14 @@ var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1k || (_templateObjec
   return "var(--base-color-" + theme + ")";
 });
 var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n"])));
-var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  background: var(--base-color-white);\n  display: inline-block;\n  padding: 0 20px;\n  \n  @media ", " {\n    top: -18px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
+var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  background: var(--base-color-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
 var Error$1 = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--base-color-errorstate);\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
 var Form = /*#__PURE__*/styled.form(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error$1);
-var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 21px;\n  align-items: center;\n  \n  @media ", " {\n    flex-direction: column-reverse;\n    align-items: flex-start;\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
+var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 21px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column-reverse;\n    align-items: flex-start;\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
 var ServerError = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--base-color-errorstate);\n"])));
-var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    color: var(--base-color-black);\n    div {\n      font-size: 14px;\n    }\n"])));
+var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  div {\n    font-size: 14px;\n  }\n"])));
 var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n\n  @media ", " {\n    width: 100%;\n  }\n  &:focus {\n    outline: 3px solid var(--base-color-lapislazuli);\n  }\n"])), devices.mobile);
-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\n"])), devices.mobile);
+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 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,}))$/,
@@ -11320,7 +11325,11 @@ var regex = {
 var formValidationMessages = {
   requiredFieldMessage: 'Please complete this field',
   firstName: {
-    invalid: 'Please enter your first name'
+    invalid: 'Please enter your full first name',
+    required: 'Please enter a first name'
+  },
+  lastName: {
+    required: 'Please enter a last name'
   },
   email: {
     required: 'Please enter an email address',
@@ -11387,6 +11396,44 @@ var SignUpForm = function SignUpForm(_ref) {
     };
   };
 
+  var handleBlur = function handleBlur(field) {
+    return function () {
+      var value = formValues[field];
+      var errorMessage;
+
+      if (!value) {
+        switch (field) {
+          case 'firstName':
+            errorMessage = formValidationMessages.firstName.required;
+            break;
+
+          case 'lastName':
+            errorMessage = formValidationMessages.lastName.required;
+            break;
+
+          case 'email':
+            errorMessage = formValidationMessages.email.required;
+            break;
+
+          default:
+            errorMessage = formValidationMessages.requiredFieldMessage;
+        }
+      } else if (field === 'email' && !regex.signInEmail.test(value)) {
+        errorMessage = formValidationMessages.email.invalid;
+      } else if (field === 'firstName' && !regex.firstName.test(value)) {
+        errorMessage = formValidationMessages.firstName.invalid;
+      }
+
+      if (errorMessage) {
+        setErrors(function (prev) {
+          var _extends4;
+
+          return _extends({}, prev, (_extends4 = {}, _extends4[field] = errorMessage, _extends4));
+        });
+      }
+    };
+  };
+
   var handleFormSubmit = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(e) {
       var formErrors, response;
@@ -11408,13 +11455,13 @@ var SignUpForm = function SignUpForm(_ref) {
 
               if (!isLoggedIn) {
                 if (!formValues.firstName) {
-                  formErrors.firstName = formValidationMessages.requiredFieldMessage;
+                  formErrors.firstName = formValidationMessages.firstName.required;
                 } else if (!regex.firstName.test(formValues.firstName)) {
                   formErrors.firstName = formValidationMessages.firstName.invalid;
                 }
 
                 if (!formValues.lastName) {
-                  formErrors.lastName = formValidationMessages.requiredFieldMessage;
+                  formErrors.lastName = formValidationMessages.lastName.required;
                 }
 
                 if (!formValues.email) {
@@ -11498,6 +11545,10 @@ var SignUpForm = function SignUpForm(_ref) {
     maxLength: 20,
     error: errors.firstName,
     onChange: handleChange('firstName'),
+    onBlur: handleBlur('firstName'),
+    "aria-required": "true",
+    "aria-invalid": !!errors.firstName,
+    "aria-describedby": errors.firstName ? 'firstName-error' : undefined,
     autoComplete: "given-name"
   }), /*#__PURE__*/React__default.createElement(TextField, {
     label: "Last name",
@@ -11507,6 +11558,10 @@ var SignUpForm = function SignUpForm(_ref) {
     value: formValues.lastName,
     error: errors.lastName,
     onChange: handleChange('lastName'),
+    onBlur: handleBlur('lastName'),
+    "aria-required": "true",
+    "aria-invalid": !!errors.lastName,
+    "aria-describedby": errors.lastName ? 'lastName-error' : undefined,
     autoComplete: "family-name"
   }), /*#__PURE__*/React__default.createElement(TextField, {
     label: "Email",
@@ -11515,15 +11570,20 @@ var SignUpForm = function SignUpForm(_ref) {
     value: formValues.email,
     error: errors.email || errors.serverError,
     onChange: handleChange('email'),
+    onBlur: handleBlur('email'),
+    "aria-required": "true",
+    "aria-invalid": !!errors.email,
+    "aria-describedby": errors.email ? 'email-error' : undefined,
     maxLength: 80
   })), isLoggedIn && !!errors.serverError && /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 2,
     columnSpanDesktop: 12,
-    columnStartTablet: 2,
-    columnSpanTablet: 12,
     columnStartDevice: 2,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(ServerError, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+  }, /*#__PURE__*/React__default.createElement(ServerError, {
+    role: "alert",
+    "aria-live": "assertive"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 6
   }, errors.serverError))), /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
     type: "submit"
@@ -11532,7 +11592,7 @@ var SignUpForm = function SignUpForm(_ref) {
   }, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
     href: ctaPrivacy.link
   }, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 2
+    level: 1
   }, ctaPrivacy.text)))))));
 };