@atlaskit/inline-edit 13.6.1 → 13.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/inline-edit
 
+## 13.7.0
+
+### Minor Changes
+
+- [#132894](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/132894)
+  [`83b955d2f3259`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/83b955d2f3259) -
+  [ux] update button label to improve accessibility
+
+## 13.6.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.6.1
 
 ### Patch Changes

package/dist/cjs/inline-edit.js

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _Field = _interopRequireDefault(require("@atlaskit/form/Field"));
 var _Form = _interopRequireDefault(require("@atlaskit/form/Form"));
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
@@ -32,9 +33,8 @@ var fieldStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "13.6.1"
+  packageVersion: "13.7.0"
 };
-var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {
   var _props$startWithEditV = props.startWithEditViewOpen,
     startWithEditViewOpen = _props$startWithEditV === void 0 ? false : _props$startWithEditV,
@@ -48,6 +48,8 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     readViewFitContainerWidth = _props$readViewFitCon === void 0 ? false : _props$readViewFitCon,
     _props$editButtonLabe = props.editButtonLabel,
     editButtonLabel = _props$editButtonLabe === void 0 ? 'Edit' : _props$editButtonLabe,
+    _props$editLabel = props.editLabel,
+    editLabel = _props$editLabel === void 0 ? 'edit' : _props$editLabel,
     _props$confirmButtonL = props.confirmButtonLabel,
     confirmButtonLabel = _props$confirmButtonL === void 0 ? 'Confirm' : _props$confirmButtonL,
     _props$cancelButtonLa = props.cancelButtonLabel,
@@ -61,9 +63,9 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     analyticsContext = props.analyticsContext,
     providedOnConfirm = props.onConfirm,
     _props$onCancel = props.onCancel,
-    providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
+    providedOnCancel = _props$onCancel === void 0 ? _noop.default : _props$onCancel,
     _props$onEdit = props.onEdit,
-    providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit,
+    providedOnEdit = _props$onEdit === void 0 ? _noop.default : _props$onEdit,
     testId = props.testId;
   var wasFocusReceivedSinceLastBlurRef = (0, _react.useRef)(false);
   var isControlled = typeof isEditing === 'undefined';
@@ -115,7 +117,8 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     }
   }, [doNotFocusOnEditButton]);
 
-  /** If keepEditViewOpenOnBlur prop is set to false, will call confirmIfUnfocused() which
+  /**
+   * If keepEditViewOpenOnBlur prop is set to false, will call confirmIfUnfocused() which
    *  confirms the value, if the focus is not transferred to the action buttons.
    *
    *  When you're in `editing` state, the focus will be on the input field. And if you use keyboard
@@ -137,7 +140,8 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     }
   }, [keepEditViewOpenOnBlur, tryAutoSubmitWhenBlur]);
 
-  /** Gets called when focus is transferred to the editView, or action buttons.
+  /**
+   * Gets called when focus is transferred to the editView, or action buttons.
    *
    * There are three paths here the function can be called:
    *
@@ -148,9 +152,15 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
   var onEditViewWrapperFocus = (0, _react.useCallback)(function () {
     wasFocusReceivedSinceLastBlurRef.current = true;
   }, []);
+  var concatenatedEditButtonLabel = function concatenatedEditButtonLabel() {
+    if (label) {
+      return "".concat(editButtonLabel, ", ").concat(label, ", ").concat(editLabel);
+    }
+    return "".concat(editButtonLabel, ", ").concat(editLabel);
+  };
   var renderReadView = function renderReadView() {
     return (0, _react2.jsx)(_readView.default, {
-      editButtonLabel: editButtonLabel,
+      editButtonLabel: concatenatedEditButtonLabel(),
       onEditRequested: onEditRequested,
       postReadViewClick: doNotFocusOnEditButton,
       editButtonRef: editButtonRef,
@@ -209,19 +219,27 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         cancelButtonLabel: cancelButtonLabel,
         confirmButtonLabel: confirmButtonLabel,
         onMouseDown: function onMouseDown() {
-          /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
+          /**
+           * Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used
+           */
           doNotFocusOnEditButton();
         },
         onCancelClick: function onCancelClick(e) {
           reset();
           _onCancelClick(e);
         }
