@atlaskit/table 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/table
 
+## 0.2.3
+
+### Patch Changes
+
+- [`8fb961ffa76`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8fb961ffa76) - [ux] Fixed some accessibility bugs. Now checkboxes in selectable cells are labelled for assistive technology users, sortable columns have their sorting state programmatically associated through the `aria-sort` attribute, and the sort button has an `aria-roledescription` to ensure that assistive technology users are informed that the column headers are sortable in nature.
+
 ## 0.2.2
 
 ### Patch Changes

package/dist/cjs/selectable-cell.js

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _selectionProvider = require("./hooks/selection-provider");
 var _useRowId = require("./hooks/use-row-id");
 var Primitives = _interopRequireWildcard(require("./ui"));
@@ -35,7 +36,8 @@ var SelectableCell = function SelectableCell() {
     as: "td"
   }, (0, _react2.jsx)(_checkbox.default, {
     isChecked: isChecked,
-    onChange: onChange
+    onChange: onChange,
+    label: (0, _react2.jsx)(_visuallyHidden.default, null, "Select row ", idx + 1)
   }));
 };
 var _default = /*#__PURE__*/(0, _react.memo)(SelectableCell);

package/dist/cjs/sortable-column.js

@@ -66,26 +66,29 @@ var SortableColumn = function SortableColumn(_ref) {
   function () {
     return setSortState(name);
   }, [setSortState, name]);
-  return (
+  return (0, _react2.jsx)(_ui.TH, (0, _extends2.default)({
+    testId: testId,
+    sortDirection: sortKey === name ? sortDirection : 'none'
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react2.jsx)(_ui.TH, (0, _extends2.default)({
-      testId: testId
-    }, other), (0, _react2.jsx)(_tooltip.default, {
-      content: getSortMessage(),
-      position: "top"
-    }, function (tooltipProps) {
-      return (0, _react2.jsx)(_button.default, (0, _extends2.default)({
-        spacing: "compact",
-        appearance: "subtle",
-        iconAfter: (0, _react2.jsx)(_ui.SortIcon, {
-          name: name
-        })
-      }, tooltipProps, {
-        onClick: updateSortState,
-        css: overrideStyles
-      }), children);
-    }))
-  );
+  }, other), (0, _react2.jsx)(_tooltip.default, {
+    content: getSortMessage(),
+    position: "top"
+  }, function (tooltipProps) {
+    return (0, _react2.jsx)(_button.default, (0, _extends2.default)({
+      testId: "".concat(testId, "--button"),
+      spacing: "compact",
+      appearance: "subtle",
+      iconAfter: (0, _react2.jsx)(_ui.SortIcon, {
+        name: name
+      })
+    }, tooltipProps, {
+      onClick: updateSortState,
+      css: overrideStyles
+      // TODO: i18n support for this attr
+      ,
+      "aria-roledescription": "Column sort button"
+    }), children);
+  }));
 };
 var _default = SortableColumn;
 exports.default = _default;

package/dist/cjs/thead.js

