@atlaskit/table-tree 9.7.0 → 9.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/table-tree
 
+## 9.8.0
+
+### Minor Changes
+
+- [#87326](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87326) [`a79d6ea51b5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a79d6ea51b5a) - Introducing props `label` and `referencedLabel` to provide/reference accessible name for TableTree.
+
+## 9.7.1
+
+### Patch Changes
+
+- [#83297](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83297) [`6b1707c169e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b1707c169e0) - The internal composition of this component has changed. There is no expected change in behaviour.
+
 ## 9.7.0
 
 ### Minor Changes

package/dist/cjs/components/internal/styled.js

@@ -39,6 +39,7 @@ var commonCellElementStyles = (0, _react.css)({
 var commonChevronContainerStyles = (0, _react.css)({
   // Aligns position:absolute chevron button with the adjacent text. Any future visual breaking changes
   // should consider setting this to `-2px` for better alignment, or refactor completely
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginBlockStart: -3
 });
 /**
@@ -55,7 +56,7 @@ var loadingItemContainerStyles = (0, _react.css)({
   width: '100%'
 });
 var paddingLeftStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingInlineStart: '50%'
 });
 /**

package/dist/cjs/components/row.js

@@ -28,7 +28,7 @@ var treeRowClickableStyles = (0, _react2.css)({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.7.0";
+var packageVersion = "9.8.0";
 var Row = exports.RowWithoutAnalytics = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);
   var _super = _createSuper(Row);

package/dist/cjs/components/table-tree.js

@@ -67,6 +67,8 @@ var TableTree = exports.default = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         items = _this$props.items,
+        label = _this$props.label,
+        referencedLabel = _this$props.referencedLabel,
         shouldExpandOnClick = _this$props.shouldExpandOnClick,
         headers = _this$props.headers,
         columns = _this$props.columns,
@@ -118,7 +120,9 @@ var TableTree = exports.default = /*#__PURE__*/function (_Component) {
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         role: "treegrid",
-        "aria-readonly": true
+        "aria-readonly": true,
+        "aria-label": label,
+        "aria-labelledby": referencedLabel
       }, heads, rows, this.props.children));
     }
   }]);

package/dist/es2019/components/internal/styled.js

@@ -28,6 +28,7 @@ const commonCellElementStyles = css({
 const commonChevronContainerStyles = css({
   // Aligns position:absolute chevron button with the adjacent text. Any future visual breaking changes
   // should consider setting this to `-2px` for better alignment, or refactor completely
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginBlockStart: -3
 });
 /**
@@ -42,7 +43,7 @@ const loadingItemContainerStyles = css({
   width: '100%'
 });
 const paddingLeftStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingInlineStart: '50%'
 });
 /**

package/dist/es2019/components/row.js

@@ -12,7 +12,7 @@ const treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.7.0";
+const packageVersion = "9.8.0";
 class Row extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/table-tree.js

@@ -40,6 +40,8 @@ export default class TableTree extends Component {
   render() {
     const {
       items,
+      label,
+      referencedLabel,
       shouldExpandOnClick,
       headers,
       columns,
@@ -87,7 +89,9 @@ export default class TableTree extends Component {
       }
     }, /*#__PURE__*/React.createElement("div", {
       role: "treegrid",
-      "aria-readonly": true
+      "aria-readonly": true,
+      "aria-label": label,
+      "aria-labelledby": referencedLabel
     }, heads, rows, this.props.children));
   }
 }

package/dist/esm/components/internal/styled.js

@@ -33,6 +33,7 @@ var commonCellElementStyles = css({
 var commonChevronContainerStyles = css({
   // Aligns position:absolute chevron button with the adjacent text. Any future visual breaking changes
   // should consider setting this to `-2px` for better alignment, or refactor completely
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginBlockStart: -3
 });
 /**
@@ -49,7 +50,7 @@ var loadingItemContainerStyles = css({
   width: '100%'
 });
 var paddingLeftStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   paddingInlineStart: '50%'
 });
 /**

package/dist/esm/components/row.js

@@ -20,7 +20,7 @@ var treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.7.0";
+var packageVersion = "9.8.0";
 var Row = /*#__PURE__*/function (_Component) {
   _inherits(Row, _Component);
   var _super = _createSuper(Row);

package/dist/esm/components/table-tree.js

@@ -58,6 +58,8 @@ var TableTree = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         items = _this$props.items,
+        label = _this$props.label,
+        referencedLabel = _this$props.referencedLabel,
         shouldExpandOnClick = _this$props.shouldExpandOnClick,
         headers = _this$props.headers,
         columns = _this$props.columns,
@@ -109,7 +111,9 @@ var TableTree = /*#__PURE__*/function (_Component) {
         }
       }, /*#__PURE__*/React.createElement("div", {
         role: "treegrid",
-        "aria-readonly": true
+        "aria-readonly": true,
+        "aria-label": label,
+        "aria-labelledby": referencedLabel
       }, heads, rows, this.props.children));
     }
   }]);

package/extract-react-types/table-tree.tsx

@@ -61,6 +61,16 @@ type TableTreeProps = {
    * Should be a number when we pass data via `<Rows />` component as children in `<TableTree />`.
    */
   mainColumnForExpandCollapseLabel?: string | number;
+  /**
+   * Refers to an `aria-label` attribute. Use label to describe the table for assistive technologies.
+   * Usage of either this, or the `labelId` attribute is strongly recommended.
+   */
+  label?: string;
+  /**
+   * Refers to an `aria-labelledby` attribute. Pass an id of the element which should define an accessible name for the table.
+   * Usage of either this, or the `label` attribute is strongly recommended.
+   */
+  referencedLabel?: string;
 };
 
 export default function (props: TableTreeProps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.7.0",
+  "version": "9.8.0",
   "description": "A table tree is an expandable table for showing nested hierarchies of information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,11 +27,11 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.11.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.41.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21"
@@ -96,4 +96,4 @@
     ".": "./src/index.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}