@atlaskit/task-decision 19.1.3 → 19.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/task-decision
 
+## 19.2.0
+
+### Minor Changes
+
+- [#146310](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/146310)
+  [`fb230587c00e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb230587c00e2) -
+  [ux] [A11Y-9616] Add internationalisation to tasks and descisions plugin, wrap tasks item lists in
+  a fieldset to group them and give them an accessible name
+
+### Patch Changes
+
+- Updated dependencies
+
+## 19.1.4
+
+### Patch Changes
+
+- [#139777](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139777)
+  [`cfdfe0077993d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cfdfe0077993d) -
+  Fix bug where a refs were passed incorrectly, preventing task item focus from being set
+- Updated dependencies
+
 ## 19.1.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -26,6 +26,12 @@
         {
             "path": "../../../design-system/icon/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
+        {
+            "path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../../design-system/icon/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/components/TaskItem.js

@@ -16,6 +16,8 @@ var _checkboxChecked = _interopRequireDefault(require("@atlaskit/icon/core/check
 var _Item = _interopRequireDefault(require("./Item"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../analytics");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _useCallbackRef = require("use-callback-ref");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -37,7 +39,7 @@ var taskCount = 0;
 var getCheckBoxId = function getCheckBoxId(localId) {
   return "".concat(localId, "-").concat(taskCount++);
 };
-var TaskItem = function TaskItem(props) {
+var TaskItemWithoutRefFix = function TaskItemWithoutRefFix(props) {
   var appearance = props.appearance,
     isDone = props.isDone,
     isFocused = props.isFocused,
@@ -50,8 +52,8 @@ var TaskItem = function TaskItem(props) {
     taskId = props.taskId,
     onChange = props.onChange,
     onClick = props.onClick,
-    createAnalyticsEvent = props.createAnalyticsEvent,
-    inputRefFromProps = props.inputRef;
+    createAnalyticsEvent = props.createAnalyticsEvent;
+  var inputRefFromProps = props.inputRef;
   var checkBoxId = (0, _react.useMemo)(function () {
     return getCheckBoxId(taskId);
   }, [taskId]);
@@ -128,7 +130,98 @@ var TaskItem = function TaskItem(props) {
     checkBoxId: checkBoxId
   }, children);
 };
+var TaskItemWithRefFix = function TaskItemWithRefFix(props) {
+  var appearance = props.appearance,
+    isDone = props.isDone,
+    isFocused = props.isFocused,
+    contentRef = props.contentRef,
+    children = props.children,
+    placeholder = props.placeholder,
+    showPlaceholder = props.showPlaceholder,
+    disabled = props.disabled,
+    dataAttributes = props.dataAttributes,
+    taskId = props.taskId,
+    onChange = props.onChange,
+    onClick = props.onClick,
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    inputRefFromProps = props.inputRef;
+  var checkBoxId = (0, _react.useMemo)(function () {
+    return getCheckBoxId(taskId);
+  }, [taskId]);
+  var handleOnChange = (0, _react.useMemo)(function () {
+    return function (_evt) {
+      var newIsDone = !isDone;
+      if (onChange) {
+        onChange(taskId, newIsDone);
+      }
+      var action = newIsDone ? 'checked' : 'unchecked';
+      if (createAnalyticsEvent) {
+        (0, _analytics.createAndFireEventInElementsChannel)({
+          action: action,
+          actionSubject: 'action',
+          eventType: 'ui',
+          attributes: {
+            localId: taskId
+          }
+        })(createAnalyticsEvent);
+      }
+    };
+  }, [onChange, taskId, isDone, createAnalyticsEvent]);
+  var handleOnKeyPress = (0, _react.useMemo)(function () {
+    return function (event) {
+      if (event.key === 'Enter') {
+        handleOnChange(event);
+      }
+    };
+  }, [handleOnChange]);
+  var localInputRef = (0, _react.useRef)(null);
+  var inputRef = (0, _useCallbackRef.useMergeRefs)(inputRefFromProps === undefined ? [localInputRef] : [inputRefFromProps, localInputRef]);
+  var icon = /*#__PURE__*/_react.default.createElement("span", {
+    contentEditable: false,
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16np1elr _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1j9a _1wn015vq _den512j9 _zh8l1b66 _g5w3stnw _whhepxbi _1stbpxbi _18tob3bt _1awt1ule _haf81ssb _ra781ssb _cr751ooe _1q8r7vkz _9l2s7vkz _1mh7kb7n _s3uktlke _1davidpf _8bo8stnw _psnc1ssb _4k421ssb _1rvv1ooe _13vl73ad _1t711tcg _1nuz1tcg _cs4qstnw _9j2j1ssb _1mwj1ssb _19l51ooe _12yy1d5g _1miy1elr _1umo18hz _tpz25w2r _k6dg18hz _1qduewfl _q8ft1fvw _1y9t5w2r _ut031fvw _gi9hr01l _1qp6muej _wxkgr01l _wo245w2r _c8dpmuej _d2dcsyzs _1eulsyzs _1bc7syzs _16fmsyzs _bhkusyzs _czfesyzs _1gxgsyzs _19w0syzs _1x1y1lg7"]),
+    style: {
+      "--_toyvsf": (0, _runtime.ix)("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
+    }
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    id: checkBoxId,
+    "aria-labelledby": "".concat(checkBoxId, "-wrapper"),
+    name: checkBoxId,
+    type: "checkbox",
+    onChange: handleOnChange,
+    onClick: onClick,
+    checked: !!isDone,
+    disabled: !!disabled,
+    suppressHydrationWarning: true,
+    onKeyPress: handleOnKeyPress,
+    ref: inputRef
+  }), isDone ? /*#__PURE__*/_react.default.createElement(_checkboxChecked.default, {
+    label: ""
+  }) : /*#__PURE__*/_react.default.createElement(CheckboxUncheckedIcon, {
+    label: ""
+  }));
+  _react.default.useEffect(function () {
+    if (isFocused && inputRef.current) {
+      var _inputRef$current4, _inputRef$current5;
+      (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 || _inputRef$current4.focus();
+      (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 || _inputRef$current5.blur();
+      setTimeout(function () {
+        var _inputRef$current6;
+        (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 || _inputRef$current6.focus();
+      }, 100);
+    }
+  }, [isFocused, inputRef]);
+  return /*#__PURE__*/_react.default.createElement(_Item.default, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "TASK",
+    dataAttributes: dataAttributes,
+    checkBoxId: checkBoxId
+  }, children);
+};
 
 // This is to ensure that the "type" is exported, as it gets lost and not exported along with TaskItem after
 // going through the high order component.
-var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()(TaskItem);
+var _default = exports.default = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_task_item_ref_fix', (0, _analyticsNext.withAnalyticsEvents)()(TaskItemWithRefFix), (0, _analyticsNext.withAnalyticsEvents)()(TaskItemWithoutRefFix));

package/dist/cjs/components/TaskList.js

@@ -16,19 +16,52 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _i18n = require("./i18n");
+var _reactIntlNext = require("react-intl-next");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var listStyles = null;
 var taskListStyles = null;
-var TaskList = exports.default = /*#__PURE__*/function (_PureComponent) {
-  function TaskList() {
-    (0, _classCallCheck2.default)(this, TaskList);
-    return _callSuper(this, TaskList, arguments);
+var TaskListNew = function TaskListNew(_ref) {
+  var listId = _ref.listId,
+    children = _ref.children;
+  var listSize = _react.default.Children.count(children);
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  if (!children) {
+    return null;
   }
-  (0, _inherits2.default)(TaskList, _PureComponent);
-  return (0, _createClass2.default)(TaskList, [{
+  return /*#__PURE__*/_react.default.createElement("div", {
+    role: "group",
+    "data-task-list-local-id": "",
+    "aria-label": formatMessage(_i18n.messages.fieldsetLabel),
+    className: (0, _runtime.ax)(["_2mzuglyw _19bvidpf"])
+  }, _react.default.Children.map(children, function (child, idx) {
+    var _ref2 = child.props,
+      localId = _ref2.localId;
+    return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
+      data: {
+        listLocalId: listId,
+        listSize: listSize,
+        position: idx
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      key: idx,
+      "data-task-local-id": localId || '',
+      className: (0, _runtime.ax)(["_19pk1b66"])
+    }, child));
+  }));
+};
+var TaskListOld = /*#__PURE__*/function (_PureComponent) {
+  function TaskListOld() {
+    (0, _classCallCheck2.default)(this, TaskListOld);
+    return _callSuper(this, TaskListOld, arguments);
+  }
+  (0, _inherits2.default)(TaskListOld, _PureComponent);
+  return (0, _createClass2.default)(TaskListOld, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -49,8 +82,8 @@ var TaskList = exports.default = /*#__PURE__*/function (_PureComponent) {
         "data-task-list-local-id": "",
         className: (0, _runtime.ax)(["_2mzuglyw _19bvidpf"])
       }, _react.default.Children.map(children, function (child, idx) {
-        var _ref = child.props,
-          localId = _ref.localId;
+        var _ref3 = child.props,
+          localId = _ref3.localId;
         return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
           data: {
             listLocalId: listId,
@@ -65,4 +98,11 @@ var TaskList = exports.default = /*#__PURE__*/function (_PureComponent) {
       }));
     }
   }]);
-}(_react.PureComponent);
+}(_react.PureComponent);
+var TaskListNext = function TaskListNext(props) {
+  if ((0, _platformFeatureFlags.fg)('editor_a11y_group_around_action_items')) {
+    return /*#__PURE__*/_react.default.createElement(TaskListNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(TaskListOld, props);
+};
+var _default = exports.default = TaskListNext;

package/dist/cjs/components/i18n.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  fieldsetLabel: {
+    id: 'fabric.editor.fieldsetLabel',
+    defaultMessage: 'Action Item List',
+    description: 'Label for a list of tasks/ action items'
+  }
+});

package/dist/es2019/components/TaskItem.js

@@ -11,6 +11,8 @@ import CheckboxCheckedIcon from '@atlaskit/icon/core/checkbox-checked';
 import Item from './Item';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { useMergeRefs } from 'use-callback-ref';
 const CheckboxUncheckedIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
   dangerouslySetGlyph: `<rect width="12.5" height="12.5" x="1.75" y="1.75" stroke="currentcolor" stroke-width="1.5" rx="1.25"/>`,
   type: 'core'
@@ -24,7 +26,7 @@ const CheckboxUncheckedIcon = props => /*#__PURE__*/React.createElement(Icon, _e
 const checkboxStyles = null;
 let taskCount = 0;
 const getCheckBoxId = localId => `${localId}-${taskCount++}`;
-const TaskItem = props => {
+const TaskItemWithoutRefFix = props => {
   const {
     appearance,
     isDone,
@@ -38,9 +40,9 @@ const TaskItem = props => {
     taskId,
     onChange,
     onClick,
-    createAnalyticsEvent,
-    inputRef: inputRefFromProps
+    createAnalyticsEvent
   } = props;
+  const inputRefFromProps = props.inputRef;
   const checkBoxId = useMemo(() => getCheckBoxId(taskId), [taskId]);
   const handleOnChange = useMemo(() => {
     return _evt => {
@@ -110,8 +112,94 @@ const TaskItem = props => {
     checkBoxId: checkBoxId
   }, children);
 };
+const TaskItemWithRefFix = props => {
+  const {
+    appearance,
+    isDone,
+    isFocused,
+    contentRef,
+    children,
+    placeholder,
+    showPlaceholder,
+    disabled,
+    dataAttributes,
+    taskId,
+    onChange,
+    onClick,
+    createAnalyticsEvent,
+    inputRef: inputRefFromProps
+  } = props;
+  const checkBoxId = useMemo(() => getCheckBoxId(taskId), [taskId]);
+  const handleOnChange = useMemo(() => {
+    return _evt => {
+      const newIsDone = !isDone;
+      if (onChange) {
+        onChange(taskId, newIsDone);
+      }
+      const action = newIsDone ? 'checked' : 'unchecked';
+      if (createAnalyticsEvent) {
+        createAndFireEventInElementsChannel({
+          action,
+          actionSubject: 'action',
+          eventType: 'ui',
+          attributes: {
+            localId: taskId
+          }
+        })(createAnalyticsEvent);
+      }
+    };
+  }, [onChange, taskId, isDone, createAnalyticsEvent]);
+  const handleOnKeyPress = useMemo(() => event => {
+    if (event.key === 'Enter') {
+      handleOnChange(event);
+    }
+  }, [handleOnChange]);
+  const localInputRef = useRef(null);
+  const inputRef = useMergeRefs(inputRefFromProps === undefined ? [localInputRef] : [inputRefFromProps, localInputRef]);
+  const icon = /*#__PURE__*/React.createElement("span", {
+    contentEditable: false,
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16np1elr _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1j9a _1wn015vq _den5ugt7 _zh8l1b66 _g5w3stnw _whhepxbi _1stbpxbi _18tob3bt _1awt1ule _haf81ssb _ra781ssb _cr751ooe _1q8r7vkz _9l2s7vkz _1mh7kb7n _s3uktlke _1davidpf _8bo8stnw _psnc1ssb _4k421ssb _1rvv1ooe _13vl73ad _1t711tcg _1nuz1tcg _cs4qstnw _9j2j1ssb _1mwj1ssb _19l51ooe _12yy1d5g _1miy1elr _1umo18hz _tpz25w2r _k6dg18hz _1qduewfl _q8ft1fvw _1y9t5w2r _ut031fvw _gi9hr01l _1qp6muej _wxkgr01l _wo245w2r _c8dpmuej _d2dcsyzs _1eulsyzs _1bc7syzs _16fmsyzs _bhkusyzs _czfesyzs _1gxgsyzs _19w0syzs _1x1y1lg7"])
+  }, /*#__PURE__*/React.createElement("input", {
+    id: checkBoxId,
+    "aria-labelledby": `${checkBoxId}-wrapper`,
+    name: checkBoxId,
+    type: "checkbox",
+    onChange: handleOnChange,
+    onClick: onClick,
+    checked: !!isDone,
+    disabled: !!disabled,
+    suppressHydrationWarning: true,
+    onKeyPress: handleOnKeyPress,
+    ref: inputRef
+  }), isDone ? /*#__PURE__*/React.createElement(CheckboxCheckedIcon, {
+    label: ""
+  }) : /*#__PURE__*/React.createElement(CheckboxUncheckedIcon, {
+    label: ""
+  }));
+  React.useEffect(() => {
+    if (isFocused && inputRef.current) {
+      var _inputRef$current4, _inputRef$current5;
+      (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
+      (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.blur();
+      setTimeout(() => {
+        var _inputRef$current6;
+        (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : _inputRef$current6.focus();
+      }, 100);
+    }
+  }, [isFocused, inputRef]);
+  return /*#__PURE__*/React.createElement(Item, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "TASK",
+    dataAttributes: dataAttributes,
+    checkBoxId: checkBoxId
+  }, children);
+};
 
 // This is to ensure that the "type" is exported, as it gets lost and not exported along with TaskItem after
 // going through the high order component.
 
-export default withAnalyticsEvents()(TaskItem);
+export default componentWithFG('platform_editor_task_item_ref_fix', withAnalyticsEvents()(TaskItemWithRefFix), withAnalyticsEvents()(TaskItemWithoutRefFix));

package/dist/es2019/components/TaskList.js

@@ -1,12 +1,47 @@
 /* TaskList.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./TaskList.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { messages } from './i18n';
+import { useIntl } from 'react-intl-next';
 const listStyles = null;
 const taskListStyles = null;
-export default class TaskList extends PureComponent {
+const TaskListNew = ({
+  listId,
+  children
+}) => {
+  const listSize = React.Children.count(children);
+  const {
+    formatMessage
+  } = useIntl();
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    role: "group",
+    "data-task-list-local-id": "",
+    "aria-label": formatMessage(messages.fieldsetLabel),
+    className: ax(["_2mzuglyw _19bvidpf"])
+  }, React.Children.map(children, (child, idx) => {
+    const {
+      localId
+    } = child.props;
+    return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+      data: {
+        listLocalId: listId,
+        listSize,
+        position: idx
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      key: idx,
+      "data-task-local-id": localId || '',
+      className: ax(["_19pk1b66"])
+    }, child));
+  }));
+};
+class TaskListOld extends PureComponent {
   render() {
     const {
       listId,
@@ -43,4 +78,11 @@ export default class TaskList extends PureComponent {
       }, child));
     }));
   }
-}
+}
+const TaskListNext = props => {
+  if (fg('editor_a11y_group_around_action_items')) {
+    return /*#__PURE__*/React.createElement(TaskListNew, props);
+  }
+  return /*#__PURE__*/React.createElement(TaskListOld, props);
+};
+export default TaskListNext;

package/dist/es2019/components/i18n.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  fieldsetLabel: {
+    id: 'fabric.editor.fieldsetLabel',
+    defaultMessage: 'Action Item List',
+    description: 'Label for a list of tasks/ action items'
+  }
+});

package/dist/esm/components/TaskItem.js

@@ -11,6 +11,8 @@ import CheckboxCheckedIcon from '@atlaskit/icon/core/checkbox-checked';
 import Item from './Item';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel } from '../analytics';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { useMergeRefs } from 'use-callback-ref';
 var CheckboxUncheckedIcon = function CheckboxUncheckedIcon(props) {
   return /*#__PURE__*/React.createElement(Icon, _extends({
     dangerouslySetGlyph: "<rect width=\"12.5\" height=\"12.5\" x=\"1.75\" y=\"1.75\" stroke=\"currentcolor\" stroke-width=\"1.5\" rx=\"1.25\"/>",
@@ -28,7 +30,7 @@ var taskCount = 0;
 var getCheckBoxId = function getCheckBoxId(localId) {
   return "".concat(localId, "-").concat(taskCount++);
 };
-var TaskItem = function TaskItem(props) {
+var TaskItemWithoutRefFix = function TaskItemWithoutRefFix(props) {
   var appearance = props.appearance,
     isDone = props.isDone,
     isFocused = props.isFocused,
@@ -41,8 +43,8 @@ var TaskItem = function TaskItem(props) {
     taskId = props.taskId,
     onChange = props.onChange,
     onClick = props.onClick,
-    createAnalyticsEvent = props.createAnalyticsEvent,
-    inputRefFromProps = props.inputRef;
+    createAnalyticsEvent = props.createAnalyticsEvent;
+  var inputRefFromProps = props.inputRef;
   var checkBoxId = useMemo(function () {
     return getCheckBoxId(taskId);
   }, [taskId]);
@@ -119,8 +121,99 @@ var TaskItem = function TaskItem(props) {
     checkBoxId: checkBoxId
   }, children);
 };
+var TaskItemWithRefFix = function TaskItemWithRefFix(props) {
+  var appearance = props.appearance,
+    isDone = props.isDone,
+    isFocused = props.isFocused,
+    contentRef = props.contentRef,
+    children = props.children,
+    placeholder = props.placeholder,
+    showPlaceholder = props.showPlaceholder,
+    disabled = props.disabled,
+    dataAttributes = props.dataAttributes,
+    taskId = props.taskId,
+    onChange = props.onChange,
+    onClick = props.onClick,
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    inputRefFromProps = props.inputRef;
+  var checkBoxId = useMemo(function () {
+    return getCheckBoxId(taskId);
+  }, [taskId]);
+  var handleOnChange = useMemo(function () {
+    return function (_evt) {
+      var newIsDone = !isDone;
+      if (onChange) {
+        onChange(taskId, newIsDone);
+      }
+      var action = newIsDone ? 'checked' : 'unchecked';
+      if (createAnalyticsEvent) {
+        createAndFireEventInElementsChannel({
+          action: action,
+          actionSubject: 'action',
+          eventType: 'ui',
+          attributes: {
+            localId: taskId
+          }
+        })(createAnalyticsEvent);
+      }
+    };
+  }, [onChange, taskId, isDone, createAnalyticsEvent]);
+  var handleOnKeyPress = useMemo(function () {
+    return function (event) {
+      if (event.key === 'Enter') {
+        handleOnChange(event);
+      }
+    };
+  }, [handleOnChange]);
+  var localInputRef = useRef(null);
+  var inputRef = useMergeRefs(inputRefFromProps === undefined ? [localInputRef] : [inputRefFromProps, localInputRef]);
+  var icon = /*#__PURE__*/React.createElement("span", {
+    contentEditable: false,
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16np1elr _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1j9a _1wn015vq _den512j9 _zh8l1b66 _g5w3stnw _whhepxbi _1stbpxbi _18tob3bt _1awt1ule _haf81ssb _ra781ssb _cr751ooe _1q8r7vkz _9l2s7vkz _1mh7kb7n _s3uktlke _1davidpf _8bo8stnw _psnc1ssb _4k421ssb _1rvv1ooe _13vl73ad _1t711tcg _1nuz1tcg _cs4qstnw _9j2j1ssb _1mwj1ssb _19l51ooe _12yy1d5g _1miy1elr _1umo18hz _tpz25w2r _k6dg18hz _1qduewfl _q8ft1fvw _1y9t5w2r _ut031fvw _gi9hr01l _1qp6muej _wxkgr01l _wo245w2r _c8dpmuej _d2dcsyzs _1eulsyzs _1bc7syzs _16fmsyzs _bhkusyzs _czfesyzs _1gxgsyzs _19w0syzs _1x1y1lg7"]),
+    style: {
+      "--_toyvsf": ix("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    id: checkBoxId,
+    "aria-labelledby": "".concat(checkBoxId, "-wrapper"),
+    name: checkBoxId,
+    type: "checkbox",
+    onChange: handleOnChange,
+    onClick: onClick,
+    checked: !!isDone,
+    disabled: !!disabled,
+    suppressHydrationWarning: true,
+    onKeyPress: handleOnKeyPress,
+    ref: inputRef
+  }), isDone ? /*#__PURE__*/React.createElement(CheckboxCheckedIcon, {
+    label: ""
+  }) : /*#__PURE__*/React.createElement(CheckboxUncheckedIcon, {
+    label: ""
+  }));
+  React.useEffect(function () {
+    if (isFocused && inputRef.current) {
+      var _inputRef$current4, _inputRef$current5;
+      (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 || _inputRef$current4.focus();
+      (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 || _inputRef$current5.blur();
+      setTimeout(function () {
+        var _inputRef$current6;
+        (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 || _inputRef$current6.focus();
+      }, 100);
+    }
+  }, [isFocused, inputRef]);
+  return /*#__PURE__*/React.createElement(Item, {
+    appearance: appearance,
+    contentRef: contentRef,
+    icon: icon,
+    placeholder: placeholder,
+    showPlaceholder: showPlaceholder,
+    itemType: "TASK",
+    dataAttributes: dataAttributes,
+    checkBoxId: checkBoxId
+  }, children);
+};
 
 // This is to ensure that the "type" is exported, as it gets lost and not exported along with TaskItem after
 // going through the high order component.
 
-export default withAnalyticsEvents()(TaskItem);
+export default componentWithFG('platform_editor_task_item_ref_fix', withAnalyticsEvents()(TaskItemWithRefFix), withAnalyticsEvents()(TaskItemWithoutRefFix));

package/dist/esm/components/TaskList.js

@@ -8,18 +8,50 @@ import "./TaskList.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { messages } from './i18n';
+import { useIntl } from 'react-intl-next';
 var listStyles = null;
 var taskListStyles = null;
-var TaskList = /*#__PURE__*/function (_PureComponent) {
-  function TaskList() {
-    _classCallCheck(this, TaskList);
-    return _callSuper(this, TaskList, arguments);
+var TaskListNew = function TaskListNew(_ref) {
+  var listId = _ref.listId,
+    children = _ref.children;
+  var listSize = React.Children.count(children);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  if (!children) {
+    return null;
   }
-  _inherits(TaskList, _PureComponent);
-  return _createClass(TaskList, [{
+  return /*#__PURE__*/React.createElement("div", {
+    role: "group",
+    "data-task-list-local-id": "",
+    "aria-label": formatMessage(messages.fieldsetLabel),
+    className: ax(["_2mzuglyw _19bvidpf"])
+  }, React.Children.map(children, function (child, idx) {
+    var _ref2 = child.props,
+      localId = _ref2.localId;
+    return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+      data: {
+        listLocalId: listId,
+        listSize: listSize,
+        position: idx
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      key: idx,
+      "data-task-local-id": localId || '',
+      className: ax(["_19pk1b66"])
+    }, child));
+  }));
+};
+var TaskListOld = /*#__PURE__*/function (_PureComponent) {
+  function TaskListOld() {
+    _classCallCheck(this, TaskListOld);
+    return _callSuper(this, TaskListOld, arguments);
+  }
+  _inherits(TaskListOld, _PureComponent);
+  return _createClass(TaskListOld, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -40,8 +72,8 @@ var TaskList = /*#__PURE__*/function (_PureComponent) {
         "data-task-list-local-id": "",
         className: ax(["_2mzuglyw _19bvidpf"])
       }, React.Children.map(children, function (child, idx) {
-        var _ref = child.props,
-          localId = _ref.localId;
+        var _ref3 = child.props,
+          localId = _ref3.localId;
         return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
           data: {
             listLocalId: listId,
@@ -57,4 +89,10 @@ var TaskList = /*#__PURE__*/function (_PureComponent) {
     }
   }]);
 }(PureComponent);
-export { TaskList as default };
+var TaskListNext = function TaskListNext(props) {
+  if (fg('editor_a11y_group_around_action_items')) {
+    return /*#__PURE__*/React.createElement(TaskListNew, props);
+  }
+  return /*#__PURE__*/React.createElement(TaskListOld, props);
+};
+export default TaskListNext;

package/dist/esm/components/i18n.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  fieldsetLabel: {
+    id: 'fabric.editor.fieldsetLabel',
+    defaultMessage: 'Action Item List',
+    description: 'Label for a list of tasks/ action items'
+  }
+});

package/dist/types/components/ResourcedTaskItem.d.ts

@@ -1,4 +1,4 @@
-import React, { type RefObject } from 'react';
+import React, { type Ref } from 'react';
 import { PureComponent } from 'react';
 import { type Appearance, type ContentRef, type TaskDecisionProvider } from '../types';
 export interface Props {
@@ -19,7 +19,7 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
     disableOnChange?: boolean;
 }
 export interface State {

package/dist/types/components/TaskItem.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { type RefObject } from 'react';
+import React, { Ref } from 'react';
 import { type Appearance, type ContentRef } from '../types';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
@@ -21,7 +21,7 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+declare const _default: React.FC<Omit<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/TaskList.d.ts

@@ -1,8 +1,11 @@
-import { PureComponent, type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { ReactNode } from 'react';
 export interface Props {
     listId?: string;
     children?: ReactNode;
 }
-export default class TaskList extends PureComponent<Props, {}> {
-    render(): JSX.Element | null;
-}
+declare const TaskListNext: (props: Props) => JSX.Element;
+export default TaskListNext;

package/dist/types/components/i18n.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    fieldsetLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/components/ResourcedTaskItem.d.ts

@@ -1,4 +1,4 @@
-import React, { type RefObject } from 'react';
+import React, { type Ref } from 'react';
 import { PureComponent } from 'react';
 import { type Appearance, type ContentRef, type TaskDecisionProvider } from '../types';
 export interface Props {
@@ -19,7 +19,7 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
     disableOnChange?: boolean;
 }
 export interface State {

package/dist/types-ts4.5/components/TaskItem.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { type RefObject } from 'react';
+import React, { Ref } from 'react';
 import { type Appearance, type ContentRef } from '../types';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props {
@@ -21,7 +21,7 @@ export interface Props {
     dataAttributes?: {
         [key: string]: string | number;
     };
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+declare const _default: React.FC<Omit<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/TaskList.d.ts

@@ -1,8 +1,11 @@
-import { PureComponent, type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { ReactNode } from 'react';
 export interface Props {
     listId?: string;
     children?: ReactNode;
 }
-export default class TaskList extends PureComponent<Props, {}> {
-    render(): JSX.Element | null;
-}
+declare const TaskListNext: (props: Props) => JSX.Element;
+export default TaskListNext;

package/dist/types-ts4.5/components/i18n.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    fieldsetLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "19.1.3",
+	"version": "19.2.0",
 	"description": "Tasks and decisions react components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,11 +43,15 @@
 	"dependencies": {
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.0.0",
-		"@atlaskit/icon": "^25.3.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/platform-feature-flags-react": "^0.1.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
+		"react-intl-next": "npm:react-intl@^5.18.1",
+		"use-callback-ref": "^1.2.3",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
@@ -56,10 +60,10 @@
 		"url-search-params": "^0.10.0"
 	},
 	"devDependencies": {
-		"@af/visual-regression": "^1.3.0",
+		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-listeners": "^9.0.0",
-		"@atlaskit/elements-test-helpers": "^0.9.0",
-		"@atlaskit/ssr": "^0.4.0",
+		"@atlaskit/elements-test-helpers": "workspace:^",
+		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/util-data-test": "^18.0.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
@@ -84,5 +88,10 @@
 				"compiled"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"editor_a11y_group_around_action_items": {
+			"type": "boolean"
+		}
 	}
 }