@@ -40,13 +40,13 @@ var THead = function THead(_ref) {
   }, (0, _react.jsx)(Primitives.SelectableCell, {
     as: "th"
   }, (0, _react.jsx)(_checkbox.default, {
-    "aria-labelledby": "select-all",
+    label: (0, _react.jsx)(_visuallyHidden.default, {
+      id: "select-all"
+    }, "Select all rows"),
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  }), (0, _react.jsx)(_visuallyHidden.default, {
-    id: "select-all"
-  }, "Select all rows")), children, isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
+  })), children, isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
     color: "color.text",
     fontWeight: "medium"
   }, state.checked.length, " selected"), actions && (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {

package/dist/cjs/ui/base-cell.js

@@ -48,7 +48,8 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     backgroundColor = _ref.backgroundColor,
     scope = _ref.scope,
     width = _ref.width,
-    className = _ref.className;
+    className = _ref.className,
+    sortDirection = _ref.sortDirection;
   return (0, _react2.jsx)(_box.default, {
     css: baseResetStyles,
     ref: ref,
@@ -61,7 +62,8 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: className,
     UNSAFE_style: width ? {
       width: width
-    } : undefined
+    } : undefined,
+    "aria-sort": sortDirection
   }, (0, _react2.jsx)(_inline.default, {
     justifyContent: alignMap[align],
     gap: "space.0"

package/dist/cjs/ui/th.js

@@ -20,7 +20,8 @@ var TH = function TH(_ref) {
     align = _ref.align,
     scope = _ref.scope,
     backgroundColor = _ref.backgroundColor,
-    width = _ref.width;
+    width = _ref.width,
+    sortDirection = _ref.sortDirection;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -30,7 +31,8 @@ var TH = function TH(_ref) {
       align: align,
       scope: scope,
       width: width,
-      backgroundColor: backgroundColor
+      backgroundColor: backgroundColor,
+      sortDirection: sortDirection
     }, children)
   );
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"sideEffects": false
 }

package/dist/es2019/selectable-cell.js

@@ -2,6 +2,7 @@
 import { memo, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useRowId } from './hooks/use-row-id';
 import * as Primitives from './ui';
@@ -19,7 +20,8 @@ const SelectableCell = () => {
     as: "td"
   }, jsx(Checkbox, {
     isChecked: isChecked,
-    onChange: onChange
+    onChange: onChange,
+    label: jsx(VisuallyHidden, null, "Select row ", idx + 1)
   }));
 };
 export default /*#__PURE__*/memo(SelectableCell);

package/dist/es2019/sortable-column.js

