@atlaskit/table-tree 9.7.1 → 9.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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.1";
+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/row.js

@@ -12,7 +12,7 @@ const treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.7.1";
+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/row.js

@@ -20,7 +20,7 @@ var treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.7.1";
+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.1",
+  "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.42.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"