@atlaskit/dynamic-table 14.8.16 → 14.8.17

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/dynamic-table
 
+## 14.8.17
+
+### Patch Changes
+
+- [`cdb1910463d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cdb1910463d) - [ux] Adds buttons to sortable table head cells for better accessibility for keyboard and assistive technology users.
+
 ## 14.8.16
 
 ### Patch Changes

package/dist/cjs/components/stateless.js

@@ -29,7 +29,7 @@ var _tableHead = _interopRequireDefault(require("./table-head"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.8.16";
+var packageVersion = "14.8.17";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case _constants.DESC:
@@ -227,7 +227,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         sortKey: sortKey,
         sortOrder: sortOrder,
         isRanking: this.state.isRanking,
-        isRankable: canRank,
+        isRankable: isRankable,
         testId: testId
       }), rowsExist && (canRank ? /*#__PURE__*/_react.default.createElement(_body2.default, (0, _extends2.default)({}, bodyProps, {
         isRanking: this.state.isRanking,

package/dist/cjs/components/table-head-cell.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _tableHead = require("../styled/table-head");
-var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable"];
+var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "onClick"];
 var TableHeadCell = function TableHeadCell(_ref) {
   var content = _ref.content,
     inlineStyles = _ref.inlineStyles,
@@ -17,6 +17,7 @@ var TableHeadCell = function TableHeadCell(_ref) {
     isRanking = _ref.isRanking,
     innerRef = _ref.innerRef,
     isSortable = _ref.isSortable,
+    onClick = _ref.onClick,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_tableHead.HeadCell, (0, _extends2.default)({
     style: inlineStyles,
@@ -24,9 +25,12 @@ var TableHeadCell = function TableHeadCell(_ref) {
     ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest, {
-    tabIndex: isSortable ? 0 : undefined,
+    onClick: onClick,
     isSortable: isSortable
-  }), /*#__PURE__*/_react.default.createElement("span", null, content));
+  }), isSortable ? /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-roledescription": "Sort button"
+  }, content) : /*#__PURE__*/_react.default.createElement("span", null, content));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -9,11 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../internal/helpers");
 var _tableHead = require("../styled/table-head");
@@ -27,16 +25,8 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(TableHead, _React$Component);
   var _super = _createSuper(TableHead);
   function TableHead() {
-    var _this;
     (0, _classCallCheck2.default)(this, TableHead);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "canSortOnEnterPressed", function (e, isSortable) {
-      return isSortable && e.key === 'Enter';
-    });
-    return _this;
+    return _super.apply(this, arguments);
   }
   (0, _createClass2.default)(TableHead, [{
     key: "UNSAFE_componentWillMount",
@@ -53,7 +43,6 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
       var _this$props = this.props,
         head = _this$props.head,
         sortKey = _this$props.sortKey,
@@ -94,9 +83,6 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           isRanking: isRanking,
           key: key || index,
           onClick: isSortable ? onSort(cell) : undefined,
-          onKeyDown: function onKeyDown(e) {
-            return _this2.canSortOnEnterPressed(e, isSortable) ? onSort(cell)() : undefined;
-          },
           testId: cellTestId || testId,
           shouldTruncate: shouldTruncate,
           sortOrder: key === sortKey ? sortOrder : undefined,

package/dist/cjs/styled/table-head.js

@@ -62,8 +62,16 @@ var onClickStyles = (0, _react2.css)({
   }
 });
 var baseStyles = (0, _react2.css)({
-  '& > span': {
+  '& > button': {
+    padding: "var(--ds-space-0, 0)",
     position: 'relative',
+    appearance: 'none',
+    background: 'none',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
     '&::before, &::after': {
       display: 'block',
       width: 0,
@@ -86,7 +94,7 @@ var baseStyles = (0, _react2.css)({
     }
   },
   '@media (forced-colors: active)': {
-    '& > span': {
+    '& > button': {
       '&::before, &::after': {
         border: "3px solid ".concat(_theme.MSThemeColors.Background)
       },
@@ -100,13 +108,13 @@ var baseStyles = (0, _react2.css)({
   }
 });
 var ascendingStyles = (0, _react2.css)({
-  '& > span': {
+  '& > button': {
     '&::before': {
       borderBottom: "3px solid ".concat(_theme.arrow.selectedColor)
     }
   },
   '@media (forced-colors: active)': {
-    '& > span': {
+    '& > button': {
       '&::before': {
         borderBottom: "3px solid ".concat(_theme.MSThemeColors.SelectedBackground)
       }
@@ -114,13 +122,13 @@ var ascendingStyles = (0, _react2.css)({
   }
 });
 var descendingStyles = (0, _react2.css)({
-  '& > span': {
+  '& > button': {
     '&::after': {
       borderTop: "3px solid ".concat(_theme.arrow.selectedColor)
     }
   },
   '@media (forced-colors: active)': {
-    '& > span': {
+    '& > button': {
       '&::after': {
         borderTop: "3px solid ".concat(_theme.MSThemeColors.SelectedBackground)
       }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.8.16",
+	"version": "14.8.17",
 	"sideEffects": false
 }

package/dist/es2019/components/stateless.js

@@ -14,7 +14,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/body';
 import TableHead from './table-head';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.8.16";
+const packageVersion = "14.8.17";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:
@@ -201,7 +201,7 @@ class DynamicTable extends React.Component {
       sortKey: sortKey,
       sortOrder: sortOrder,
       isRanking: this.state.isRanking,
-      isRankable: canRank,
+      isRankable: isRankable,
       testId: testId
     }), rowsExist && (canRank ? /*#__PURE__*/React.createElement(RankableTableBody, _extends({}, bodyProps, {
       isRanking: this.state.isRanking,

package/dist/es2019/components/table-head-cell.js

@@ -8,6 +8,7 @@ const TableHeadCell = ({
   isRanking,
   innerRef,
   isSortable,
+  onClick,
   ...rest
 }) => {
   return /*#__PURE__*/React.createElement(HeadCell, _extends({
@@ -16,9 +17,12 @@ const TableHeadCell = ({
     ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest, {
-    tabIndex: isSortable ? 0 : undefined,
+    onClick: onClick,
     isSortable: isSortable
-  }), /*#__PURE__*/React.createElement("span", null, content));
+  }), isSortable ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-roledescription": "Sort button"
+  }, content) : /*#__PURE__*/React.createElement("span", null, content));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -1,15 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { validateSortKey } from '../internal/helpers';
 import { Head } from '../styled/table-head';
 import RankableHeadCell from './rankable/table-head-cell';
 import HeadCell from './table-head-cell';
 class TableHead extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "canSortOnEnterPressed", (e, isSortable) => isSortable && e.key === 'Enter');
-  }
   UNSAFE_componentWillMount() {
     validateSortKey(this.props.sortKey, this.props.head);
   }
@@ -66,7 +61,6 @@ class TableHead extends React.Component {
         isRanking: isRanking,
         key: key || index,
         onClick: isSortable ? onSort(cell) : undefined,
-        onKeyDown: e => this.canSortOnEnterPressed(e, isSortable) ? onSort(cell)() : undefined,
         testId: cellTestId || testId,
         shouldTruncate: shouldTruncate,
         sortOrder: key === sortKey ? sortOrder : undefined,

package/dist/es2019/styled/table-head.js

@@ -49,8 +49,16 @@ const onClickStyles = css({
   }
 });
 const baseStyles = css({
-  '& > span': {
+  '& > button': {
+    padding: "var(--ds-space-0, 0)",
     position: 'relative',
+    appearance: 'none',
+    background: 'none',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
     '&::before, &::after': {
       display: 'block',
       width: 0,
@@ -73,7 +81,7 @@ const baseStyles = css({
     }
   },
   '@media (forced-colors: active)': {
-    '& > span': {
+    '& > button': {
       '&::before, &::after': {
         border: `3px solid ${MSThemeColors.Background}`
       },
@@ -87,13 +95,13 @@ const baseStyles = css({
   }
 });
 const ascendingStyles = css({
-  '& > span': {
+  '& > button': {
     '&::before': {
       borderBottom: `3px solid ${arrow.selectedColor}`
     }
   },
   '@media (forced-colors: active)': {
-    '& > span': {
+    '& > button': {
       '&::before': {
         borderBottom: `3px solid ${MSThemeColors.SelectedBackground}`
       }
@@ -101,13 +109,13 @@ const ascendingStyles = css({
   }
 });
 const descendingStyles = css({
-  '& > span': {
+  '& > button': {
     '&::after': {
       borderTop: `3px solid ${arrow.selectedColor}`
     }
   },
   '@media (forced-colors: active)': {
-    '& > span': {
+    '& > button': {
       '&::after': {
         borderTop: `3px solid ${MSThemeColors.SelectedBackground}`
       }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.8.16",
+	"version": "14.8.17",
 	"sideEffects": false
 }

package/dist/esm/components/stateless.js

@@ -22,7 +22,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/body';
 import TableHead from './table-head';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.8.16";
+var packageVersion = "14.8.17";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:
@@ -220,7 +220,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         sortKey: sortKey,
         sortOrder: sortOrder,
         isRanking: this.state.isRanking,
-        isRankable: canRank,
+        isRankable: isRankable,
         testId: testId
       }), rowsExist && (canRank ? /*#__PURE__*/React.createElement(RankableTableBody, _extends({}, bodyProps, {
         isRanking: this.state.isRanking,

package/dist/esm/components/table-head-cell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable"];
+var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "onClick"];
 import React from 'react';
 import { HeadCell } from '../styled/table-head';
 var TableHeadCell = function TableHeadCell(_ref) {
@@ -10,6 +10,7 @@ var TableHeadCell = function TableHeadCell(_ref) {
     isRanking = _ref.isRanking,
     innerRef = _ref.innerRef,
     isSortable = _ref.isSortable,
+    onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(HeadCell, _extends({
     style: inlineStyles,
@@ -17,9 +18,12 @@ var TableHeadCell = function TableHeadCell(_ref) {
     ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest, {
-    tabIndex: isSortable ? 0 : undefined,
+    onClick: onClick,
     isSortable: isSortable
-  }), /*#__PURE__*/React.createElement("span", null, content));
+  }), isSortable ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-roledescription": "Sort button"
+  }, content) : /*#__PURE__*/React.createElement("span", null, content));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -2,11 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["cells"],
   _excluded2 = ["colSpan", "content", "isSortable", "key", "shouldTruncate", "testId", "width"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -20,16 +18,8 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
   _inherits(TableHead, _React$Component);
   var _super = _createSuper(TableHead);
   function TableHead() {
-    var _this;
     _classCallCheck(this, TableHead);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "canSortOnEnterPressed", function (e, isSortable) {
-      return isSortable && e.key === 'Enter';
-    });
-    return _this;
+    return _super.apply(this, arguments);
   }
   _createClass(TableHead, [{
     key: "UNSAFE_componentWillMount",
@@ -46,7 +36,6 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
       var _this$props = this.props,
         head = _this$props.head,
         sortKey = _this$props.sortKey,
@@ -87,9 +76,6 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           isRanking: isRanking,
           key: key || index,
           onClick: isSortable ? onSort(cell) : undefined,
-          onKeyDown: function onKeyDown(e) {
-            return _this2.canSortOnEnterPressed(e, isSortable) ? onSort(cell)() : undefined;
-          },
           testId: cellTestId || testId,
           shouldTruncate: shouldTruncate,
           sortOrder: key === sortKey ? sortOrder : undefined,

package/dist/esm/styled/table-head.js

@@ -54,8 +54,16 @@ var onClickStyles = css({
   }
 });
 var baseStyles = css({
-  '& > span': {
+  '& > button': {
+    padding: "var(--ds-space-0, 0)",
     position: 'relative',
+    appearance: 'none',
+    background: 'none',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
     '&::before, &::after': {
       display: 'block',
       width: 0,
@@ -78,7 +86,7 @@ var baseStyles = css({
     }
   },
   '@media (forced-colors: active)': {
-    '& > span': {
+    '& > button': {
       '&::before, &::after': {
         border: "3px solid ".concat(MSThemeColors.Background)
       },
@@ -92,13 +100,13 @@ var baseStyles = css({
   }
 });
 var ascendingStyles = css({
-  '& > span': {
+  '& > button': {
     '&::before': {
       borderBottom: "3px solid ".concat(arrow.selectedColor)
     }
   },
   '@media (forced-colors: active)': {
-    '& > span': {
+    '& > button': {
       '&::before': {
         borderBottom: "3px solid ".concat(MSThemeColors.SelectedBackground)
       }
@@ -106,13 +114,13 @@ var ascendingStyles = css({
   }
 });
 var descendingStyles = css({
-  '& > span': {
+  '& > button': {
     '&::after': {
       borderTop: "3px solid ".concat(arrow.selectedColor)
     }
   },
   '@media (forced-colors: active)': {
-    '& > span': {
+    '& > button': {
       '&::after': {
         borderTop: "3px solid ".concat(MSThemeColors.SelectedBackground)
       }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.8.16",
+	"version": "14.8.17",
 	"sideEffects": false
 }

package/dist/types/components/table-head-cell.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, KeyboardEvent, LegacyRef } from 'react';
+import React, { FC, LegacyRef } from 'react';
 import { SortOrderType } from '../types';
 export interface TableHeadCellProps {
     colSpan?: number;
@@ -10,7 +10,6 @@ export interface TableHeadCellProps {
     inlineStyles?: {};
     content?: React.ReactNode;
     onClick?: () => void;
-    onKeyDown?: (e: KeyboardEvent) => void;
     shouldTruncate?: boolean;
     testId?: string;
     width?: number;

package/dist/types/components/table-head.d.ts

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent } from 'react';
+import React from 'react';
 import { HeadType, RowCellType, SortOrderType } from '../types';
 interface TableHeadProps {
     head: HeadType;
@@ -13,7 +13,6 @@ interface TableHeadProps {
 declare class TableHead extends React.Component<TableHeadProps, {}> {
     UNSAFE_componentWillMount(): void;
     UNSAFE_componentWillReceiveProps(nextProps: TableHeadProps): void;
-    canSortOnEnterPressed: (e: KeyboardEvent, isSortable: Boolean | void) => boolean | void;
     render(): JSX.Element | null;
 }
 export default TableHead;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.8.16",
+  "version": "14.8.17",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"