@atlaskit/renderer 108.15.2 → 108.15.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 108.15.3
+
+### Patch Changes
+
+- [`1b31bd53b23`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b31bd53b23) - [ux] [ECA11Y-89] Added aria-label for sortable table header cell button
+
 ## 108.15.2
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableCellMessages = exports.sortingIconMessages = exports.headingAnchorLinkMessages = void 0;
+exports.tableCellMessages = exports.sortingIconMessages = exports.sortingAriaLabelMessages = exports.headingAnchorLinkMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var headingAnchorLinkMessages = (0, _reactIntlNext.defineMessages)({
   copyHeadingLinkToClipboard: {
@@ -68,4 +68,32 @@ var sortingIconMessages = (0, _reactIntlNext.defineMessages)({
     description: 'this sort is invalid for merged cells'
   }
 });
-exports.sortingIconMessages = sortingIconMessages;
+exports.sortingIconMessages = sortingIconMessages;
+var sortingAriaLabelMessages = (0, _reactIntlNext.defineMessages)({
+  noOrderLabel: {
+    id: 'fabric.editor.tableHeader.sorting.no',
+    defaultMessage: 'No sort applied to the column',
+    description: 'Aria-label for Sort column button when sorting was not applied or the sorting has been cleared'
+  },
+  ascOrderLabel: {
+    id: 'fabric.editor.tableHeader.sorting.asc',
+    defaultMessage: 'Ascending sort applied',
+    description: 'Aria-label for Sort column button when ascending sorting was applied'
+  },
+  descOrderLabel: {
+    id: 'fabric.editor.tableHeader.sorting.desc',
+    defaultMessage: 'Descending sort applied',
+    description: 'Aria-label for Sort column button when descending sorting was applied'
+  },
+  invalidLabel: {
+    id: 'fabric.editor.tableHeader.sorting.invalid',
+    defaultMessage: "You can't sort a table with merged cells",
+    description: 'Aria-label for Sort column button when sorting is not possible'
+  },
+  defaultLabel: {
+    id: 'fabric.editor.tableHeader.sorting.default',
+    defaultMessage: 'Sort the column',
+    description: 'Default aria-label for Sort column button'
+  }
+});
+exports.sortingAriaLabelMessages = sortingAriaLabelMessages;

package/dist/cjs/ui/Renderer/index.js

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.15.2";
+var packageVersion = "108.15.3";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/ui/SortingIcon.js

@@ -23,7 +23,7 @@ var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
   return StatusClassNames;
 }({});
 exports.StatusClassNames = StatusClassNames;
-var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
+var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: ", ";\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 var iconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 
 // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
@@ -63,6 +63,25 @@ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrder
   }
   return '';
 };
