@royaloperahouse/chord 0.7.13 → 0.7.14

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## [0.7.14]
+- Fix keyboard accessibility for Tickbox
+
 ## [0.7.13]
 - Fix Carousel Card typography
 - Fix Impact Header Grid

package/dist/chord.cjs.development.js

@@ -2990,15 +2990,15 @@ var Subtitle = function Subtitle(_ref6) {
 };
 
 var _templateObject$k, _templateObject2$7, _templateObject3$2;
-var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  width: fit-content;\n  position: relative;\n  padding-left: 32px;\n  color: var(--base-color-", ");\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])), function (_ref) {
+var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  width: fit-content;\n  position: relative;\n  padding-left: 32px;\n  color: var(--base-color-", ");\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n  @media ", " {\n    &:focus {\n      outline: 0;\n    }\n  }\n"])), function (_ref) {
   var dark = _ref.dark;
   return dark ? 'white' : 'black';
-});
+}, devices.mobileAndTablet);
 var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 1px;\n  left: 0;\n  height: 20px;\n  width: 20px;\n  padding: 3px;\n  box-sizing: border-box;\n  border: 1px solid var(--base-color-", ");\n\n  svg {\n    display: none;\n  }\n\n  @media ", " {\n    top: 0;\n  }\n"])), function (_ref2) {
   var dark = _ref2.dark;
   return dark ? 'white' : 'black';
 }, devices.mobile);
-var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n\n  &:checked ~ ", " {\n    background-color: var(--base-color-", ");\n    & svg {\n      display: block;\n      path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), TickboxCheckmark, function (_ref3) {
+var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  &:checked ~ ", " {\n    background-color: var(--base-color-", ");\n    & svg {\n      display: block;\n      path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), TickboxCheckmark, function (_ref3) {
   var dark = _ref3.dark;
   return dark ? 'white' : 'black';
 }, function (_ref4) {
@@ -3033,8 +3033,18 @@ var Tickbox = function Tickbox(_ref) {
   React.useEffect(function () {
     setSelected(checked);
   }, [checked]);
+
+  var spaceButtonHandler = function spaceButtonHandler(e) {
+    if (e.code === 'Space') {
+      setSelected(!selected);
+      onChange == null ? void 0 : onChange(!selected);
+    }
+  };
+
   var isDarkMode = mode === exports.TickboxMode.Dark;
   return /*#__PURE__*/React__default.createElement(TickboxLabel, {
+    tabIndex: 0,
+    onKeyPress: spaceButtonHandler,
     dark: isDarkMode,
     "data-testid": "tickbox"
   }, /*#__PURE__*/React__default.createElement(BodyText, {
@@ -5049,7 +5059,7 @@ var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject3$k || (_te
 var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
 var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(3 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(3 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
-var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
+var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 
 var _excluded$g = ["text"];