-      }) : /** This is to allow Ctrl + Enter to submit without action buttons */
+      }) :
+      /**
+       * This is to allow Ctrl + Enter to submit without action buttons
+       */
       (0, _react2.jsx)(_pressable.default, {
         hidden: true,
         type: "submit"
       }, (0, _react2.jsx)(_visuallyHidden.default, null, "Submit")));
-    }) : /** Field is used here only for the label and spacing */
+    }) :
+    /**
+     * Field is used here only for the label and spacing
+     */
     (0, _react2.jsx)(_Field.default, {
       name: "inlineEdit",
       label: label,
@@ -232,6 +250,9 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
   });
 };
 var InlineEdit = function InlineEdit(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return (0, _react2.jsx)(InnerInlineEdit, props);
 };
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = InlineEdit;

package/dist/es2019/inline-edit.js

@@ -7,6 +7,7 @@ import React, { useCallback, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import __noop from '@atlaskit/ds-lib/noop';
 import Field from '@atlaskit/form/Field';
 import Form from '@atlaskit/form/Form';
 import Pressable from '@atlaskit/primitives/pressable';
@@ -21,9 +22,8 @@ const fieldStyles = css({
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "13.6.1"
+  packageVersion: "13.7.0"
 };
-const noop = () => {};
 const InnerInlineEdit = props => {
   const {
     startWithEditViewOpen = false,
@@ -32,6 +32,7 @@ const InnerInlineEdit = props => {
     isRequired = false,
     readViewFitContainerWidth = false,
     editButtonLabel = 'Edit',
+    editLabel = 'edit',
     confirmButtonLabel = 'Confirm',
     cancelButtonLabel = 'Cancel',
     defaultValue,
@@ -42,8 +43,8 @@ const InnerInlineEdit = props => {
     editView,
     analyticsContext,
     onConfirm: providedOnConfirm,
-    onCancel: providedOnCancel = noop,
-    onEdit: providedOnEdit = noop,
+    onCancel: providedOnCancel = __noop,
+    onEdit: providedOnEdit = __noop,
     testId
   } = props;
   const wasFocusReceivedSinceLastBlurRef = useRef(false);
@@ -95,7 +96,8 @@ const InnerInlineEdit = props => {
     }
   }, [doNotFocusOnEditButton]);
 
-  /** If keepEditViewOpenOnBlur prop is set to false, will call confirmIfUnfocused() which
+  /**
+   * If keepEditViewOpenOnBlur prop is set to false, will call confirmIfUnfocused() which
    *  confirms the value, if the focus is not transferred to the action buttons.
    *
    *  When you're in `editing` state, the focus will be on the input field. And if you use keyboard
@@ -115,7 +117,8 @@ const InnerInlineEdit = props => {
     }
   }, [keepEditViewOpenOnBlur, tryAutoSubmitWhenBlur]);
 
-  /** Gets called when focus is transferred to the editView, or action buttons.
+  /**
+   * Gets called when focus is transferred to the editView, or action buttons.
    *
    * There are three paths here the function can be called:
    *
@@ -126,9 +129,15 @@ const InnerInlineEdit = props => {
   const onEditViewWrapperFocus = useCallback(() => {
     wasFocusReceivedSinceLastBlurRef.current = true;
   }, []);
+  const concatenatedEditButtonLabel = () => {
+    if (label) {
+      return `${editButtonLabel}, ${label}, ${editLabel}`;
+    }
+    return `${editButtonLabel}, ${editLabel}`;
+  };
   const renderReadView = () => {
     return jsx(ReadView, {
-      editButtonLabel: editButtonLabel,
+      editButtonLabel: concatenatedEditButtonLabel(),
       onEditRequested: onEditRequested,
       postReadViewClick: doNotFocusOnEditButton,
       editButtonRef: editButtonRef,
@@ -187,18 +196,26 @@ const InnerInlineEdit = props => {
     cancelButtonLabel: cancelButtonLabel,
     confirmButtonLabel: confirmButtonLabel,
     onMouseDown: () => {
-      /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
+      /**
+       * Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used
+       */
       doNotFocusOnEditButton();
     },
     onCancelClick: e => {
       reset();
       onCancelClick(e);
     }
-  }) : /** This is to allow Ctrl + Enter to submit without action buttons */
+  }) :
+  /**
+   * This is to allow Ctrl + Enter to submit without action buttons
+   */
   jsx(Pressable, {
     hidden: true,
     type: "submit"
-  }, jsx(VisuallyHidden, null, "Submit")))) : /** Field is used here only for the label and spacing */
+  }, jsx(VisuallyHidden, null, "Submit")))) :
+  /**
+   * Field is used here only for the label and spacing
+   */
   jsx(Field, {
     name: "inlineEdit",
     label: label,
@@ -208,6 +225,9 @@ const InnerInlineEdit = props => {
   }, renderReadView)));
 };
 const InlineEdit = props => {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return jsx(InnerInlineEdit, props);
 };
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default InlineEdit;