@@ -59,23 +59,26 @@ const SortableColumn = ({
   const updateSortState = useCallback(
   // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
   () => setSortState(name), [setSortState, name]);
-  return (
+  return jsx(TH, _extends({
+    testId: testId,
+    sortDirection: sortKey === name ? sortDirection : 'none'
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(TH, _extends({
-      testId: testId
-    }, other), jsx(Tooltip, {
-      content: getSortMessage(),
-      position: "top"
-    }, tooltipProps => jsx(Button, _extends({
-      spacing: "compact",
-      appearance: "subtle",
-      iconAfter: jsx(SortIcon, {
-        name: name
-      })
-    }, tooltipProps, {
-      onClick: updateSortState,
-      css: overrideStyles
-    }), children)))
-  );
+  }, other), jsx(Tooltip, {
+    content: getSortMessage(),
+    position: "top"
+  }, tooltipProps => jsx(Button, _extends({
+    testId: `${testId}--button`,
+    spacing: "compact",
+    appearance: "subtle",
+    iconAfter: jsx(SortIcon, {
+      name: name
+    })
+  }, tooltipProps, {
+    onClick: updateSortState,
+    css: overrideStyles
+    // TODO: i18n support for this attr
+    ,
+    "aria-roledescription": "Column sort button"
+  }), children)));
 };
 export default SortableColumn;

package/dist/es2019/thead.js

@@ -29,13 +29,13 @@ const THead = ({
   }, jsx(Primitives.SelectableCell, {
     as: "th"
   }, jsx(Checkbox, {
-    "aria-labelledby": "select-all",
+    label: jsx(VisuallyHidden, {
+      id: "select-all"
+    }, "Select all rows"),
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  }), jsx(VisuallyHidden, {
-    id: "select-all"
-  }, "Select all rows")), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
+  })), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
     color: "color.text",
     fontWeight: "medium"
   }, state.checked.length, " selected"), actions && jsx(Inline, {

package/dist/es2019/ui/base-cell.js

@@ -37,7 +37,8 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   backgroundColor,
   scope,
   width,
-  className
+  className,
+  sortDirection
 }, ref) => jsx(Box, {
   css: baseResetStyles,
   ref: ref,
@@ -50,7 +51,8 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   className: className,
   UNSAFE_style: width ? {
     width
-  } : undefined
+  } : undefined,
+  "aria-sort": sortDirection
 }, jsx(Inline, {
   justifyContent: alignMap[align],
   gap: "space.0"

package/dist/es2019/ui/th.js

@@ -13,7 +13,8 @@ export const TH = ({
   align,
   scope,
   backgroundColor,
-  width
+  width,
+  sortDirection
 }) =>
 /*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -23,5 +24,6 @@ React.createElement(BaseCell, {
   align: align,
   scope: scope,
   width: width,
-  backgroundColor: backgroundColor
+  backgroundColor: backgroundColor,
+  sortDirection: sortDirection
 }, children);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"sideEffects": false
 }

package/dist/esm/selectable-cell.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { memo, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useRowId } from './hooks/use-row-id';
 import * as Primitives from './ui';
@@ -24,7 +25,8 @@ var SelectableCell = function SelectableCell() {
     as: "td"
   }, jsx(Checkbox, {
     isChecked: isChecked,
-    onChange: onChange
+    onChange: onChange,
+    label: jsx(VisuallyHidden, null, "Select row ", idx + 1)
   }));
 };
 export default /*#__PURE__*/memo(SelectableCell);

package/dist/esm/sortable-column.js

@@ -61,25 +61,28 @@ var SortableColumn = function SortableColumn(_ref) {
   function () {
     return setSortState(name);
   }, [setSortState, name]);
-  return (
+  return jsx(TH, _extends({
+    testId: testId,
+    sortDirection: sortKey === name ? sortDirection : 'none'
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(TH, _extends({
-      testId: testId
-    }, other), jsx(Tooltip, {
-      content: getSortMessage(),
-      position: "top"
-    }, function (tooltipProps) {
-      return jsx(Button, _extends({
-        spacing: "compact",
-        appearance: "subtle",
-        iconAfter: jsx(SortIcon, {
-          name: name
-        })
-      }, tooltipProps, {
-        onClick: updateSortState,
-        css: overrideStyles
-      }), children);
-    }))
-  );
+  }, other), jsx(Tooltip, {
+    content: getSortMessage(),
+    position: "top"
+  }, function (tooltipProps) {
+    return jsx(Button, _extends({
+      testId: "".concat(testId, "--button"),
+      spacing: "compact",
+      appearance: "subtle",
+      iconAfter: jsx(SortIcon, {
+        name: name
+      })
+    }, tooltipProps, {
+      onClick: updateSortState,
+      css: overrideStyles
+      // TODO: i18n support for this attr
+      ,
+      "aria-roledescription": "Column sort button"
+    }), children);
+  }));
 };
 export default SortableColumn;

package/dist/esm/thead.js

@@ -30,13 +30,13 @@ var THead = function THead(_ref) {
   }, jsx(Primitives.SelectableCell, {
     as: "th"
   }, jsx(Checkbox, {
-    "aria-labelledby": "select-all",
+    label: jsx(VisuallyHidden, {
+      id: "select-all"
+    }, "Select all rows"),
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  }), jsx(VisuallyHidden, {
-    id: "select-all"
-  }, "Select all rows")), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
+  })), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
     color: "color.text",
     fontWeight: "medium"
   }, state.checked.length, " selected"), actions && jsx(Inline, {

package/dist/esm/ui/base-cell.js

@@ -40,7 +40,8 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     backgroundColor = _ref.backgroundColor,
     scope = _ref.scope,
     width = _ref.width,
-    className = _ref.className;
+    className = _ref.className,
+    sortDirection = _ref.sortDirection;
   return jsx(Box, {
     css: baseResetStyles,
     ref: ref,
@@ -53,7 +54,8 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: className,
     UNSAFE_style: width ? {
       width: width
-    } : undefined
+    } : undefined,
+    "aria-sort": sortDirection
   }, jsx(Inline, {
     justifyContent: alignMap[align],
     gap: "space.0"

package/dist/esm/ui/th.js

@@ -13,7 +13,8 @@ export var TH = function TH(_ref) {
     align = _ref.align,
     scope = _ref.scope,
     backgroundColor = _ref.backgroundColor,
-    width = _ref.width;
+    width = _ref.width,
+    sortDirection = _ref.sortDirection;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -23,7 +24,8 @@ export var TH = function TH(_ref) {
       align: align,
       scope: scope,
       width: width,
-      backgroundColor: backgroundColor
+      backgroundColor: backgroundColor,
+      sortDirection: sortDirection
     }, children)
   );
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"sideEffects": false
 }

package/dist/types/ui/base-cell.d.ts

@@ -30,6 +30,10 @@ export declare type BaseCellProps = {
      */
     children?: ReactNode;
 } & Pick<BoxProps, 'paddingBlock' | 'paddingInline' | 'backgroundColor' | 'className'>;
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
+ */
+export declare type SortDirection = 'ascending' | 'descending' | 'none' | 'other';
 declare const alignMap: {
     readonly text: "flexStart";
     readonly number: "flexEnd";
@@ -70,5 +74,7 @@ export declare const BaseCell: import("react").ForwardRefExoticComponent<{
      * Content of the cell.
      */
     children?: ReactNode;
-} & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & import("react").RefAttributes<HTMLTableCellElement>>;
+} & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & {
+    sortDirection?: SortDirection | undefined;
+} & import("react").RefAttributes<HTMLTableCellElement>>;
 export {};

package/dist/types/ui/th.d.ts

@@ -1,6 +1,9 @@
 import { FC } from 'react';
-import { BaseCellProps } from './base-cell';
+import { BaseCellProps, SortDirection } from './base-cell';
 export declare type THProps = Omit<BaseCellProps, 'as'>;
+declare type InternalTHProps = THProps & {
+    sortDirection?: SortDirection;
+};
 /**
  * __Head cell__
  *
@@ -8,4 +11,5 @@ export declare type THProps = Omit<BaseCellProps, 'as'>;
  *
  * @primitive
  */
-export declare const TH: FC<THProps>;
+export declare const TH: FC<InternalTHProps>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A table is used to display data.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,8 +38,8 @@
     "@atlaskit/ds-lib": "^2.1.2",
     "@atlaskit/focus-ring": "^1.2.1",
     "@atlaskit/icon": "^21.11.2",
-    "@atlaskit/tokens": "^1.0.0",
-    "@atlaskit/tooltip": "^17.5.16",
+    "@atlaskit/tokens": "^1.2.0",
+    "@atlaskit/tooltip": "^17.7.0",
     "@atlaskit/visually-hidden": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -62,6 +62,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
+    "jest-axe": "^4.0.0",
     "react-dom": "^16.8.0",
     "storybook-addon-designs": "^6.3.1",
     "typescript": "4.5.5",
@@ -81,15 +82,17 @@
       "analytics": [
         "analytics-next"
       ],
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "theming": [
-        "react-context",
-        "tokens"
+        "react-context"
       ],
       "ui-components": [
         "lite-mode"
       ],
       "design-system": "v1",
-      "design-tokens": "spacing",
       "deprecation": [
         "no-deprecated-imports"
       ],

package/constellation/index/examples.mdx

@@ -1,19 +0,0 @@
----
-order: 0
----
-
-import BasicAKTableExample from '../../examples/composed';
-import AKTableExample from '../../examples/basic';
-
-## Basic
-
-A table is composed of simple composable elements. In its base form these UI elements are purely presentational.
-
-<Example Component={BasicAKTableExample} packageName="@atlaskit/table" />
-
-## Basic data table
-
-A data table is used to display dynamic data.
-
-<Example Component={AKTableExample} packageName="@atlaskit/table" />
-

package/constellation/index/props.mdx

@@ -1,17 +0,0 @@
-import TableProps from '!!extract-react-types-loader!../../extract-react-types/table.tsx';
-import RowProps from '!!extract-react-types-loader!../../extract-react-types/row.tsx';
-import CellProps from '!!extract-react-types-loader!../../extract-react-types/cell.tsx';
-
-## Props
-
-### Table props
-
-<PropsTable heading="" props={TableProps} />
-
-### Row props
-
-<PropsTable heading="Row props" props={RowProps} />
-
-### Cell props
-
-<PropsTable heading="Cell props" props={CellProps} />