@atlaskit/link-datasource 3.13.17 → 3.13.18

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 3.13.18
+
+### Patch Changes
+
+- [#172124](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/172124)
+  [`e1ccef8760b47`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e1ccef8760b47) -
+  Add labels to inline editable fields to improve accessibility
+- [#168855](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168855)
+  [`eb71b8f29a212`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eb71b8f29a212) -
+  Refactor behind ff - Fixes loading state not showing on user typeahead search
+- Updated dependencies
+
 ## 3.13.17
 
 ### Patch Changes

package/dist/cjs/hooks/useLoadOptions.js

@@ -8,10 +8,13 @@ exports.useLoadOptions = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _linkingTypes = require("@atlaskit/linking-types");
 var _useDatasourceTableFlag = require("./useDatasourceTableFlag");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var loadOptions = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var fetchInputs,
@@ -53,30 +56,38 @@ var loadOptions = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
+var reducer = function reducer(state, payload) {
+  return _objectSpread(_objectSpread({}, state), payload);
+};
 var useLoadOptions = exports.useLoadOptions = function useLoadOptions(_ref2) {
   var fetchInputs = _ref2.fetchInputs,
     executeFetch = _ref2.executeFetch,
     emptyOption = _ref2.emptyOption;
-  var _useState = (0, _react.useState)({
+  var _useReducer = (0, _react.useReducer)(reducer, {
       isLoading: true,
       options: [],
       hasFailed: false
     }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    _useState2$ = _useState2[0],
-    options = _useState2$.options,
-    isLoading = _useState2$.isLoading,
-    hasFailed = _useState2$.hasFailed,
-    setOptions = _useState2[1];
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    _useReducer2$ = _useReducer2[0],
+    options = _useReducer2$.options,
+    isLoading = _useReducer2$.isLoading,
+    hasFailed = _useReducer2$.hasFailed,
+    dispatch = _useReducer2[1];
   var _useDatasourceTableFl = (0, _useDatasourceTableFlag.useDatasourceTableFlag)({
       isFetchAction: true
     }),
     showErrorFlag = _useDatasourceTableFl.showErrorFlag;
   (0, _react.useEffect)(function () {
     var isMounted = true;
+    // Set the loading state before sending the request
+    dispatch({
+      isLoading: true
+    });
+    // Query the options
     loadOptions(fetchInputs, executeFetch).then(function (options) {
       if (isMounted) {
-        setOptions({
+        dispatch({
           isLoading: false,
           options: emptyOption ? [emptyOption].concat((0, _toConsumableArray2.default)(options)) : options,
           hasFailed: false
@@ -84,7 +95,7 @@ var useLoadOptions = exports.useLoadOptions = function useLoadOptions(_ref2) {
       }
     }).catch(function (err) {
       showErrorFlag();
-      setOptions({
+      dispatch({
         isLoading: false,
         options: [],
         hasFailed: true

package/dist/cjs/ui/issue-like-table/edit-type/icon/index.js

@@ -16,6 +16,7 @@ var _datasourceExperienceId = require("../../../../contexts/datasource-experienc
 var _useLoadOptions2 = require("../../../../hooks/useLoadOptions");
 var _icon = require("../../shared-components/icon");
 var _inlineEdit = require("../../table-cell-content/inline-edit");
+var _utils = require("../../utils");
 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; }
 /**
@@ -24,6 +25,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var IconEditType = function IconEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
+    labelId = props.labelId,
     executeFetch = props.executeFetch;
   var _useLoadOptions = (0, _useLoadOptions2.useLoadOptions)({
       executeFetch: executeFetch
@@ -48,7 +50,7 @@ var IconEditType = function IconEditType(props) {
   }, [experienceId, isLoading, hasFailed]);
   return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
     isDisabled: false
-  }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, (0, _utils.getCleanedSelectProps)(props), {
     autoFocus: true,
     blurInputOnSelect: true,
     defaultMenuIsOpen: true,
@@ -58,6 +60,7 @@ var IconEditType = function IconEditType(props) {
     filterOption: filterOption,
     testId: "inline-edit-priority",
     value: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    labelId: labelId,
     getOptionValue: function getOptionValue(option) {
       return option.text || '';
     },

package/dist/cjs/ui/issue-like-table/edit-type/index.js

@@ -22,6 +22,7 @@ var editType = exports.editType = function editType(_ref) {
   var _toValueType, _value$atlassianUserI;
   var defaultValue = _ref.defaultValue,
     currentValue = _ref.currentValue,
+    labelId = _ref.labelId,
     setEditValues = _ref.setEditValues,
     executeFetch = _ref.executeFetch;
   switch (defaultValue.type) {
@@ -33,7 +34,8 @@ var editType = exports.editType = function editType(_ref) {
           return /*#__PURE__*/_react.default.createElement(_text.default, (0, _extends2.default)({}, fieldProps, {
             currentValue: currentValue,
             setEditValues: setEditValues,
-            id: ACTIVE_INLINE_EDIT_ID
+            id: ACTIVE_INLINE_EDIT_ID,
+            labelId: labelId
           }));
         }
       };
@@ -47,7 +49,8 @@ var editType = exports.editType = function editType(_ref) {
             currentValue: currentValue,
             setEditValues: setEditValues,
             id: ACTIVE_INLINE_EDIT_ID,
-            executeFetch: executeFetch
+            executeFetch: executeFetch,
+            labelId: labelId
           }));
         }
       };
@@ -60,7 +63,8 @@ var editType = exports.editType = function editType(_ref) {
             currentValue: currentValue,
             setEditValues: setEditValues,
             id: ACTIVE_INLINE_EDIT_ID,
-            executeFetch: executeFetch
+            executeFetch: executeFetch,
+            labelId: labelId
           }));
         }
       };
@@ -74,7 +78,8 @@ var editType = exports.editType = function editType(_ref) {
             currentValue: currentValue,
             setEditValues: setEditValues,
             id: ACTIVE_INLINE_EDIT_ID,
-            executeFetch: executeFetch
+            executeFetch: executeFetch,
+            labelId: labelId
           }));
         }
       };

package/dist/cjs/ui/issue-like-table/edit-type/status/index.js

@@ -16,11 +16,13 @@ var _ufoExperiences = require("../../../../analytics/ufoExperiences");
 var _datasourceExperienceId = require("../../../../contexts/datasource-experience-id");
 var _useLoadOptions2 = require("../../../../hooks/useLoadOptions");
 var _inlineEdit = require("../../table-cell-content/inline-edit");
+var _utils = require("../../utils");
 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; }
 var StatusEditType = function StatusEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
+    labelId = props.labelId,
     executeFetch = props.executeFetch;
   var _useLoadOptions = (0, _useLoadOptions2.useLoadOptions)({
       executeFetch: executeFetch
@@ -45,7 +47,7 @@ var StatusEditType = function StatusEditType(props) {
   }, [experienceId, isLoading, hasFailed]);
   return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
     isDisabled: false
-  }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, (0, _utils.getCleanedSelectProps)(props), {
     autoFocus: true,
     options: options,
     defaultMenuIsOpen: true,
@@ -58,6 +60,7 @@ var StatusEditType = function StatusEditType(props) {
       return option.text;
     },
     value: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    labelId: labelId,
     formatOptionLabel: function formatOptionLabel(option) {
       return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
         content: option.text
@@ -65,6 +68,9 @@ var StatusEditType = function StatusEditType(props) {
         testId: "inline-edit-status-option-".concat(option.text)
       }, option.style), option.text));
     },
+    getOptionLabel: function getOptionLabel(option) {
+      return option.text;
+    },
     onChange: function onChange(e) {
       return props.setEditValues({
         type: 'status',

package/dist/cjs/ui/issue-like-table/edit-type/text/index.js

@@ -17,7 +17,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var TextEditType = function TextEditType(props) {
   var _currentValue$values$, _currentValue$values;
   var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
-  var currentValue = props.currentValue;
+  var currentValue = props.currentValue,
+    labelId = props.labelId;
   (0, _react.useEffect)(function () {
     if (experienceId) {
       (0, _ufoExperiences.succeedUfoExperience)({
@@ -36,6 +37,7 @@ var TextEditType = function TextEditType(props) {
       padding: "var(--ds-space-100, 8px)".concat(" calc(", "var(--ds-space-100, 8px)", " - 1px)")
     },
     value: (_currentValue$values$ = currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0]) !== null && _currentValue$values$ !== void 0 ? _currentValue$values$ : '',
+    "aria-labelledby": labelId,
     onChange: function onChange(e) {
       return props.setEditValues({
         type: 'string',

package/dist/cjs/ui/issue-like-table/edit-type/user/index.js

@@ -22,11 +22,13 @@ var _constants = require("../../../common/modal/popup-select/constants");
 var _user = require("../../render-type/user");
 var _messages = require("../../render-type/user/messages");
 var _inlineEdit = require("../../table-cell-content/inline-edit");
+var _utils = require("../../utils");
 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; }
 var UserEditType = function UserEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
+    labelId = props.labelId,
     executeFetch = props.executeFetch;
   var _useState = (0, _react.useState)({
       query: ''
@@ -75,7 +77,7 @@ var UserEditType = function UserEditType(props) {
   }, [experienceId, isLoading, hasFailed]);
   return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
     isDisabled: false
-  }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, (0, _utils.getCleanedSelectProps)(props), {
     autoFocus: true,
     defaultMenuIsOpen: true,
     blurInputOnSelect: true,
@@ -86,9 +88,13 @@ var UserEditType = function UserEditType(props) {
     menuPlacement: "auto",
     onInputChange: handleUserInputDebounced,
     value: currentValue === null || currentValue === void 0 || (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    labelId: labelId,
     getOptionValue: function getOptionValue(option) {
       return option.atlassianUserId;
     },
+    getOptionLabel: function getOptionLabel(option) {
+      return option.displayName || '';
+    },
     formatOptionLabel: function formatOptionLabel(option) {
       var _option$displayName;
       return /*#__PURE__*/_react.default.createElement(_tooltip.default, {

package/dist/cjs/ui/issue-like-table/index.js

@@ -477,7 +477,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           key: id,
           cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
             var key = _ref12.key,
-              type = _ref12.type;
+              type = _ref12.type,
+              title = _ref12.title;
             return {
               key: key,
               columnKey: key,
@@ -486,11 +487,13 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
                 id: id,
                 columnKey: key,
                 columnType: type,
+                columnTitle: title,
                 wrappedColumnKeys: wrappedColumnKeys,
                 renderItem: renderItem
               }) : (0, _react2.jsx)(_tableCellContent.ReadOnlyCell, {
                 id: id,
                 columnKey: key,
+                columnTitle: title,
                 columnType: type,
                 wrappedColumnKeys: wrappedColumnKeys,
                 renderItem: renderItem
@@ -646,7 +649,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       position: "bottom-start",
       testId: 'datasource-header-content'
     }, (0, _react2.jsx)("span", {
-      css: headerStyles
+      css: headerStyles,
+      id: (0, _utils.getFieldLabelById)(key)
     }, content));
     var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
     if (isHeadingOutsideButton) {

package/dist/cjs/ui/issue-like-table/table-cell-content/index.js

@@ -82,6 +82,7 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
   var ari = _ref3.ari,
     values = _ref3.values,
     columnKey = _ref3.columnKey,
+    columnTitle = _ref3.columnTitle,
     renderItem = _ref3.renderItem,
     integrationKey = _ref3.integrationKey,
     wrappedColumnKeys = _ref3.wrappedColumnKeys;
@@ -121,6 +122,7 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     executeFetch: executeFetch,
     readView: readView,
     columnKey: columnKey,
+    columnTitle: columnTitle,
     datasourceTypeWithValues: values
   });
 };
@@ -140,6 +142,7 @@ var toDatasourceTypeWithValues = function toDatasourceTypeWithValues(_ref4) {
 var TableCellContent = exports.TableCellContent = function TableCellContent(_ref5) {
   var id = _ref5.id,
     columnKey = _ref5.columnKey,
+    columnTitle = _ref5.columnTitle,
     columnType = _ref5.columnType,
     renderItem = _ref5.renderItem,
     wrappedColumnKeys = _ref5.wrappedColumnKeys;
@@ -155,6 +158,7 @@ var TableCellContent = exports.TableCellContent = function TableCellContent(_ref
       return /*#__PURE__*/_react.default.createElement(InlineEditableCell, {
         ari: ari,
         columnKey: columnKey,
+        columnTitle: columnTitle,
         renderItem: renderItem,
         integrationKey: integrationKey,
         values: toDatasourceTypeWithValues({
@@ -174,6 +178,7 @@ var TableCellContent = exports.TableCellContent = function TableCellContent(_ref
   }, /*#__PURE__*/_react.default.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,
+    columnTitle: columnTitle,
     columnType: columnType,
     wrappedColumnKeys: wrappedColumnKeys,
     renderItem: renderItem

package/dist/cjs/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -11,6 +11,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
 var _inlineEdit = _interopRequireDefault(require("@atlaskit/inline-edit"));
 var _primitives = require("@atlaskit/primitives");
 var _hooks = require("@atlaskit/smart-card/hooks");
@@ -21,6 +22,8 @@ var _useDatasourceTableFlag = require("../../../hooks/useDatasourceTableFlag");
 var _state = require("../../../state");
 var _editType = require("../edit-type");
 var _avatar = require("../shared-components/avatar");
+var _utils = require("../utils");
+var _messages = require("./messages");
 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" != _typeof3(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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -43,6 +46,21 @@ var getBackendUpdateValue = function getBackendUpdateValue(typedNewValue) {
   }
   throw new Error("Datasource 2 way sync Backend update value not implemented for type ".concat(typedNewValue.type));
 };
+var getCurrentFieldLabel = function getCurrentFieldLabel(typedNewValue) {
+  var _typedNewValue$values4, _typedNewValue$values5, _typedNewValue$values6;
+  switch (typedNewValue.type) {
+    case 'string':
+      return typedNewValue.values[0] || '';
+    case 'status':
+      return ((_typedNewValue$values4 = typedNewValue.values[0]) === null || _typedNewValue$values4 === void 0 ? void 0 : _typedNewValue$values4.text) || '';
+    case 'user':
+      return ((_typedNewValue$values5 = typedNewValue.values[0]) === null || _typedNewValue$values5 === void 0 ? void 0 : _typedNewValue$values5.displayName) || '';
+    case 'icon':
+      return ((_typedNewValue$values6 = typedNewValue.values[0]) === null || _typedNewValue$values6 === void 0 ? void 0 : _typedNewValue$values6.text) || '';
+    default:
+      return '';
+  }
+};
 var mapUpdatedItem = function mapUpdatedItem(existingItem, columnKey, newValue) {
   switch (newValue.type) {
     case 'string':
@@ -83,6 +101,7 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
     executeFetch = _ref.executeFetch,
     readView = _ref.readView,
     columnKey = _ref.columnKey,
+    columnTitle = _ref.columnTitle,
     datasourceTypeWithValues = _ref.datasourceTypeWithValues;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -153,13 +172,22 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
       });
     }
   }, [columnKey, entityType, fireEvent, integrationKey]);
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var editButtonLabel = (0, _react.useMemo)(function () {
+    return formatMessage(_messages.tableCellMessages.editButtonLabel, {
+      fieldName: columnTitle,
+      fieldValue: getCurrentFieldLabel(editValues)
+    });
+  }, [columnTitle, formatMessage, editValues]);
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: editContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_inlineEdit.default, (0, _extends2.default)({}, (0, _editType.editType)({
     defaultValue: datasourceTypeWithValues,
     currentValue: editValues,
     setEditValues: setEditValues,
-    executeFetch: executeFetch
+    executeFetch: executeFetch,
+    labelId: (0, _utils.getFieldLabelById)(columnKey)
   }), {
     hideActionButtons: true,
     readView: editableRenderType({
@@ -172,7 +200,8 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
     onCancel: onCancelEdit,
     onConfirm: function onConfirm() {
       return onCommitUpdate(editValues);
-    }
+    },
+    editButtonLabel: editButtonLabel
   })));
 };
 

package/dist/cjs/ui/issue-like-table/table-cell-content/messages.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableCellMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var tableCellMessages = exports.tableCellMessages = (0, _reactIntlNext.defineMessages)({
+  editButtonLabel: {
+    id: 'linkDataSource.issue-line-table.edit-button-label.non-final',
+    description: 'Label of inline editable field, used mostly for screen readers. This label is used to describe the field that is editable and can be changed. e.g John Doe, Assignee field',
+    defaultMessage: '{fieldValue}, {fieldName} field'
+  }
+});

package/dist/cjs/ui/issue-like-table/utils.js

@@ -1,10 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getWidthCss = exports.getColumnMinWidth = exports.getColumnAction = exports.COLUMN_BASE_WIDTH = void 0;
+exports.getWidthCss = exports.getFieldLabelById = exports.getColumnMinWidth = exports.getColumnAction = exports.getCleanedSelectProps = exports.COLUMN_BASE_WIDTH = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _types = require("../../analytics/types");
+var _excluded = ["aria-labelledby"];
 var COLUMN_BASE_WIDTH = exports.COLUMN_BASE_WIDTH = 8;
 var COLUMN_MIN_WIDTH = COLUMN_BASE_WIDTH * 4;
 var keyBasedMinWidthMap = {
@@ -58,4 +61,21 @@ var getColumnAction = exports.getColumnAction = function getColumnAction(oldVisi
   } else {
     return _types.DatasourceAction.COLUMN_REORDERED;
   }
+};
+
+/**
+ * Remove deprecated `aria-labelledby` prop from select component props.
+ */
+var getCleanedSelectProps = exports.getCleanedSelectProps = function getCleanedSelectProps(props) {
+  // Component Field auto adds `aria-labelledby` prop, which is deprecated and should not be used - https://hello.jira.atlassian.cloud/browse/ENGHEALTH-14529
+  var removedLabelByProps = props['aria-labelledby'],
+    selectProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return selectProps;
+};
+
+/**
+ * Create id for table header to be used as aria-labelledby on form fields.
+ */
+var getFieldLabelById = exports.getFieldLabelById = function getFieldLabelById(fieldId) {
+  return "datasource-header-title-".concat(fieldId);
 };

package/dist/es2019/hooks/useLoadOptions.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useReducer } from 'react';
 import { ActionOperationStatus } from '@atlaskit/linking-types';
 import { useDatasourceTableFlag } from './useDatasourceTableFlag';
 const loadOptions = async (fetchInputs = {}, executeFetch) => {
@@ -15,6 +15,12 @@ const loadOptions = async (fetchInputs = {}, executeFetch) => {
   }
   return entities !== null && entities !== void 0 ? entities : [];
 };
+const reducer = (state, payload) => {
+  return {
+    ...state,
+    ...payload
+  };
+};
 export const useLoadOptions = ({
   fetchInputs,
   executeFetch,
@@ -24,7 +30,7 @@ export const useLoadOptions = ({
     options,
     isLoading,
     hasFailed
-  }, setOptions] = useState({
+  }, dispatch] = useReducer(reducer, {
     isLoading: true,
     options: [],
     hasFailed: false
@@ -36,9 +42,14 @@ export const useLoadOptions = ({
   });
   useEffect(() => {
     let isMounted = true;
+    // Set the loading state before sending the request
+    dispatch({
+      isLoading: true
+    });
+    // Query the options
     loadOptions(fetchInputs, executeFetch).then(options => {
       if (isMounted) {
-        setOptions({
+        dispatch({
           isLoading: false,
           options: emptyOption ? [emptyOption, ...options] : options,
           hasFailed: false
@@ -46,7 +57,7 @@ export const useLoadOptions = ({
       }
     }).catch(err => {
       showErrorFlag();
-      setOptions({
+      dispatch({
         isLoading: false,
         options: [],
         hasFailed: true

package/dist/es2019/ui/issue-like-table/edit-type/icon/index.js

@@ -8,6 +8,7 @@ import { useDatasourceExperienceId } from '../../../../contexts/datasource-exper
 import { useLoadOptions } from '../../../../hooks/useLoadOptions';
 import { SharedIconComponent } from '../../shared-components/icon';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { getCleanedSelectProps } from '../../utils';
 /**
  * Should be gated by FF rollout of platform-datasources-enable-two-way-sync-priority
  */
@@ -15,6 +16,7 @@ const IconEditType = props => {
   var _currentValue$values;
   const {
     currentValue,
+    labelId,
     executeFetch
   } = props;
   const {
@@ -41,7 +43,7 @@ const IconEditType = props => {
   }, [experienceId, isLoading, hasFailed]);
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     autoFocus: true,
     blurInputOnSelect: true,
     defaultMenuIsOpen: true,
@@ -51,6 +53,7 @@ const IconEditType = props => {
     filterOption: filterOption,
     testId: "inline-edit-priority",
     value: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    labelId: labelId,
     getOptionValue: option => option.text || '',
     formatOptionLabel: ({
       source,

package/dist/es2019/ui/issue-like-table/edit-type/index.js

@@ -11,6 +11,7 @@ const ACTIVE_INLINE_EDIT_ID = 'sllv-active-inline-edit';
 export const editType = ({
   defaultValue,
   currentValue,
+  labelId,
   setEditValues,
   executeFetch
 }) => {
@@ -24,7 +25,8 @@ export const editType = ({
         }) => /*#__PURE__*/React.createElement(TextEditType, _extends({}, fieldProps, {
           currentValue: currentValue,
           setEditValues: setEditValues,
-          id: ACTIVE_INLINE_EDIT_ID
+          id: ACTIVE_INLINE_EDIT_ID,
+          labelId: labelId
         }))
       };
     case 'icon':
@@ -37,7 +39,8 @@ export const editType = ({
           currentValue: currentValue,
           setEditValues: setEditValues,
           id: ACTIVE_INLINE_EDIT_ID,
-          executeFetch: executeFetch
+          executeFetch: executeFetch,
+          labelId: labelId
         }))
       };
     case 'status':
@@ -49,7 +52,8 @@ export const editType = ({
           currentValue: currentValue,
           setEditValues: setEditValues,
           id: ACTIVE_INLINE_EDIT_ID,
-          executeFetch: executeFetch
+          executeFetch: executeFetch,
+          labelId: labelId
         }))
       };
     case 'user':
@@ -62,7 +66,8 @@ export const editType = ({
           currentValue: currentValue,
           setEditValues: setEditValues,
           id: ACTIVE_INLINE_EDIT_ID,
-          executeFetch: executeFetch
+          executeFetch: executeFetch,
+          labelId: labelId
         }))
       };
   }

package/dist/es2019/ui/issue-like-table/edit-type/status/index.js

@@ -8,10 +8,12 @@ import { failUfoExperience, succeedUfoExperience } from '../../../../analytics/u
 import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id';
 import { useLoadOptions } from '../../../../hooks/useLoadOptions';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { getCleanedSelectProps } from '../../utils';
 const StatusEditType = props => {
   var _currentValue$values;
   const {
     currentValue,
+    labelId,
     executeFetch
   } = props;
   const {
@@ -38,7 +40,7 @@ const StatusEditType = props => {
   }, [experienceId, isLoading, hasFailed]);
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     autoFocus: true,
     options: options,
     defaultMenuIsOpen: true,
@@ -49,11 +51,13 @@ const StatusEditType = props => {
     testId: "inline-edit-status",
     getOptionValue: option => option.text,
     value: currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$values = currentValue.values) === null || _currentValue$values === void 0 ? void 0 : _currentValue$values[0],
+    labelId: labelId,
     formatOptionLabel: option => /*#__PURE__*/React.createElement(Tooltip, {
       content: option.text
     }, /*#__PURE__*/React.createElement(Lozenge, _extends({
       testId: `inline-edit-status-option-${option.text}`
     }, option.style), option.text)),
+    getOptionLabel: option => option.text,
     onChange: e => props.setEditValues({
       type: 'status',
       values: e ? [e] : []