@atlaskit/link-datasource 3.13.17 → 3.13.18

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

@@ -8,7 +8,8 @@ const TextEditType = props => {
   var _currentValue$values$, _currentValue$values;
   const experienceId = useDatasourceExperienceId();
   const {
-    currentValue
+    currentValue,
+    labelId
   } = props;
   useEffect(() => {
     if (experienceId) {
@@ -28,6 +29,7 @@ const TextEditType = props => {
       padding: `${"var(--ds-space-100, 8px)"} calc(${"var(--ds-space-100, 8px)"} - 1px)`
     },
     value: (_currentValue$values$ = currentValue === null || currentValue === void 0 ? 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: e => props.setEditValues({
       type: 'string',
       values: [e.currentTarget.value]

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

@@ -13,10 +13,12 @@ import { SEARCH_DEBOUNCE_MS } from '../../../common/modal/popup-select/constants
 import { USER_TYPE_TEST_ID } from '../../render-type/user';
 import { userTypeMessages } from '../../render-type/user/messages';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { getCleanedSelectProps } from '../../utils';
 const UserEditType = props => {
   var _currentValue$values;
   const {
     currentValue,
+    labelId,
     executeFetch
   } = props;
   const [fetchInputs, setFetchInputs] = useState({
@@ -59,7 +61,7 @@ const UserEditType = 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,
     defaultMenuIsOpen: true,
     blurInputOnSelect: true,
@@ -70,7 +72,9 @@ const UserEditType = props => {
     menuPlacement: "auto",
     onInputChange: handleUserInputDebounced,
     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.atlassianUserId,
+    getOptionLabel: option => option.displayName || '',
     formatOptionLabel: option => {
       var _option$displayName;
       return /*#__PURE__*/React.createElement(Tooltip, {

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

@@ -36,7 +36,7 @@ import { InlineEditableTableCell, Table, TableCell, TableHeading, withTablePlugi
 import { ReadOnlyCell, TableCellContent } from './table-cell-content';
 import { TruncateTextTag } from './truncate-text-tag';
 import { useIsOnScreen } from './useIsOnScreen';
-import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
+import { COLUMN_BASE_WIDTH, getFieldLabelById, getWidthCss } from './utils';
 const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableHeadStyles = css({
   background: "var(--ds-elevation-surface-current, #FFF)",
@@ -474,7 +474,8 @@ export const IssueLikeDataTableView = ({
       key: id,
       cells: visibleSortedColumns.map(({
         key,
-        type
+        type,
+        title
       }, cellIndex) => {
         return {
           key,
@@ -484,11 +485,13 @@ export const IssueLikeDataTableView = ({
             id: id,
             columnKey: key,
             columnType: type,
+            columnTitle: title,
             wrappedColumnKeys: wrappedColumnKeys,
             renderItem: renderItem
           }) : jsx(ReadOnlyCell, {
             id: id,
             columnKey: key,
+            columnTitle: title,
             columnType: type,
             wrappedColumnKeys: wrappedColumnKeys,
             renderItem: renderItem
@@ -618,7 +621,8 @@ export const IssueLikeDataTableView = ({
       position: "bottom-start",
       testId: 'datasource-header-content'
     }, jsx("span", {
-      css: headerStyles
+      css: headerStyles,
+      id: getFieldLabelById(key)
     }, content));
     const isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
     if (isHeadingOutsideButton) {

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

@@ -73,6 +73,7 @@ const InlineEditableCell = ({
   ari,
   values,
   columnKey,
+  columnTitle,
   renderItem,
   integrationKey,
   wrappedColumnKeys
@@ -114,6 +115,7 @@ const InlineEditableCell = ({
     executeFetch: executeFetch,
     readView: readView,
     columnKey: columnKey,
+    columnTitle: columnTitle,
     datasourceTypeWithValues: values
   });
 };
@@ -134,6 +136,7 @@ const toDatasourceTypeWithValues = ({
 export const TableCellContent = ({
   id,
   columnKey,
+  columnTitle,
   columnType,
   renderItem,
   wrappedColumnKeys
@@ -152,6 +155,7 @@ export const TableCellContent = ({
       return /*#__PURE__*/React.createElement(InlineEditableCell, {
         ari: ari,
         columnKey: columnKey,
+        columnTitle: columnTitle,
         renderItem: renderItem,
         integrationKey: integrationKey,
         values: toDatasourceTypeWithValues({
@@ -171,6 +175,7 @@ export const TableCellContent = ({
   }, /*#__PURE__*/React.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,
+    columnTitle: columnTitle,
     columnType: columnType,
     wrappedColumnKeys: wrappedColumnKeys,
     renderItem: renderItem

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import AKInlineEdit from '@atlaskit/inline-edit';
 import { Box, xcss } from '@atlaskit/primitives';
 import { useSmartLinkReload } from '@atlaskit/smart-card/hooks';
@@ -10,6 +11,8 @@ import { useDatasourceTableFlag } from '../../../hooks/useDatasourceTableFlag';
 import { useDatasourceActions, useDatasourceItem } from '../../../state';
 import { editType } from '../edit-type';
 import { EmptyAvatar } from '../shared-components/avatar';
+import { getFieldLabelById } from '../utils';
+import { tableCellMessages } from './messages';
 export const InlineEditUFOExperience = 'inline-edit-rendered';
 const editContainerStyles = xcss({
   marginBlockStart: 'space.negative.100'
@@ -28,6 +31,21 @@ const getBackendUpdateValue = typedNewValue => {
   }
   throw new Error(`Datasource 2 way sync Backend update value not implemented for type ${typedNewValue.type}`);
 };
+const 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 '';
+  }
+};
 const mapUpdatedItem = (existingItem, columnKey, newValue) => {
   switch (newValue.type) {
     case 'string':
@@ -74,6 +92,7 @@ export const InlineEdit = ({
   executeFetch,
   readView,
   columnKey,
+  columnTitle,
   datasourceTypeWithValues
 }) => {
   const [isEditing, setIsEditing] = useState(false);
@@ -143,13 +162,23 @@ export const InlineEdit = ({
       });
     }
   }, [columnKey, entityType, fireEvent, integrationKey]);
+  const {
+    formatMessage
+  } = useIntl();
+  const editButtonLabel = useMemo(() => {
+    return formatMessage(tableCellMessages.editButtonLabel, {
+      fieldName: columnTitle,
+      fieldValue: getCurrentFieldLabel(editValues)
+    });
+  }, [columnTitle, formatMessage, editValues]);
   return /*#__PURE__*/React.createElement(Box, {
     xcss: editContainerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType({
     defaultValue: datasourceTypeWithValues,
     currentValue: editValues,
     setEditValues,
-    executeFetch
+    executeFetch,
+    labelId: getFieldLabelById(columnKey)
   }), {
     hideActionButtons: true,
     readView: editableRenderType({
@@ -160,7 +189,8 @@ export const InlineEdit = ({
     isEditing: isEditing,
     onEdit: onEdit,
     onCancel: onCancelEdit,
-    onConfirm: () => onCommitUpdate(editValues)
+    onConfirm: () => onCommitUpdate(editValues),
+    editButtonLabel: editButtonLabel
   })));
 };
 

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const tableCellMessages = 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/es2019/ui/issue-like-table/utils.js

@@ -53,4 +53,21 @@ export const getColumnAction = (oldVisibleColumnKeys, newVisibleColumnKeys) => {
   } else {
     return DatasourceAction.COLUMN_REORDERED;
   }
-};
+};
+
+/**
+ * Remove deprecated `aria-labelledby` prop from select component props.
+ */
+export const 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
+  const {
+    'aria-labelledby': removedLabelByProps,
+    ...selectProps
+  } = props;
+  return selectProps;
+};
+
+/**
+ * Create id for table header to be used as aria-labelledby on form fields.
+ */
+export const getFieldLabelById = fieldId => `datasource-header-title-${fieldId}`;

package/dist/esm/hooks/useLoadOptions.js

@@ -1,8 +1,11 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+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) { _defineProperty(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; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useEffect, useState } from 'react';
+import { useEffect, useReducer } from 'react';
 import { ActionOperationStatus } from '@atlaskit/linking-types';
 import { useDatasourceTableFlag } from './useDatasourceTableFlag';
 var loadOptions = /*#__PURE__*/function () {
@@ -46,30 +49,38 @@ var loadOptions = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
+var reducer = function reducer(state, payload) {
+  return _objectSpread(_objectSpread({}, state), payload);
+};
 export var useLoadOptions = function useLoadOptions(_ref2) {
   var fetchInputs = _ref2.fetchInputs,
     executeFetch = _ref2.executeFetch,
     emptyOption = _ref2.emptyOption;
-  var _useState = useState({
+  var _useReducer = useReducer(reducer, {
       isLoading: true,
       options: [],
       hasFailed: false
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    _useState2$ = _useState2[0],
-    options = _useState2$.options,
-    isLoading = _useState2$.isLoading,
-    hasFailed = _useState2$.hasFailed,
-    setOptions = _useState2[1];
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    _useReducer2$ = _useReducer2[0],
+    options = _useReducer2$.options,
+    isLoading = _useReducer2$.isLoading,
+    hasFailed = _useReducer2$.hasFailed,
+    dispatch = _useReducer2[1];
   var _useDatasourceTableFl = useDatasourceTableFlag({
       isFetchAction: true
     }),
     showErrorFlag = _useDatasourceTableFl.showErrorFlag;
   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(_toConsumableArray(options)) : options,
           hasFailed: false
@@ -77,7 +88,7 @@ export var useLoadOptions = function useLoadOptions(_ref2) {
       }
     }).catch(function (err) {
       showErrorFlag();
-      setOptions({
+      dispatch({
         isLoading: false,
         options: [],
         hasFailed: true

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

@@ -8,12 +8,14 @@ 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
  */
 var IconEditType = function IconEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
+    labelId = props.labelId,
     executeFetch = props.executeFetch;
   var _useLoadOptions = useLoadOptions({
       executeFetch: executeFetch
@@ -38,7 +40,7 @@ var IconEditType = function 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,
@@ -48,6 +50,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/esm/ui/issue-like-table/edit-type/index.js

@@ -16,6 +16,7 @@ export var 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) {
@@ -27,7 +28,8 @@ export var editType = function editType(_ref) {
           return /*#__PURE__*/React.createElement(TextEditType, _extends({}, fieldProps, {
             currentValue: currentValue,
             setEditValues: setEditValues,
-            id: ACTIVE_INLINE_EDIT_ID
+            id: ACTIVE_INLINE_EDIT_ID,
+            labelId: labelId
           }));
         }
       };
@@ -41,7 +43,8 @@ export var editType = function editType(_ref) {
             currentValue: currentValue,
             setEditValues: setEditValues,
             id: ACTIVE_INLINE_EDIT_ID,
-            executeFetch: executeFetch
+            executeFetch: executeFetch,
+            labelId: labelId
           }));
         }
       };
@@ -54,7 +57,8 @@ export var editType = function editType(_ref) {
             currentValue: currentValue,
             setEditValues: setEditValues,
             id: ACTIVE_INLINE_EDIT_ID,
-            executeFetch: executeFetch
+            executeFetch: executeFetch,
+            labelId: labelId
           }));
         }
       };
@@ -68,7 +72,8 @@ export var editType = function editType(_ref) {
             currentValue: currentValue,
             setEditValues: setEditValues,
             id: ACTIVE_INLINE_EDIT_ID,
-            executeFetch: executeFetch
+            executeFetch: executeFetch,
+            labelId: labelId
           }));
         }
       };

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

@@ -8,9 +8,11 @@ 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';
 var StatusEditType = function StatusEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
+    labelId = props.labelId,
     executeFetch = props.executeFetch;
   var _useLoadOptions = useLoadOptions({
       executeFetch: executeFetch
@@ -35,7 +37,7 @@ var StatusEditType = function 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,
@@ -48,6 +50,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.createElement(Tooltip, {
         content: option.text
@@ -55,6 +58,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/esm/ui/issue-like-table/edit-type/text/index.js

@@ -7,7 +7,8 @@ import { useDatasourceExperienceId } from '../../../../contexts/datasource-exper
 var TextEditType = function TextEditType(props) {
   var _currentValue$values$, _currentValue$values;
   var experienceId = useDatasourceExperienceId();
-  var currentValue = props.currentValue;
+  var currentValue = props.currentValue,
+    labelId = props.labelId;
   useEffect(function () {
     if (experienceId) {
       succeedUfoExperience({
@@ -26,6 +27,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/esm/ui/issue-like-table/edit-type/user/index.js

@@ -14,9 +14,11 @@ import { SEARCH_DEBOUNCE_MS } from '../../../common/modal/popup-select/constants
 import { USER_TYPE_TEST_ID } from '../../render-type/user';
 import { userTypeMessages } from '../../render-type/user/messages';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { getCleanedSelectProps } from '../../utils';
 var UserEditType = function UserEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
+    labelId = props.labelId,
     executeFetch = props.executeFetch;
   var _useState = useState({
       query: ''
@@ -65,7 +67,7 @@ var UserEditType = function UserEditType(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,
     defaultMenuIsOpen: true,
     blurInputOnSelect: true,
@@ -76,9 +78,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.createElement(Tooltip, {

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

@@ -43,7 +43,7 @@ import { InlineEditableTableCell, Table, TableCell, TableHeading, withTablePlugi
 import { ReadOnlyCell, TableCellContent } from './table-cell-content';
 import { TruncateTextTag } from './truncate-text-tag';
 import { useIsOnScreen } from './useIsOnScreen';
-import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
+import { COLUMN_BASE_WIDTH, getFieldLabelById, getWidthCss } from './utils';
 var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableHeadStyles = css({
   background: "var(--ds-elevation-surface-current, #FFF)",
@@ -473,7 +473,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
           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,
@@ -482,11 +483,13 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
                 id: id,
                 columnKey: key,
                 columnType: type,
+                columnTitle: title,
                 wrappedColumnKeys: wrappedColumnKeys,
                 renderItem: renderItem
               }) : jsx(ReadOnlyCell, {
                 id: id,
                 columnKey: key,
+                columnTitle: title,
                 columnType: type,
                 wrappedColumnKeys: wrappedColumnKeys,
                 renderItem: renderItem
@@ -642,7 +645,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       position: "bottom-start",
       testId: 'datasource-header-content'
     }, jsx("span", {
-      css: headerStyles
+      css: headerStyles,
+      id: getFieldLabelById(key)
     }, content));
     var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
     if (isHeadingOutsideButton) {

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

@@ -75,6 +75,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;
@@ -114,6 +115,7 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     executeFetch: executeFetch,
     readView: readView,
     columnKey: columnKey,
+    columnTitle: columnTitle,
     datasourceTypeWithValues: values
   });
 };
@@ -133,6 +135,7 @@ var toDatasourceTypeWithValues = function toDatasourceTypeWithValues(_ref4) {
 export var TableCellContent = function TableCellContent(_ref5) {
   var id = _ref5.id,
     columnKey = _ref5.columnKey,
+    columnTitle = _ref5.columnTitle,
     columnType = _ref5.columnType,
     renderItem = _ref5.renderItem,
     wrappedColumnKeys = _ref5.wrappedColumnKeys;
@@ -148,6 +151,7 @@ export var TableCellContent = function TableCellContent(_ref5) {
       return /*#__PURE__*/React.createElement(InlineEditableCell, {
         ari: ari,
         columnKey: columnKey,
+        columnTitle: columnTitle,
         renderItem: renderItem,
         integrationKey: integrationKey,
         values: toDatasourceTypeWithValues({
@@ -167,6 +171,7 @@ export var TableCellContent = function TableCellContent(_ref5) {
   }, /*#__PURE__*/React.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,
+    columnTitle: columnTitle,
     columnType: columnType,
     wrappedColumnKeys: wrappedColumnKeys,
     renderItem: renderItem

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

@@ -4,7 +4,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import AKInlineEdit from '@atlaskit/inline-edit';
 import { Box, xcss } from '@atlaskit/primitives';
 import { useSmartLinkReload } from '@atlaskit/smart-card/hooks';
@@ -15,6 +16,8 @@ import { useDatasourceTableFlag } from '../../../hooks/useDatasourceTableFlag';
 import { useDatasourceActions, useDatasourceItem } from '../../../state';
 import { editType } from '../edit-type';
 import { EmptyAvatar } from '../shared-components/avatar';
+import { getFieldLabelById } from '../utils';
+import { tableCellMessages } from './messages';
 export var InlineEditUFOExperience = 'inline-edit-rendered';
 var editContainerStyles = xcss({
   marginBlockStart: 'space.negative.100'
@@ -33,6 +36,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':
@@ -73,6 +91,7 @@ export var InlineEdit = function InlineEdit(_ref) {
     executeFetch = _ref.executeFetch,
     readView = _ref.readView,
     columnKey = _ref.columnKey,
+    columnTitle = _ref.columnTitle,
     datasourceTypeWithValues = _ref.datasourceTypeWithValues;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -143,13 +162,22 @@ export var InlineEdit = function InlineEdit(_ref) {
       });
     }
   }, [columnKey, entityType, fireEvent, integrationKey]);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var editButtonLabel = useMemo(function () {
+    return formatMessage(tableCellMessages.editButtonLabel, {
+      fieldName: columnTitle,
+      fieldValue: getCurrentFieldLabel(editValues)
+    });
+  }, [columnTitle, formatMessage, editValues]);
   return /*#__PURE__*/React.createElement(Box, {
     xcss: editContainerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType({
     defaultValue: datasourceTypeWithValues,
     currentValue: editValues,
     setEditValues: setEditValues,
-    executeFetch: executeFetch
+    executeFetch: executeFetch,
+    labelId: getFieldLabelById(columnKey)
   }), {
     hideActionButtons: true,
     readView: editableRenderType({
@@ -162,7 +190,8 @@ export var InlineEdit = function InlineEdit(_ref) {
     onCancel: onCancelEdit,
     onConfirm: function onConfirm() {
       return onCommitUpdate(editValues);
-    }
+    },
+    editButtonLabel: editButtonLabel
   })));
 };
 

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var tableCellMessages = 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'
+  }
+});