package/dist/esm/inline-edit.js

@@ -11,6 +11,7 @@ import React, { useCallback, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import __noop from '@atlaskit/ds-lib/noop';
 import Field from '@atlaskit/form/Field';
 import Form from '@atlaskit/form/Form';
 import Pressable from '@atlaskit/primitives/pressable';
@@ -25,9 +26,8 @@ var fieldStyles = css({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "13.6.1"
+  packageVersion: "13.7.0"
 };
-var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {
   var _props$startWithEditV = props.startWithEditViewOpen,
     startWithEditViewOpen = _props$startWithEditV === void 0 ? false : _props$startWithEditV,
@@ -41,6 +41,8 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     readViewFitContainerWidth = _props$readViewFitCon === void 0 ? false : _props$readViewFitCon,
     _props$editButtonLabe = props.editButtonLabel,
     editButtonLabel = _props$editButtonLabe === void 0 ? 'Edit' : _props$editButtonLabe,
+    _props$editLabel = props.editLabel,
+    editLabel = _props$editLabel === void 0 ? 'edit' : _props$editLabel,
     _props$confirmButtonL = props.confirmButtonLabel,
     confirmButtonLabel = _props$confirmButtonL === void 0 ? 'Confirm' : _props$confirmButtonL,
     _props$cancelButtonLa = props.cancelButtonLabel,
@@ -54,9 +56,9 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     analyticsContext = props.analyticsContext,
     providedOnConfirm = props.onConfirm,
     _props$onCancel = props.onCancel,
-    providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
+    providedOnCancel = _props$onCancel === void 0 ? __noop : _props$onCancel,
     _props$onEdit = props.onEdit,
-    providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit,
+    providedOnEdit = _props$onEdit === void 0 ? __noop : _props$onEdit,
     testId = props.testId;
   var wasFocusReceivedSinceLastBlurRef = useRef(false);
   var isControlled = typeof isEditing === 'undefined';
@@ -108,7 +110,8 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     }
   }, [doNotFocusOnEditButton]);
 
