@royaloperahouse/chord 2.4.3 → 2.4.4

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.4.4]
+- Table Component: Accessibility improvements
+
 ## [2.4.3]
 - Fix Page Heading spacing around the title
 

package/dist/chord.cjs.development.js

@@ -1549,13 +1549,15 @@ var Tickets = (function (_ref) {
 
 var Wheelchair = (function (_ref) {
   var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
+      ariaLabel = _ref.ariaLabel;
   return /*#__PURE__*/React.createElement("svg", {
     width: "100%",
     height: "100%",
     viewBox: "0 0 24 24",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-label": ariaLabel
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8.4 18.8c-1.1 0-2.2-.4-3-1.1-.8-.8-1.3-1.8-1.3-2.9-.1-1.6.9-3.2 2.3-3.9l-.4-1c-1.9.9-3 2.8-3 4.9.1 2.8 2.4 5.1 5.3 5.1h.2c2.6-.1 4.7-2.1 5.1-4.6l-1.1-.1c-.3 2-2 3.6-4.1 3.6ZM9.8 4.5c1.2 0 2.2-1 2.2-2.2C12 1.1 11 .1 9.8.1c-1.2 0-2.2 1-2.2 2.2 0 1.2.9 2.2 2.2 2.2Zm0-3.3c.6 0 1.1.5 1.1 1.1 0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1Zm4.9 12c-.3-.5-.9-.8-1.6-.8h-2.6V6.3c0-.6-.5-1.2-1.1-1.2H6.2c-.5.1-.9.5-.9 1v3.2h1.1V6.2l2.9.1v7.2h3.8c.3 0 .5.1.6.3l3.4 5.4.9-.6-3.3-5.4Z",
     fill: color
@@ -2436,7 +2438,8 @@ var Icon = /*#__PURE__*/React.memo(function (_ref) {
       color = _ref.color,
       iconName = _ref.iconName,
       title = _ref.title,
-      direction = _ref.direction;
+      direction = _ref.direction,
+      ariaLabel = _ref.ariaLabel;
   var IconComponent = IconLibrary[iconName];
   return /*#__PURE__*/React.createElement(Wrapper, {
     className: className,
@@ -2444,7 +2447,8 @@ var Icon = /*#__PURE__*/React.memo(function (_ref) {
     title: title,
     direction: direction
   }, /*#__PURE__*/React.createElement(IconComponent, {
-    color: color
+    color: color,
+    ariaLabel: ariaLabel
   }));
 });
 Icon.displayName = 'Icon';
@@ -10603,22 +10607,76 @@ var _templateObject$1i, _templateObject2$X, _templateObject3$O, _templateObject4
 var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
 var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
+var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
+  return "var(--base-color-" + props.lineColor + ")";
+}, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
-var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
+var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n  border-bottom: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
+  return "var(--base-color-" + props.lineColor + ")";
+}, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.mobile);
-var LineContainer$1 = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: ", ";\n  width: 100%;\n"])), function (props) {
-  return "var(--base-color-" + props.lineColor + ")";
-});
-var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: none;\n  }\n"])));
-var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
+var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: none;\n  }\n"])));
+var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   return active === 'true' && "\n      color: var(--base-color-core);\n      border-bottom: 1px solid var(--base-color-core);\n    ";
 });
-var Next = /*#__PURE__*/styled__default.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
-var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
+var Next = /*#__PURE__*/styled__default.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
+var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
+var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
+
+var Content = function Content(_ref) {
+  var content = _ref.content;
+  return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
+};
+var scrollTable = function scrollTable(tableRef, direction) {
+  if (tableRef.current) {
+    var currentScroll = tableRef.current.scrollLeft;
+    var scrollAmount = direction === 'left' ? -300 : 300;
+    tableRef.current.scrollTo({
+      left: currentScroll + scrollAmount,
+      behavior: 'smooth'
+    });
+  }
+};
+
+var Cell = function Cell(_ref) {
+  var cell = _ref.cell,
+      cellIndex = _ref.cellIndex,
+      columns = _ref.columns,
+      lineColor = _ref.lineColor;
+  return /*#__PURE__*/React__default.createElement(TableCell, {
+    key: cellIndex,
+    columns: columns,
+    role: "gridcell",
+    lineColor: lineColor
+  }, /*#__PURE__*/React__default.createElement(Content, {
+    content: cell
+  }));
+};
+
+var Row = function Row(_ref) {
+  var row = _ref.row,
+      rowIndex = _ref.rowIndex,
+      columns = _ref.columns,
+      lineColor = _ref.lineColor;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    key: rowIndex
+  }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
+    return /*#__PURE__*/React__default.createElement(Cell, {
+      key: index,
+      cell: cell,
+      cellIndex: index,
+      columns: columns,
+      lineColor: lineColor
+    });
+  })));
+};
 
 var Table = function Table(_ref) {
   var columns = _ref.columns,
@@ -10626,7 +10684,8 @@ var Table = function Table(_ref) {
       children = _ref.children,
       lineColors = _ref.lineColors,
       rowsPerPage = _ref.rowsPerPage,
-      pagination = _ref.pagination;
+      pagination = _ref.pagination,
+      description = _ref.description;
 
   var _useState = React.useState(0),
       currentPage = _useState[0],
@@ -10636,121 +10695,63 @@ var Table = function Table(_ref) {
       showScrollButtons = _useState2[0],
       setShowScrollButtons = _useState2[1];
 
-  var Content = function Content(_ref2) {
-    var content = _ref2.content;
-    return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: content
-      }
-    }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
-  };
-
-  var Cell = function Cell(_ref3) {
-    var cell = _ref3.cell,
-        cellIndex = _ref3.cellIndex,
-        columns = _ref3.columns;
-    return /*#__PURE__*/React__default.createElement(TableCell, {
-      key: cellIndex,
-      columns: columns
-    }, /*#__PURE__*/React__default.createElement(Content, {
-      content: cell
-    }));
-  };
-
-  var Row = function Row(_ref4) {
-    var row = _ref4.row,
-        rowIndex = _ref4.rowIndex,
-        columns = _ref4.columns,
-        lineColor = _ref4.lineColor;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: rowIndex
-    }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
-      return /*#__PURE__*/React__default.createElement(Cell, {
-        key: index,
-        cell: cell,
-        cellIndex: index,
-        columns: columns
-      });
-    })), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-      colSpan: columns
-    }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
-      lineColor: lineColor,
-      role: "presentation"
-    }))));
-  };
-
   var lineColor = lineColors != null ? lineColors : exports.Colors.Cinema;
   var tableRef = React.useRef(null);