+var getAriaLabel = function getAriaLabel(intl, isSortingAllowed, sortOrdered) {
+  var noOrderLabel = _messages.sortingAriaLabelMessages.noOrderLabel,
+    ascOrderLabel = _messages.sortingAriaLabelMessages.ascOrderLabel,
+    descOrderLabel = _messages.sortingAriaLabelMessages.descOrderLabel,
+    invalidLabel = _messages.sortingAriaLabelMessages.invalidLabel,
+    defaultLabel = _messages.sortingAriaLabelMessages.defaultLabel;
+  if (!isSortingAllowed) {
+    return intl.formatMessage(invalidLabel);
+  }
+  switch (sortOrdered) {
+    case _types.SortOrder.NO_ORDER:
+      return intl.formatMessage(noOrderLabel);
+    case _types.SortOrder.ASC:
+      return intl.formatMessage(ascOrderLabel);
+    case _types.SortOrder.DESC:
+      return intl.formatMessage(descOrderLabel);
+  }
+  return intl.formatMessage(defaultLabel);
+};
 var SortingIcon = function SortingIcon(_ref) {
   var isSortingAllowed = _ref.isSortingAllowed,
     sortOrdered = _ref.sortOrdered,
@@ -71,6 +90,7 @@ var SortingIcon = function SortingIcon(_ref) {
     onKeyDown = _ref.onKeyDown;
   var buttonClassName = "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON).concat(isSortingAllowed ? '' : " ".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, "__not-allowed"));
   var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
+  var ariaLabel = getAriaLabel(intl, isSortingAllowed, sortOrdered);
   var handleClick = function handleClick() {
     if (isSortingAllowed) {
       onClick();
@@ -90,7 +110,7 @@ var SortingIcon = function SortingIcon(_ref) {
     className: buttonClassName,
     role: "button",
     tabIndex: isSortingAllowed ? 0 : -1,
-    "aria-label": "sort column",
+    "aria-label": ariaLabel,
     "aria-disabled": !isSortingAllowed,
     onClick: handleClick,
     onKeyDown: handleKeyDown

package/dist/es2019/messages.js

@@ -59,4 +59,31 @@ export const sortingIconMessages = defineMessages({
     defaultMessage: `⚠️  You can't sort a table with merged cells`,
     description: 'this sort is invalid for merged cells'
   }
+});
+export const sortingAriaLabelMessages = defineMessages({
+  noOrderLabel: {
+    id: 'fabric.editor.tableHeader.sorting.no',
+    defaultMessage: 'No sort applied to the column',
+    description: 'Aria-label for Sort column button when sorting was not applied or the sorting has been cleared'
+  },
+  ascOrderLabel: {
+    id: 'fabric.editor.tableHeader.sorting.asc',
+    defaultMessage: 'Ascending sort applied',
+    description: 'Aria-label for Sort column button when ascending sorting was applied'
+  },
+  descOrderLabel: {
+    id: 'fabric.editor.tableHeader.sorting.desc',
+    defaultMessage: 'Descending sort applied',
+    description: 'Aria-label for Sort column button when descending sorting was applied'
+  },
+  invalidLabel: {
+    id: 'fabric.editor.tableHeader.sorting.invalid',
+    defaultMessage: `You can't sort a table with merged cells`,
+    description: 'Aria-label for Sort column button when sorting is not possible'
+  },
+  defaultLabel: {
+    id: 'fabric.editor.tableHeader.sorting.default',
+    defaultMessage: 'Sort the column',
+    description: 'Default aria-label for Sort column button'
+  }
 });

package/dist/es2019/ui/Renderer/index.js

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.15.2";
+const packageVersion = "108.15.3";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/ui/SortingIcon.js

@@ -3,7 +3,7 @@ import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { sortingIconMessages } from '../messages';
+import { sortingIconMessages, sortingAriaLabelMessages } from '../messages';
 import { injectIntl } from 'react-intl-next';
 import { RendererCssClassName } from '../consts';
 export let StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
@@ -18,7 +18,7 @@ const buttonStyles = css`
   display: flex;
   height: 28px;
   width: 28px;
-  margin: 6px;
+  margin: ${"var(--ds-space-075, 6px)"};
   right: 0;
   top: 0;
   border: 2px solid ${"var(--ds-border, #fff)"};
@@ -119,6 +119,27 @@ const getTooltipTitle = (intl, isSortingAllowed, sortOrdered) => {
   }
   return '';
 };
+const getAriaLabel = (intl, isSortingAllowed, sortOrdered) => {
+  const {
+    noOrderLabel,
+    ascOrderLabel,
+    descOrderLabel,
+    invalidLabel,
+    defaultLabel
+  } = sortingAriaLabelMessages;
+  if (!isSortingAllowed) {
+    return intl.formatMessage(invalidLabel);
+  }
+  switch (sortOrdered) {
+    case SortOrder.NO_ORDER:
+      return intl.formatMessage(noOrderLabel);
+    case SortOrder.ASC:
+      return intl.formatMessage(ascOrderLabel);
+    case SortOrder.DESC:
+      return intl.formatMessage(descOrderLabel);
+  }
+  return intl.formatMessage(defaultLabel);
+};
 const SortingIcon = ({
   isSortingAllowed,
   sortOrdered,
@@ -128,6 +149,7 @@ const SortingIcon = ({
 }) => {
   const buttonClassName = `${RendererCssClassName.SORTABLE_COLUMN_ICON}${isSortingAllowed ? '' : ` ${RendererCssClassName.SORTABLE_COLUMN_ICON}__not-allowed`}`;
   const content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
+  const ariaLabel = getAriaLabel(intl, isSortingAllowed, sortOrdered);
   const handleClick = () => {
     if (isSortingAllowed) {
       onClick();
@@ -147,7 +169,7 @@ const SortingIcon = ({
     className: buttonClassName,
     role: "button",
     tabIndex: isSortingAllowed ? 0 : -1,
-    "aria-label": "sort column",
+    "aria-label": ariaLabel,
     "aria-disabled": !isSortingAllowed,
     onClick: handleClick,
     onKeyDown: handleKeyDown

package/dist/esm/messages.js

@@ -59,4 +59,31 @@ export var sortingIconMessages = defineMessages({
     defaultMessage: "\u26A0\uFE0F  You can't sort a table with merged cells",
     description: 'this sort is invalid for merged cells'
   }
+});
+export var sortingAriaLabelMessages = defineMessages({
+  noOrderLabel: {
+    id: 'fabric.editor.tableHeader.sorting.no',
+    defaultMessage: 'No sort applied to the column',
+    description: 'Aria-label for Sort column button when sorting was not applied or the sorting has been cleared'
+  },
+  ascOrderLabel: {
+    id: 'fabric.editor.tableHeader.sorting.asc',
+    defaultMessage: 'Ascending sort applied',
+    description: 'Aria-label for Sort column button when ascending sorting was applied'
+  },
+  descOrderLabel: {
+    id: 'fabric.editor.tableHeader.sorting.desc',
+    defaultMessage: 'Descending sort applied',
+    description: 'Aria-label for Sort column button when descending sorting was applied'
+  },
+  invalidLabel: {
+    id: 'fabric.editor.tableHeader.sorting.invalid',
+    defaultMessage: "You can't sort a table with merged cells",
+    description: 'Aria-label for Sort column button when sorting is not possible'
+  },
+  defaultLabel: {
+    id: 'fabric.editor.tableHeader.sorting.default',
+    defaultMessage: 'Sort the column',
+    description: 'Default aria-label for Sort column button'
+  }
 });

package/dist/esm/ui/Renderer/index.js

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.15.2";
+var packageVersion = "108.15.3";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/ui/SortingIcon.js

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { sortingIconMessages } from '../messages';
+import { sortingIconMessages, sortingAriaLabelMessages } from '../messages';
 import { injectIntl } from 'react-intl-next';
 import { RendererCssClassName } from '../consts';
 export var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
@@ -15,7 +15,7 @@ export var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
   return StatusClassNames;
 }({});
-var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", RendererCssClassName.SORTABLE_COLUMN_ICON);
+var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: ", ";\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", RendererCssClassName.SORTABLE_COLUMN_ICON);
 var iconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, RendererCssClassName.SORTABLE_COLUMN_ICON);
 
 // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
@@ -55,6 +55,25 @@ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrder
   }
   return '';
 };
+var getAriaLabel = function getAriaLabel(intl, isSortingAllowed, sortOrdered) {
+  var noOrderLabel = sortingAriaLabelMessages.noOrderLabel,
+    ascOrderLabel = sortingAriaLabelMessages.ascOrderLabel,
+    descOrderLabel = sortingAriaLabelMessages.descOrderLabel,
+    invalidLabel = sortingAriaLabelMessages.invalidLabel,
+    defaultLabel = sortingAriaLabelMessages.defaultLabel;
+  if (!isSortingAllowed) {
+    return intl.formatMessage(invalidLabel);
+  }
+  switch (sortOrdered) {
+    case SortOrder.NO_ORDER:
+      return intl.formatMessage(noOrderLabel);
+    case SortOrder.ASC:
+      return intl.formatMessage(ascOrderLabel);
+    case SortOrder.DESC:
+      return intl.formatMessage(descOrderLabel);
+  }
+  return intl.formatMessage(defaultLabel);
+};
 var SortingIcon = function SortingIcon(_ref) {
   var isSortingAllowed = _ref.isSortingAllowed,
     sortOrdered = _ref.sortOrdered,
@@ -63,6 +82,7 @@ var SortingIcon = function SortingIcon(_ref) {
     onKeyDown = _ref.onKeyDown;
   var buttonClassName = "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON).concat(isSortingAllowed ? '' : " ".concat(RendererCssClassName.SORTABLE_COLUMN_ICON, "__not-allowed"));
   var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
+  var ariaLabel = getAriaLabel(intl, isSortingAllowed, sortOrdered);
   var handleClick = function handleClick() {
     if (isSortingAllowed) {
       onClick();
@@ -82,7 +102,7 @@ var SortingIcon = function SortingIcon(_ref) {
     className: buttonClassName,
     role: "button",
     tabIndex: isSortingAllowed ? 0 : -1,
-    "aria-label": "sort column",
+    "aria-label": ariaLabel,
     "aria-disabled": !isSortingAllowed,
     onClick: handleClick,
     onKeyDown: handleKeyDown

package/dist/types/messages.d.ts

@@ -59,3 +59,30 @@ export declare const sortingIconMessages: {
         description: string;
     };
 };
+export declare const sortingAriaLabelMessages: {
+    noOrderLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    ascOrderLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    descOrderLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    invalidLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    defaultLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 export declare enum StatusClassNames {
     ASC = "sorting-icon-svg__asc",
     DESC = "sorting-icon-svg__desc",

package/dist/types-ts4.5/messages.d.ts

@@ -59,3 +59,30 @@ export declare const sortingIconMessages: {
         description: string;
     };
 };
+export declare const sortingAriaLabelMessages: {
+    noOrderLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    ascOrderLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    descOrderLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    invalidLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    defaultLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/ui/SortingIcon.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 export declare enum StatusClassNames {
     ASC = "sorting-icon-svg__asc",
     DESC = "sorting-icon-svg__desc",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.15.2",
+  "version": "108.15.3",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"