-  /** If keepEditViewOpenOnBlur prop is set to false, will call confirmIfUnfocused() which
+  /**
+   * If keepEditViewOpenOnBlur prop is set to false, will call confirmIfUnfocused() which
    *  confirms the value, if the focus is not transferred to the action buttons.
    *
    *  When you're in `editing` state, the focus will be on the input field. And if you use keyboard
@@ -130,7 +133,8 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     }
   }, [keepEditViewOpenOnBlur, tryAutoSubmitWhenBlur]);
 
-  /** Gets called when focus is transferred to the editView, or action buttons.
+  /**
+   * Gets called when focus is transferred to the editView, or action buttons.
    *
    * There are three paths here the function can be called:
    *
@@ -141,9 +145,15 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
   var onEditViewWrapperFocus = useCallback(function () {
     wasFocusReceivedSinceLastBlurRef.current = true;
   }, []);
+  var concatenatedEditButtonLabel = function concatenatedEditButtonLabel() {
+    if (label) {
+      return "".concat(editButtonLabel, ", ").concat(label, ", ").concat(editLabel);
+    }
+    return "".concat(editButtonLabel, ", ").concat(editLabel);
+  };
   var renderReadView = function renderReadView() {
     return jsx(ReadView, {
-      editButtonLabel: editButtonLabel,
+      editButtonLabel: concatenatedEditButtonLabel(),
       onEditRequested: onEditRequested,
       postReadViewClick: doNotFocusOnEditButton,
       editButtonRef: editButtonRef,
@@ -202,19 +212,27 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         cancelButtonLabel: cancelButtonLabel,
         confirmButtonLabel: confirmButtonLabel,
         onMouseDown: function onMouseDown() {
-          /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
+          /**
+           * Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used
+           */
           doNotFocusOnEditButton();
         },
         onCancelClick: function onCancelClick(e) {
           reset();
           _onCancelClick(e);
         }
-      }) : /** This is to allow Ctrl + Enter to submit without action buttons */
+      }) :
+      /**
+       * This is to allow Ctrl + Enter to submit without action buttons
+       */
       jsx(Pressable, {
         hidden: true,
         type: "submit"
       }, jsx(VisuallyHidden, null, "Submit")));
-    }) : /** Field is used here only for the label and spacing */
+    }) :
+    /**
+     * Field is used here only for the label and spacing
+     */
     jsx(Field, {
       name: "inlineEdit",
       label: label,
@@ -225,6 +243,9 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
   });
 };
 var InlineEdit = function InlineEdit(props) {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return jsx(InnerInlineEdit, props);
 };
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default InlineEdit;

package/dist/types/types.d.ts

