@royaloperahouse/chord 2.7.0-c-development → 2.7.0-e-development

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.6.1-b]
+- PeopleListing: Add variable column span based on people names length
+
 ## [2.6.1]
 - Remove LiveChat component
 

package/README.md

@@ -14,6 +14,8 @@ The Storybook for the latest version of the library is hosted at [chord.roh.org.
 ## Prerequisites
 ---
 
+* Use a node version of 16 at the highest to run the storybook locally
+
 * Make sure the required package dependencies are installed using `yarn install`
 
 * If this is the first time you are working on Chord, make sure to run `yarn build` to build all the modules.
@@ -44,7 +46,7 @@ Given a version number MAJOR.MINOR.PATCH, increment the:
 
 When you create a new release always update the `CHANGELOG` and `package.json`
 
-Increment your version from the latest stable version on `chord-releases`
+Increment your version from the latest stable version on `main`
 
 
 ## Deploying the Storybook
@@ -59,7 +61,7 @@ yarn storybook
 ```
 
 By default the storybook will be accessible at
-[http://localhost:6006/]()
+[http://localhost:6006/](http://localhost:6006/)
 
 The server will hot-reload on most changes.
 
@@ -105,7 +107,7 @@ then run:
 yarn deploy-storybook
 ```
 
-> **IMPORTANT:** This URL is intended to showcase the latest stable version of Chord, it should be kept up to date with the main `chord-releases` branch and should **only** be used for release versions. If you want to deploy a development version follow the steps above under *To deploy a preview version remotely*.
+> **IMPORTANT:** This URL is intended to showcase the latest stable version of Chord, it should be kept up to date with the main branch and should **only** be used for release versions. If you want to deploy a development version follow the steps above under *To deploy a preview version remotely*.
 
 
 ## Releasing a New Package Version
@@ -123,9 +125,9 @@ A **stable** package is published for use in production.
 
 ### **1. To release a snapshot version**
 
-> **IMPORTANT:** Make sure you always publish your **snapshots** from `chord-development` after merging in your feature branch.
+> **IMPORTANT:** Make sure you always publish your **snapshots** from `development` after merging in your feature branch.
 
-For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the Chord Library, as found in `chord-releases`, followed by an **unused** lowercase letter.
+For snapshots, `RELEASE_VERSION` should be the same as the latest **stable** version of the Chord Library, as found in `main`, followed by an **unused** lowercase letter.
 
 For example, if the latest stable release was 1.42.0, and the last snapshot published to NPM was 1.42.0-w, you would use RELEASE_VERSION `1.42.0-x`
 
@@ -135,13 +137,13 @@ To publish a snapshot use:
 NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
 ```
 
-The version published to NPM will be named, e.g. `1.42.0-a-chord-development`, use this to install the snapshot package in the frontend repos.
+The version published to NPM will be named, e.g. `1.42.0-x-development`, use this to install the snapshot package in the frontend repos.
 
 ### **2. To release a stable version**
 
-> **IMPORTANT:** Make sure you always publish your **stable** packages from `chord-releases` after merging in your feature branch.
+> **IMPORTANT:** Make sure you always publish your **stable** packages from `main` after merging in your feature branch.
 
-For stable releases, increment your version from the latest **stable** version found on `chord-releases`, following the rules described in *Versioning* above, and use this as `RELEASE_VERSION`. (Make sure it matches the version in your `package.json` and `CHANGELOG.md`!)
+For stable releases, increment your version from the latest **stable** version found on `main`, following the rules described in *Versioning* above, and use this as `RELEASE_VERSION`. (Make sure it matches the version in your `package.json` and `CHANGELOG.md`!)
 
 To publish a stable package use:
 
@@ -194,10 +196,9 @@ yarn test-storybook
 ---
 
 ### **1. Branching Model**
-* The Chord project lives in the `roh-components` *monorepo*
-* When working on Chord, treat the `roh-components/packages/chord` directory as your root
-* The Chord **development** branch is currently `chord-development`
-* The Chord **main** branch is currently `chord-releases`
+* The Chord project source can be found at [https://bitbucket.org/rohorguk/harmonic-library](https://bitbucket.org/rohorguk/harmonic-library) in the `chord` directory
+* The Chord **development** branch is currently `development`
+* The Chord **main** branch is currently `main`
 * All work should be done on a correctly named **feature branch** of the format: `issueType/ticketNumber-short-description-of-feature`, e.g. `feature/RD-1234-update-chord-documentation`
 * Always create your feature branch FROM, and submit pull requests TO, the **main** branch
 * For **QA / UAT** of a Chord component in isolation: following review you should deploy a preview version to Chromatic straight from your **feature branch** _without_ merging to development
@@ -207,13 +208,13 @@ yarn test-storybook
 
 #### **Before review:**
 
-* Git pull the latest version of `chord-releases`
-* Checkout a new, correctly-named feature branch from `chord releases`
+* Git pull the latest version of `main`
+* Checkout a new, correctly-named feature branch from `main`
 * Do your work on this feature branch
 * Run: `yarn lint`
 * Run: `yarn test`
 * Commit your changes
-* Create a pull request from your feature branch to `chord-releases`
+* Create a pull request from your feature branch to `main`
 * Add the appropriate reviewers
 
 #### **Before QA / UAT:**
@@ -227,10 +228,10 @@ After your PR is approved, you have two options:
 
 **ii.** For integrated testing of a component in the frontend staging environments:
 
-* Check out the `chord-development` branch
-* Merge your work in to `chord-development`
+* Check out the `development` branch
+* Merge your work in to `development`
 * Follow the steps above under *Publishing a New Package Version -> 1. To release a snapshot version*
-* Git push the updated `chord-development` branch to remote
+* Git push the updated `development` branch to remote
 * Finally, in the frontend repo:
 
 1. Update the `package.json` to reference the new snapshot version
@@ -240,14 +241,14 @@ After your PR is approved, you have two options:
 #### **When ready for production:**
 
 * Return to your chord **feature branch**
-* Update the chord version in `package.json`, incrementing from the last **stable** release, found in `chord-releases`, and following the rules described in the *Versioning* section
+* Update the chord version in `package.json`, incrementing from the last **stable** release, found in `main`, and following the rules described in the *Versioning* section
 * Update `CHANGELOG.md`, adding the new version number and a short description of your changes
 * Run: `yarn lint`
 * Run: `yarn test`
 * Run: `yarn test-storybook -u`
 * Run: `yarn build-storybook`
 * Git commit, push, and update your PR for final approval
-* Merge your approved PR to `chord-releases`
+* Merge your approved PR to `main`
 * Follow the steps in *Publishing a New Package Version -> 2. To release a stable version* to publish the NPM package
 * Finally, follow the steps in *Deploying The Storybook -> 3. To deploy a release version*, to update the public Chord Storybook page
 

package/dist/chord.cjs.development.js

@@ -4203,12 +4203,14 @@ var TextField = /*#__PURE__*/React.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,
@@ -4222,7 +4224,10 @@ var TextField = /*#__PURE__*/React.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)));
@@ -9100,32 +9105,43 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
   }, 0);
 };
 
-var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
-    if (musicTitle.length > 1 && index === musicTitle.length - 1) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
-        key: index
-      }, title));
-    } else if (index > 0) {
-      return /*#__PURE__*/React__default.createElement("i", {
-        key: index
-      }, ", ", title);
+var DEFAULT_COLUMN_COUNT = 4;
+var DEFAULT_LARGE_COLUMN_SPAN = 2;
+var DEFAULT_CHARACTER_THRESHOLD = 180;
+
+var concatenateMusicTitle = function concatenateMusicTitle(musicTitle, index) {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    key: "music-" + index
+  }, musicTitle.map(function (title, idx) {
+    if (musicTitle.length > 1 && idx === musicTitle.length - 1) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+        key: "music-" + index + "-" + idx + "-" + title
+      }, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
+    } else if (idx > 0) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+        key: "music-" + index + "-" + idx + "-" + title
+      }, /*#__PURE__*/React__default.createElement("i", null, ", ", title));
     }
 
-    return /*#__PURE__*/React__default.createElement("i", {
-      key: index
-    }, title);
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: "music-" + index + "-" + idx + "-" + title
+    }, /*#__PURE__*/React__default.createElement("i", null, title));
   }));
 };
 
 var CreditListing = function CreditListing(_ref) {
   var roles = _ref.roles,
       _ref$columnCount = _ref.columnCount,
-      columnCount = _ref$columnCount === void 0 ? 4 : _ref$columnCount;
-  var charThreshold = 180;
-  return /*#__PURE__*/React__default.createElement(CreditListingWrapper, {
-    columnCount: columnCount
-  }, roles.map(function (_ref2, index) {
+      columnCount = _ref$columnCount === void 0 ? DEFAULT_COLUMN_COUNT : _ref$columnCount,
+      _ref$expandLargeEntri = _ref.expandLargeEntries,
+      expandLargeEntries = _ref$expandLargeEntri === void 0 ? false : _ref$expandLargeEntri,
+      _ref$largeColumnSpan = _ref.largeColumnSpan,
+      largeColumnSpan = _ref$largeColumnSpan === void 0 ? DEFAULT_LARGE_COLUMN_SPAN : _ref$largeColumnSpan,
+      _ref$characterThresho = _ref.characterThreshold,
+      characterThreshold = _ref$characterThresho === void 0 ? DEFAULT_CHARACTER_THRESHOLD : _ref$characterThresho;
+  var creditEntries = [];
+  var nextColumnStart = 1;
+  roles.forEach(function (_ref2, index) {
     var name = _ref2.name,
         people = _ref2.people,
         description = _ref2.description,
@@ -9133,13 +9149,42 @@ var CreditListing = function CreditListing(_ref) {
         replacement = _ref2.replacement,
         additionalInfo = _ref2.additionalInfo,
         dataROH = _ref2.dataROH;
-    var namesLength = getConcatenatedPropLength(people, 'name');
-    var columnSpanDesktop = namesLength > charThreshold ? people.length > 2 ? 4 : 2 : 1;
-    return /*#__PURE__*/React__default.createElement(GridItem, {
-      columnSpanDesktop: columnSpanDesktop,
-      columnSpanDevice: columnSpanDesktop,
-      columnSpanSmallDevice: 2,
-      key: name + "-" + index
+
+    var _ref3 = function () {
+      if (expandLargeEntries && columnCount > 1) {
+        var namesLength = getConcatenatedPropLength(people, 'name');
+
+        var _columnSpan = namesLength > characterThreshold ? largeColumnSpan : 1;
+
+        var unboundedEnd = nextColumnStart + _columnSpan;
+
+        var _columnStart = unboundedEnd > columnCount + 1 ? 1 : nextColumnStart;
+
+        var columnEnd = _columnStart + _columnSpan;
+        nextColumnStart = columnEnd % columnCount || columnCount;
+        return {
+          columnStart: _columnStart,
+          columnSpan: _columnSpan
+        };
+      } else {
+        return {
+          columnStart: 0,
+          columnSpan: 1
+        };
+      }
+    }(),
+        columnStart = _ref3.columnStart,
+        columnSpan = _ref3.columnSpan;
+
+    creditEntries.push( /*#__PURE__*/React__default.createElement(GridItem, {
+      columnStartDesktop: columnStart,
+      columnSpanDesktop: columnSpan,
+      columnStartDevice: 1,
+      columnSpanDevice: 1,
+      columnStartSmallDevice: 1,
+      columnSpanSmallDevice: 1,
+      key: "credit-entry-" + name + "-" + index,
+      "data-testid": "credit-entry"
     }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {
       title: "role",
       "data-roh": dataROH
@@ -9163,12 +9208,16 @@ var CreditListing = function CreditListing(_ref) {
       tag: "p"
     }, replacement)), musicTitle && musicTitle.length > 0 && /*#__PURE__*/React__default.createElement(BodyText, {
       level: 1,
-      tag: "p"
-    }, concatenateMusicTitle(musicTitle)), additionalInfo && /*#__PURE__*/React__default.createElement(BodyText, {
+      tag: "p",
+      key: "music-" + musicTitle + "-text"
+    }, concatenateMusicTitle(musicTitle, index)), additionalInfo && /*#__PURE__*/React__default.createElement(BodyText, {
       level: 1,
       tag: "p"
-    }, additionalInfo)));
-  }));
+    }, additionalInfo))));
+  });
+  return /*#__PURE__*/React__default.createElement(CreditListingWrapper, {
+    columnCount: columnCount
+  }, creditEntries);
 };
 
 var _templateObject$13, _templateObject2$M, _templateObject3$D, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
@@ -11246,7 +11295,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;
+var _templateObject$1k, _templateObject2$Z, _templateObject3$P, _templateObject4$E, _templateObject5$x, _templateObject6$p, _templateObject7$h, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$4;
 var Wrapper$8 = /*#__PURE__*/styled__default('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 + ")";
@@ -11254,15 +11303,16 @@ var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1k || (_temp
   var theme = _ref2.theme;
   return "var(--base-color-" + theme + ")";
 });
-var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n"])));
-var SignUpTitleWrapper = /*#__PURE__*/styled__default('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 SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
+var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  height: 52px;\n  background: var(--base-color-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    height: 37px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
 var Error$1 = /*#__PURE__*/styled__default.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__default.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__default.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 Form = /*#__PURE__*/styled__default.form(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error$1);
+var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 28px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column-reverse;\n    align-items: flex-start;\n  }\n"])), devices.mobile);
 var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--base-color-errorstate);\n"])));
-var CTALinkWrapper = /*#__PURE__*/styled__default.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__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  div {\n    text-decoration: underline;\n  }\n"])));
 var ButtonWrapper$3 = /*#__PURE__*/styled__default.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__default.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__default.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__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\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,}))$/,
@@ -11272,13 +11322,45 @@ 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',
     invalid: 'Enter an email address in the correct format, like name@example.com'
   }
 };
+var getFormErrorMessage = function getFormErrorMessage(field, value) {
+  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;
+  }
+
+  return errorMessage;
+};
 
 var themeToColor = function themeToColor(theme) {
   switch (theme) {
@@ -11339,6 +11421,21 @@ var SignUpForm = function SignUpForm(_ref) {
     };
   };
 
+  var handleBlur = function handleBlur(field) {
+    return function () {
+      var value = formValues[field];
+      var formErrorMessage = getFormErrorMessage(field, value);
+
+      if (formErrorMessage) {
+        setErrors(function (prev) {
+          var _extends4;
+
+          return _extends({}, prev, (_extends4 = {}, _extends4[field] = formErrorMessage, _extends4));
+        });
+      }
+    };
+  };
+
   var handleFormSubmit = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(e) {
       var formErrors, response;
@@ -11360,13 +11457,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) {
@@ -11428,13 +11525,13 @@ var SignUpForm = function SignUpForm(_ref) {
     columnSpanDesktop: 10,
     columnStartDevice: 2,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+  }, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 6
   }, /*#__PURE__*/React__default.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: isSuccess ? submittedState.message : initialState.message
     }
-  }))), !isSuccess && /*#__PURE__*/React__default.createElement(GridItem, {
+  })))), !isSuccess && /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 12,
     columnStartDevice: 2,
@@ -11450,6 +11547,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",
@@ -11459,6 +11560,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",
@@ -11467,15 +11572,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"
@@ -11484,7 +11594,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)))))));
 };