@royaloperahouse/chord 0.7.22 → 0.7.23

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## [0.7.23]
+- Accordion: make accordion keyboard-navigable
+
 ## [0.7.22]
 - Add new AnnouncementBanner component
 

package/dist/chord.cjs.development.js

@@ -4659,7 +4659,16 @@ var Accordion = function Accordion(_ref) {
 
   var _useState3 = React.useState(initOpen ? 'Detract' : 'Expand'),
       iconName = _useState3[0],
-      setIconName = _useState3[1];
+      setIconName = _useState3[1]; // Contents children visibility is set to prevent it from being keyboard tabbable when the accordion is closed
+
+
+  var _useState4 = React.useState(initOpen ? {
+    visibility: 'visible'
+  } : {
+    visibility: 'hidden'
+  }),
+      childrenVisibility = _useState4[0],
+      setChildrenVisibility = _useState4[1];
 
   var content = React.useRef(null);
   React.useEffect(function () {
@@ -4672,10 +4681,23 @@ var Accordion = function Accordion(_ref) {
     setOpenAccordion(!openAccordion);
     setTextHeight(openAccordion ? '0px' : content.current.scrollHeight + "px");
     setIconName(openAccordion ? 'Expand' : 'Detract');
+    setChildrenVisibility(openAccordion ? {
+      visibility: 'hidden'
+    } : {
+      visibility: 'visible'
+    });
+  };
+
+  var keyDown = function keyDown(e) {
+    if (e.key === 'Enter' || e.key === 'Space') {
+      toggleAccordion();
+    }
   };
 
   return /*#__PURE__*/React__default.createElement(AccordionContainer, null, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$1, {
-    onClick: toggleAccordion
+    onClick: toggleAccordion,
+    onKeyDown: keyDown,
+    tabIndex: 0
   }, /*#__PURE__*/React__default.createElement("a", null, title), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: iconName
   })), /*#__PURE__*/React__default.createElement(ContentContainer, {
@@ -4684,7 +4706,9 @@ var Accordion = function Accordion(_ref) {
     style: {
       maxHeight: "" + textHeight
     }
-  }, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
+  }, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
+    style: childrenVisibility
+  }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
 };
 
 var _templateObject$C;