-  React.useEffect(function () {
-    if (tableRef.current) {
-      tableRef.current.scrollTo(0, 0);
-    }
-  }, [children]);
-
-  var horizontalScroll = function horizontalScroll() {
-    if (tableRef.current) {
-      setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
-    }
-  };
+  React.useLayoutEffect(function () {
+    var horizontalScroll = function horizontalScroll() {
+      if (tableRef.current) {
+        setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
+      }
+    };
 
-  React.useEffect(function () {
     horizontalScroll();
     window.addEventListener('resize', horizontalScroll);
     return function () {
       return window.removeEventListener('resize', horizontalScroll);
     };
   }, []);
-
-  var scrollTable = function scrollTable(direction) {
-    if (tableRef.current) {
-      var currentScroll = tableRef.current.scrollLeft;
-      var scrollAmount = direction === 'left' ? -300 : 300;
-      tableRef.current.scrollTo({
-        left: currentScroll + scrollAmount,
-        behavior: 'smooth'
-      });
-    }
-  };
-
-  var totalRows = Array.isArray(children) ? children.length : 0;
+  var totalRows = Array.isArray(children) ? children.length + 1 : 1;
   var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
-  var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
   var pageNumbers = Array.from({
     length: totalPages
   }, function (_, i) {
     return i;
   });
   var reducedPageNumbers = reducePages(pageNumbers, currentPage);
+  var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
+  var visibleRows = pagination ? Array.isArray(currentRows) ? currentRows.length + 1 : 0 : totalRows;
   return /*#__PURE__*/React__default.createElement(Wrapper$7, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickPrev: function onClickPrev() {
-      return scrollTable('left');
+      return scrollTable(tableRef, 'left');
     },
     onClickNext: function onClickNext() {
-      return scrollTable('right');
+      return scrollTable(tableRef, 'right');
     }
   })), /*#__PURE__*/React__default.createElement(Container$6, {
     role: "table",
     tabIndex: 0,
-    ref: tableRef
-  }, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    colSpan: columns
-  }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
-    lineColor: lineColor,
-    role: "presentation"
-  })))), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, headings && headings.map(function (heading, index) {
+    ref: tableRef,
+    "aria-rowcount": totalRows,
+    "aria-colcount": columns
+  }, /*#__PURE__*/React__default.createElement(AriaDescription, {
+    id: "table-description"
+  }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", {
+    role: "rowgroup"
+  }, ' ', /*#__PURE__*/React__default.createElement("tr", {
+    role: "columnheader"
+  }, headings && headings.map(function (heading, index) {
     return /*#__PURE__*/React__default.createElement(TableHeader, {
       key: index,
       role: "columnheader",
-      columns: columns
+      scope: "col",
+      columns: columns,
+      lineColor: lineColor
     }, /*#__PURE__*/React__default.createElement(Content, {
       content: heading
     }));
-  }))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    colSpan: columns
-  }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
-    lineColor: lineColor,
-    role: "presentation"
-  }))), /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
+  }))), /*#__PURE__*/React__default.createElement("tbody", {
+    role: "rowgroup"
+  }, ' ', Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
     return /*#__PURE__*/React__default.createElement(Row, {
       key: rowIndex,
       row: row,
@@ -10758,7 +10759,9 @@ var Table = function Table(_ref) {
       columns: columns,
       lineColor: lineColor
     });
-  }))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+  }))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
+    id: "pagination-description"
+  }, "Table pagination: current page ", currentPage + 1, " of ", totalPages), /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
     key: "previous-page",
     onClick: function onClick() {
       return setCurrentPage(currentPage - 1);
@@ -10793,7 +10796,7 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow",
     direction: "up"
-  })))))));
+  }))))))));
 };
 
 var UpsellSection = function UpsellSection(_ref) {