@royaloperahouse/chord 2.9.0 → 2.9.1

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.9.1]
+- AnchorBar and SignUpForm accessibility bug fixes
+
 ## [2.9.0]
 - Add new AnchorBar component
 

package/dist/chord.cjs.development.js

@@ -11260,7 +11260,7 @@ var Form = /*#__PURE__*/styled__default.form(_templateObject5$x || (_templateObj
 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;\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    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  color: var(--base-color-white);\n  text-decoration: none;\n\n  @media ", " {\n    width: 100%;\n  }\n  &:focus {\n    outline: 3px solid var(--base-color-lapislazuli);\n  }\n"])), devices.mobile);
+var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n  color: var(--base-color-white);\n  text-decoration: none;\n\n  @media ", " {\n    width: 100%;\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 DropdownAreaWrapper = /*#__PURE__*/styled__default.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"])));
@@ -11561,16 +11561,14 @@ var SignUpForm = function SignUpForm(_ref3) {
     href: ctaPrivacy.link
   }, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
-    type: "submit"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
+  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(PrimaryButton, {
     href: "#",
+    role: "button",
     onClick: handleAnchorClick,
     bgColor: themeToColor(theme)
-  }, "Sign up"))) : /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
-    type: "submit"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
+  }, "Sign up"))) : /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(PrimaryButton, {
     href: "#",
+    role: "button",
     onClick: handleAnchorClick,
     bgColor: themeToColor(theme)
   }, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
@@ -11690,7 +11688,10 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
 };
 
 var _templateObject$1l, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
-var AnchorBarContainer = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 50px;\n  min-height: 70px;\n  background: var(--base-color-white);\n  border-top: 2px solid var(--base-color-lightgrey);\n  border-bottom: 2px solid var(--base-color-lightgrey);\n  z-index: ", ";\n\n  @media ", " {\n    padding: 0 20px;\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, devices.mobile);
+var AnchorBarContainer = /*#__PURE__*/styled__default('div')(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 50px;\n  min-height: 70px;\n  background: var(--base-color-white);\n  ", "\n  border-bottom: 2px solid var(--base-color-lightgrey);\n  z-index: ", ";\n\n  @media ", " {\n    padding: 0 20px;\n    min-height: 60px;\n  }\n"])), function (_ref) {
+  var hideTopBorder = _ref.hideTopBorder;
+  return !hideTopBorder && 'border-top: 2px solid var(--base-color-lightgrey);';
+}, zIndexes.anchor, devices.mobile);
 var CTAWrapper = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  min-height: 28px;\n\n  @media ", " {\n    min-height: 24px;\n  }\n"])), devices.mobile);
 var CTALink = /*#__PURE__*/styled__default.a(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: underline;\n  text-decoration-color: var(--base-color-black);\n  text-underline-offset: 4px;\n  line-height: 1.6;\n  color: var(--base-color-black);\n  font-weight: var(--font-weight-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  text-transform: var(--text-transform-navigation);\n  cursor: pointer;\n"])));
 var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 24px;\n  min-width: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  border: none;\n  padding: 0;\n  background: none;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
@@ -11700,7 +11701,9 @@ var AnchorBar = function AnchorBar(_ref) {
       onClickHandler = _ref.onClickHandler,
       onCloseHandler = _ref.onCloseHandler,
       _ref$showAnchorBar = _ref.showAnchorBar,
-      showAnchorBar = _ref$showAnchorBar === void 0 ? true : _ref$showAnchorBar;
+      showAnchorBar = _ref$showAnchorBar === void 0 ? true : _ref$showAnchorBar,
+      _ref$hideTopBorder = _ref.hideTopBorder,
+      hideTopBorder = _ref$hideTopBorder === void 0 ? false : _ref$hideTopBorder;
 
   var _useState = React.useState(showAnchorBar),
       isRendered = _useState[0],
@@ -11727,7 +11730,8 @@ var AnchorBar = function AnchorBar(_ref) {
     var _cta$href;
 
     return /*#__PURE__*/React__default.createElement(AnchorBarContainer, {
-      "data-testid": "anchor-bar"
+      "data-testid": "anchor-bar",
+      hideTopBorder: hideTopBorder
     }, /*#__PURE__*/React__default.createElement(CTAWrapper, null, /*#__PURE__*/React__default.createElement(CTALink, {
       href: (_cta$href = cta.href) != null ? _cta$href : '#',
       onClick: onCtaClickHandler