@@ -2,31 +2,59 @@ import { type default as React, type ReactNode } from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type FieldProps } from '@atlaskit/form';
 interface CommonProps {
-    /** Additional information to be included in the `context` of analytics events that come from button. */
+    /**
+     * Additional information to be included in the `context` of analytics events that come from button.
+     */
     analyticsContext?: Record<string, any>;
-    /** Accessibility label for the cancel action button. */
+    /**
+     * Accessibility label for the cancel action button.
+     */
     cancelButtonLabel?: string;
-    /** Accessibility label for the confirm action button, which saves the field value into `editValue`. */
+    /**
+     * Accessibility label for the confirm action button, which saves the field value into `editValue`.
+     */
     confirmButtonLabel?: string;
-    /** The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`. */
+    /**
+     * The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`.
+     */
     defaultValue: any;
-    /** Label above the input field that communicates what value should be entered. */
+    /**
+     * Label above the input field that communicates what value should be entered.
+     */
     label?: ReactNode;
-    /** Displays an inline dialog with a message when the field input is invalid. This is handled by `react-final-form`. */
+    /**
+     * Displays an inline dialog with a message when the field input is invalid. This is handled by `react-final-form`.
+     */
     validate?: (value: any, formState: {}, fieldState: {}) => string | void | Promise<string | void>;
     /**
      * Sets the view when the element blurs and loses focus (this can happen when a user clicks away).
-     * When set to true, inline edit stays in `editView` when blurred. */
+     * When set to true, inline edit stays in `editView` when blurred.
+     */
     keepEditViewOpenOnBlur?: boolean;
-    /** Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field. */
+    /**
+     * Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field.
+     */
     hideActionButtons?: boolean;
-    /** Determines whether the input value can be confirmed as empty. */
+    /**
+     * Determines whether the input value can be confirmed as empty.
+     */
     isRequired?: boolean;
-    /** Determines whether the `readView` has 100% width within its container, or whether it fits the content. */
+    /**
+     * Determines whether the `readView` has 100% width within its container, or whether it fits the content.
+     */
     readViewFitContainerWidth?: boolean;
-    /** Accessibility label for button, which is used to enter `editView` from keyboard. */
+    /**
+     * Accessibility label for button, which is used to enter `editView` from keyboard.
+     */
     editButtonLabel?: string;
-    /** Exits `editView` and switches back to `readView`. This is called when the cancel action button (x) is clicked. */
+    /**
+     * Append 'edit' to the end of the button label (`editButtonLabel`)which allows
+     * users of assistive technologies to understand the purpose of the button
+     */
+    editLabel?: string;
+    /**
+     * Exits `editView` and switches back to `readView`. This is called when the cancel action button (x) is clicked.
+     */
     onCancel?: () => void;
     /**
      * Determines whether it begins in `editView` or `readView`. When set to true, `isEditing` begins as true and the inline edit
@@ -42,30 +70,43 @@ export interface ExtendedFieldProps<FieldValue> extends FieldProps<FieldValue> {
     errorMessage?: string | undefined;
 }
 export interface InlineEditProps<FieldValue> extends CommonProps {
-    /** The component shown when user is editing (when the inline edit is not in `readView`). */
+    /**
+     * The component shown when user is editing (when the inline edit is not in `readView`).
+     */
     editView: (fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode;
-    /** Sets whether the component shows the `readView` or the `editView`. This is used to manage the state of the input in stateless inline edit. */
+    /**
+     * Sets whether the component shows the `readView` or the `editView`. This is used to manage the state of the input in stateless inline edit.
+     */
     isEditing?: boolean;
     /**
-  Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.
-   */
+     * Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.
+     */
     onConfirm: (value: any, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Handler called when readView is clicked. */
+    /**
+     * Handler called when readView is clicked.
+     */
     onEdit?: () => void;
-    /** The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.*/
+    /**
+     * The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.
+     */
     readView: () => React.ReactNode;
 }
 export interface InlineEditableTextfieldProps extends CommonProps {
-    /** Sets height of the text field to compact. The top and bottom padding is decreased. */
+    /**
+     * Sets height of the text field to compact. The top and bottom padding is decreased.
+     */
     isCompact?: boolean;
     /**
      * Calls the `editView` handler. It confirms the changes.
      * The field value is passed as an argument to this function.
      */
     onConfirm: (value: string, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Text shown in `readView` when the field value is an empty string. */
+    /**
+     * Text shown in `readView` when the field value is an empty string.
+     */
     placeholder: string;
-    /** A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
+    /**
+     * A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
      */
     testId?: string;
 }

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

@@ -2,31 +2,59 @@ import { type default as React, type ReactNode } from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type FieldProps } from '@atlaskit/form';
 interface CommonProps {
-    /** Additional information to be included in the `context` of analytics events that come from button. */
+    /**
+     * Additional information to be included in the `context` of analytics events that come from button.
+     */
     analyticsContext?: Record<string, any>;
-    /** Accessibility label for the cancel action button. */
+    /**
+     * Accessibility label for the cancel action button.
+     */
     cancelButtonLabel?: string;
-    /** Accessibility label for the confirm action button, which saves the field value into `editValue`. */
+    /**
+     * Accessibility label for the confirm action button, which saves the field value into `editValue`.
+     */
     confirmButtonLabel?: string;
-    /** The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`. */
+    /**
+     * The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`.
+     */
     defaultValue: any;
-    /** Label above the input field that communicates what value should be entered. */
+    /**
+     * Label above the input field that communicates what value should be entered.
+     */
     label?: ReactNode;
-    /** Displays an inline dialog with a message when the field input is invalid. This is handled by `react-final-form`. */
+    /**
+     * Displays an inline dialog with a message when the field input is invalid. This is handled by `react-final-form`.
+     */
     validate?: (value: any, formState: {}, fieldState: {}) => string | void | Promise<string | void>;
     /**
      * Sets the view when the element blurs and loses focus (this can happen when a user clicks away).
-     * When set to true, inline edit stays in `editView` when blurred. */
+     * When set to true, inline edit stays in `editView` when blurred.
+     */
     keepEditViewOpenOnBlur?: boolean;
-    /** Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field. */
+    /**
+     * Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field.
+     */
     hideActionButtons?: boolean;
-    /** Determines whether the input value can be confirmed as empty. */
+    /**
+     * Determines whether the input value can be confirmed as empty.
+     */
     isRequired?: boolean;
-    /** Determines whether the `readView` has 100% width within its container, or whether it fits the content. */
+    /**
+     * Determines whether the `readView` has 100% width within its container, or whether it fits the content.
+     */
     readViewFitContainerWidth?: boolean;
-    /** Accessibility label for button, which is used to enter `editView` from keyboard. */
+    /**
+     * Accessibility label for button, which is used to enter `editView` from keyboard.
+     */
     editButtonLabel?: string;
-    /** Exits `editView` and switches back to `readView`. This is called when the cancel action button (x) is clicked. */
+    /**
+     * Append 'edit' to the end of the button label (`editButtonLabel`)which allows
+     * users of assistive technologies to understand the purpose of the button
+     */
+    editLabel?: string;
+    /**
+     * Exits `editView` and switches back to `readView`. This is called when the cancel action button (x) is clicked.
+     */
     onCancel?: () => void;
     /**
      * Determines whether it begins in `editView` or `readView`. When set to true, `isEditing` begins as true and the inline edit
@@ -42,30 +70,43 @@ export interface ExtendedFieldProps<FieldValue> extends FieldProps<FieldValue> {
     errorMessage?: string | undefined;
 }
 export interface InlineEditProps<FieldValue> extends CommonProps {
-    /** The component shown when user is editing (when the inline edit is not in `readView`). */
+    /**
+     * The component shown when user is editing (when the inline edit is not in `readView`).
+     */
     editView: (fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode;
-    /** Sets whether the component shows the `readView` or the `editView`. This is used to manage the state of the input in stateless inline edit. */
+    /**
+     * Sets whether the component shows the `readView` or the `editView`. This is used to manage the state of the input in stateless inline edit.
+     */
     isEditing?: boolean;
     /**
-  Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.
-   */
+     * Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.
+     */
     onConfirm: (value: any, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Handler called when readView is clicked. */
+    /**
+     * Handler called when readView is clicked.
+     */
     onEdit?: () => void;
-    /** The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.*/
+    /**
+     * The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.
+     */
     readView: () => React.ReactNode;
 }
 export interface InlineEditableTextfieldProps extends CommonProps {
-    /** Sets height of the text field to compact. The top and bottom padding is decreased. */
+    /**
+     * Sets height of the text field to compact. The top and bottom padding is decreased.
+     */
     isCompact?: boolean;
     /**
      * Calls the `editView` handler. It confirms the changes.
      * The field value is passed as an argument to this function.
      */
     onConfirm: (value: string, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Text shown in `readView` when the field value is an empty string. */
+    /**
+     * Text shown in `readView` when the field value is an empty string.
+     */
     placeholder: string;
-    /** A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
+    /**
+     * A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
      */
     testId?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "13.6.1",
+	"version": "13.7.0",
 	"description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,15 +37,15 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/button": "^19.2.0",
+		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/icon": "^22.14.0",
 		"@atlaskit/inline-dialog": "^14.3.0",
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
@@ -56,11 +56,11 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
-		"@atlaskit/datetime-picker": "^13.10.0",
+		"@atlaskit/datetime-picker": "^13.11.0",
 		"@atlaskit/docs": "*",
-		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/section-message": "^6.6.0",
-		"@atlaskit/select": "^17.13.0",
+		"@atlaskit/select": "^17.15.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/tag": "^12.5.0",
 		"@atlaskit/tag-group": "^10.5.0",