@atlaskit/media-avatar-picker 26.0.7 → 26.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/media-avatar-picker
 
+## 26.1.0
+
+### Minor Changes
+
+- [#141250](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141250)
+  [`97fb574ab2188`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/97fb574ab2188) -
+  Keyboard only & screen reader navigation support for avatar image cropping functionality & added
+  a11y label for the zoom-in & zoom-out buttons
+
+### Patch Changes
+
+- Updated dependencies
+
+## 26.0.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 26.0.7
 
 ### Patch Changes

package/dist/cjs/avatar-picker-dialog/layout-const.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PREDEFINED_AVATARS_VIEW_WIDTH = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.CONTAINER_SIZE = exports.CONTAINER_RECT = exports.CONTAINER_PADDING = exports.CONTAINER_INNER_SIZE = exports.AVATAR_DIALOG_WIDTH = exports.AVATAR_DIALOG_HEIGHT = void 0;
+exports.PREDEFINED_AVATARS_VIEW_WIDTH = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = exports.IMAGE_MOVE_UNIT = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.CONTAINER_SIZE = exports.CONTAINER_RECT = exports.CONTAINER_PADDING = exports.CONTAINER_INNER_SIZE = exports.AVATAR_DIALOG_WIDTH = exports.AVATAR_DIALOG_HEIGHT = void 0;
 var _mediaUi = require("@atlaskit/media-ui");
 var DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
 var AVATAR_DIALOG_WIDTH = exports.AVATAR_DIALOG_WIDTH = 375;
@@ -13,4 +13,5 @@ var PREDEFINED_AVATARS_VIEW_HEIGHT = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = 29
 var CONTAINER_SIZE = exports.CONTAINER_SIZE = 8 * 32;
 var CONTAINER_INNER_SIZE = exports.CONTAINER_INNER_SIZE = 8 * 25;
 var CONTAINER_PADDING = exports.CONTAINER_PADDING = (CONTAINER_SIZE - CONTAINER_INNER_SIZE) / 2;
-var CONTAINER_RECT = exports.CONTAINER_RECT = new _mediaUi.Rectangle(CONTAINER_SIZE, CONTAINER_SIZE);
+var CONTAINER_RECT = exports.CONTAINER_RECT = new _mediaUi.Rectangle(CONTAINER_SIZE, CONTAINER_SIZE);
+var IMAGE_MOVE_UNIT = exports.IMAGE_MOVE_UNIT = 5;

package/dist/cjs/image-cropper/index.compiled.css

@@ -1,6 +1,7 @@
 
 ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._154i1b66{top:var(--ds-space-050,4px)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._154i1b66{top:var(--ds-space-050,4px)}
 ._18m915vq{overflow-y:hidden}
 ._1bsb1osq{width:100%}
 ._1reo15vq{overflow-x:hidden}
@@ -9,4 +10,7 @@
 ._80om15ng{cursor:move}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
-._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
+._ra3xnqa1:focus-visible{outline-style:solid}

package/dist/cjs/image-cropper/index.js

@@ -28,6 +28,8 @@ var _avatarPickerDialog = require("../avatar-picker-dialog");
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var CONTAINER_PADDING = 28;
@@ -38,7 +40,7 @@ var dragOverlayStyles = {
   root: "_kqswstnw _1bsb1osq _4t3i1osq _80om15ng"
 };
 var maskPositionStyle = {
-  root: "_kqswstnw"
+  root: "_kqswstnw _1ah3v77o _128m1bk5 _mizu1p6i _ra3xnqa1"
 };
 var maskStyles = {
   top: "".concat(CONTAINER_PADDING, "px"),
@@ -48,6 +50,15 @@ var maskStyles = {
   opacity: "var(--ds-opacity-disabled, 0.4)",
   boxShadow: "0 0 0 100px ".concat("var(--ds-surface-overlay, rgba(255, 255, 255))")
 };
+var offscreenStyles = {
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0
+};
 var rectMaskStyles = {
   root: "_2rkoiti9"
 };
@@ -68,6 +79,45 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, ImageCropper, [].concat(args));
+    (0, _defineProperty2.default)(_this, "state", {
+      liveMsg: ''
+    });
+    (0, _defineProperty2.default)(_this, "onKeyDown", function (e) {
+      var formatMessage = _this.props.intl.formatMessage;
+      var msg = '';
+      switch (e.key) {
+        case 'ArrowLeft':
+          msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
+            from: 'left',
+            to: 'right'
+          });
+          break;
+        case 'ArrowRight':
+          msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
+            from: 'right',
+            to: 'left'
+          });
+          break;
+        case 'ArrowUp':
+          msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
+            from: 'top',
+            to: 'bottom'
+          });
+          break;
+        case 'ArrowDown':
+          msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
+            from: 'bottom',
+            to: 'top'
+          });
+          break;
+        default:
+          return;
+      }
+      _this.props.moveImage && _this.props.moveImage(e.key);
+      _this.setState({
+        liveMsg: msg
+      });
+    });
     (0, _defineProperty2.default)(_this, "onDragStarted", function (e) {
       if (_this.props.onDragStarted) {
         _this.props.onDragStarted(e.screenX, e.screenY);
@@ -143,16 +193,38 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         onImageLoad: onImageLoaded,
         onImageError: this.onImageError
       })), isCircularMask ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-        xcss: (0, _css.cx)(circularMaskStyles.root, maskPositionStyle.root),
-        style: maskStyles
+        testId: "image-cropper-mask",
+        xcss: (0, _css.cx)(circularMaskStyles.root, maskPositionStyle.root)
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: maskStyles,
+        tabIndex: 0,
+        onKeyDown: this.onKeyDown,
+        "aria-label": formatMessage(_mediaUi.messages.image_cropper_arrow_keys_label)
       }) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-        xcss: (0, _css.cx)(rectMaskStyles.root, maskPositionStyle.root),
-        style: maskStyles
+        testId: "image-cropper-mask",
+        xcss: (0, _css.cx)(rectMaskStyles.root, maskPositionStyle.root)
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: maskStyles,
+        tabIndex: 0,
+        onKeyDown: this.onKeyDown,
+        "aria-label": formatMessage(_mediaUi.messages.image_cropper_arrow_keys_label)
       }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         id: "drag-overlay",
         xcss: dragOverlayStyles.root,
         onMouseDown: this.onDragStarted
-      }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        id: "image-cropper-image-movements-log",
+        "aria-live": "assertive",
+        role: "log",
+        "aria-atomic": "true"
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: _objectSpread(_objectSpread({}, offscreenStyles), {}, {
+          position: 'absolute'
+        })
+      }, this.state.liveMsg), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         id: "remove-image-container",
         xcss: removeImageContainerStyles.root
       }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {

package/dist/cjs/image-navigator/index.js

@@ -30,7 +30,7 @@ var _images = require("./images");
 var _util = require("../util");
 var _avatarPickerDialog = require("../avatar-picker-dialog");
 var _viewport2 = require("../viewport");
-var _slider = require("./slider");
+var _slider = _interopRequireDefault(require("./slider"));
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
 var _dragZone = require("./dragZone");
 var _exportCroppedImage = require("./exportCroppedImage");
@@ -78,6 +78,28 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
         dragStartPoint: new _mediaUi.Vector2(x, y)
       });
     });
+    (0, _defineProperty2.default)(_this, "moveImage", function (key) {
+      var viewport = _this.state.viewport;
+      switch (key) {
+        case 'ArrowLeft':
+          viewport.dragMove(viewport.itemBounds.x + _layoutConst.IMAGE_MOVE_UNIT, viewport.itemBounds.y);
+          break;
+        case 'ArrowRight':
+          viewport.dragMove(viewport.itemBounds.x - _layoutConst.IMAGE_MOVE_UNIT, viewport.itemBounds.y);
+          break;
+        case 'ArrowUp':
+          viewport.dragMove(viewport.itemBounds.x, viewport.itemBounds.y + _layoutConst.IMAGE_MOVE_UNIT);
+          break;
+        case 'ArrowDown':
+          viewport.dragMove(viewport.itemBounds.x, viewport.itemBounds.y - _layoutConst.IMAGE_MOVE_UNIT);
+          break;
+        default:
+          return;
+      }
+      _this.setState({
+        viewport: viewport
+      });
+    });
     (0, _defineProperty2.default)(_this, "onMouseMove", function (e) {
       if (_this.state.isDragging) {
         var _this$state = _this.state,
@@ -370,7 +392,8 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       var onImageError = this.props.onImageError;
       var onDragStarted = this.onDragStarted,
         onImageLoaded = this.onImageLoaded,
-        onRemoveImage = this.onRemoveImage;
+        onRemoveImage = this.onRemoveImage,
+        moveImage = this.moveImage;
       var itemBounds = viewport.itemBounds;
       return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
         style: {
@@ -389,10 +412,11 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
         onDragStarted: onDragStarted,
         onImageLoaded: onImageLoaded,
         onRemoveImage: onRemoveImage,
-        onImageError: onImageError
+        onImageError: onImageError,
+        moveImage: moveImage
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _runtime.ax)(["_4cvr1h6o _1bah1h6o _1e0c1txw _2lx2vrvc _19pku2gc _bfhk1bhr _v69yidpf _ogxmidpf _1qtqidpf _n9z4idpf _40631ntv"])
-      }, /*#__PURE__*/_react.default.createElement(_slider.Slider, {
+      }, /*#__PURE__*/_react.default.createElement(_slider.default, {
         value: scale,
         onChange: this.onScaleChange
       })), isDragging ? /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/image-navigator/slider.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultProps = exports.Slider = void 0;
+exports.defaultProps = exports.default = exports.Slider = void 0;
 require("./slider.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -18,9 +18,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _range = _interopRequireDefault(require("@atlaskit/range"));
+var _mediaUi = require("@atlaskit/media-ui");
 var _imageMediaServicesScaleLarge = _interopRequireDefault(require("@atlaskit/icon/core/migration/image--media-services-scale-large"));
 var _imageMediaServicesScaleSmall = _interopRequireDefault(require("@atlaskit/icon/core/migration/image--media-services-scale-small"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _reactIntlNext = require("react-intl-next");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -40,7 +42,8 @@ var Slider = exports.Slider = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         value = _this$props.value,
-        onChange = _this$props.onChange;
+        onChange = _this$props.onChange,
+        formatMessage = _this$props.intl.formatMessage;
       return /*#__PURE__*/React.createElement("div", {
         "data-testid": "slider",
         className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _1bsb1osq _yw87h2mm _1grc1i6y"])
@@ -53,7 +56,8 @@ var Slider = exports.Slider = /*#__PURE__*/function (_Component) {
         }),
         onClick: function onClick() {
           return onChange(0);
-        }
+        },
+        "aria-label": formatMessage(_mediaUi.messages.image_cropper_zoom_out)
       }), /*#__PURE__*/React.createElement(_range.default, {
         value: value,
         onChange: onChange
@@ -66,9 +70,11 @@ var Slider = exports.Slider = /*#__PURE__*/function (_Component) {
         }),
         onClick: function onClick() {
           return onChange(100);
-        }
+        },
+        "aria-label": formatMessage(_mediaUi.messages.image_cropper_zoom_in)
       }));
     }
   }]);
 }(_react.Component);
-(0, _defineProperty2.default)(Slider, "defaultProps", defaultProps);
+(0, _defineProperty2.default)(Slider, "defaultProps", defaultProps);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(Slider);

package/dist/cjs/index.js

@@ -25,7 +25,7 @@ Object.defineProperty(exports, "ImageNavigator", {
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function get() {
-    return _slider.Slider;
+    return _slider.default;
   }
 });
 Object.defineProperty(exports, "Viewport", {
@@ -49,7 +49,7 @@ Object.defineProperty(exports, "exportCroppedImage", {
 var _avatarPickerDialogLoader = _interopRequireDefault(require("./avatar-picker-dialog/avatar-picker-dialog-loader"));
 var _imageNavigator = _interopRequireDefault(require("./image-navigator"));
 var _imageCropper = _interopRequireDefault(require("./image-cropper"));
-var _slider = require("./image-navigator/slider");
+var _slider = _interopRequireDefault(require("./image-navigator/slider"));
 var _viewport = require("./viewport");
 var _images = require("./image-navigator/images");
 var _exportCroppedImage = require("./image-navigator/exportCroppedImage");

package/dist/es2019/avatar-picker-dialog/layout-const.js

@@ -7,4 +7,5 @@ export const PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
 export const CONTAINER_SIZE = 8 * 32;
 export const CONTAINER_INNER_SIZE = 8 * 25;
 export const CONTAINER_PADDING = (CONTAINER_SIZE - CONTAINER_INNER_SIZE) / 2;
-export const CONTAINER_RECT = new Rectangle(CONTAINER_SIZE, CONTAINER_SIZE);
+export const CONTAINER_RECT = new Rectangle(CONTAINER_SIZE, CONTAINER_SIZE);
+export const IMAGE_MOVE_UNIT = 5;

package/dist/es2019/image-cropper/index.compiled.css

@@ -1,6 +1,7 @@
 
 ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._154i1b66{top:var(--ds-space-050,4px)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._154i1b66{top:var(--ds-space-050,4px)}
 ._18m915vq{overflow-y:hidden}
 ._1bsb1osq{width:100%}
 ._1reo15vq{overflow-x:hidden}
@@ -9,4 +10,7 @@
 ._80om15ng{cursor:move}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
-._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
+._ra3xnqa1:focus-visible{outline-style:solid}

package/dist/es2019/image-cropper/index.js

@@ -22,7 +22,7 @@ const dragOverlayStyles = {
   root: "_kqswstnw _1bsb1osq _4t3i1osq _80om15ng"
 };
 const maskPositionStyle = {
-  root: "_kqswstnw"
+  root: "_kqswstnw _1ah3v77o _128m1bk5 _mizu1p6i _ra3xnqa1"
 };
 const maskStyles = {
   top: `${CONTAINER_PADDING}px`,
@@ -32,6 +32,15 @@ const maskStyles = {
   opacity: "var(--ds-opacity-disabled, 0.4)",
   boxShadow: `0 0 0 100px ${"var(--ds-surface-overlay, rgba(255, 255, 255))"}`
 };
+const offscreenStyles = {
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0
+};
 const rectMaskStyles = {
   root: "_2rkoiti9"
 };
@@ -47,6 +56,49 @@ const imageContainerStyles = {
 export class ImageCropper extends Component {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "state", {
+      liveMsg: ''
+    });
+    _defineProperty(this, "onKeyDown", e => {
+      const {
+        intl: {
+          formatMessage
+        }
+      } = this.props;
+      let msg = '';
+      switch (e.key) {
+        case 'ArrowLeft':
+          msg = formatMessage(messages.image_cropper_image_moved, {
+            from: 'left',
+            to: 'right'
+          });
+          break;
+        case 'ArrowRight':
+          msg = formatMessage(messages.image_cropper_image_moved, {
+            from: 'right',
+            to: 'left'
+          });
+          break;
+        case 'ArrowUp':
+          msg = formatMessage(messages.image_cropper_image_moved, {
+            from: 'top',
+            to: 'bottom'
+          });
+          break;
+        case 'ArrowDown':
+          msg = formatMessage(messages.image_cropper_image_moved, {
+            from: 'bottom',
+            to: 'top'
+          });
+          break;
+        default:
+          return;
+      }
+      this.props.moveImage && this.props.moveImage(e.key);
+      this.setState({
+        liveMsg: msg
+      });
+    });
     _defineProperty(this, "onDragStarted", e => {
       if (this.props.onDragStarted) {
         this.props.onDragStarted(e.screenX, e.screenY);
@@ -125,16 +177,39 @@ export class ImageCropper extends Component {
       onImageLoad: onImageLoaded,
       onImageError: this.onImageError
     })), isCircularMask ? /*#__PURE__*/React.createElement(Box, {
-      xcss: cx(circularMaskStyles.root, maskPositionStyle.root),
-      style: maskStyles
+      testId: "image-cropper-mask",
+      xcss: cx(circularMaskStyles.root, maskPositionStyle.root)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: maskStyles,
+      tabIndex: 0,
+      onKeyDown: this.onKeyDown,
+      "aria-label": formatMessage(messages.image_cropper_arrow_keys_label)
     }) : /*#__PURE__*/React.createElement(Box, {
-      xcss: cx(rectMaskStyles.root, maskPositionStyle.root),
-      style: maskStyles
+      testId: "image-cropper-mask",
+      xcss: cx(rectMaskStyles.root, maskPositionStyle.root)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: maskStyles,
+      tabIndex: 0,
+      onKeyDown: this.onKeyDown,
+      "aria-label": formatMessage(messages.image_cropper_arrow_keys_label)
     }), /*#__PURE__*/React.createElement(Box, {
       id: "drag-overlay",
       xcss: dragOverlayStyles.root,
       onMouseDown: this.onDragStarted
-    }), /*#__PURE__*/React.createElement(Box, {
+    }), /*#__PURE__*/React.createElement("div", {
+      id: "image-cropper-image-movements-log",
+      "aria-live": "assertive",
+      role: "log",
+      "aria-atomic": "true"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: {
+        ...offscreenStyles,
+        position: 'absolute'
+      }
+    }, this.state.liveMsg), /*#__PURE__*/React.createElement(Box, {
       id: "remove-image-container",
       xcss: removeImageContainerStyles.root
     }, /*#__PURE__*/React.createElement(IconButton, {

package/dist/es2019/image-navigator/index.js

@@ -15,8 +15,8 @@ import { uploadPlaceholder, errorIcon } from './images';
 import { fileSizeMb } from '../util';
 import { ERROR, MAX_SIZE_MB, ACCEPT } from '../avatar-picker-dialog';
 import { Viewport } from '../viewport';
-import { Slider } from './slider';
-import { CONTAINER_SIZE, CONTAINER_PADDING } from '../avatar-picker-dialog/layout-const';
+import Slider from './slider';
+import { CONTAINER_SIZE, CONTAINER_PADDING, IMAGE_MOVE_UNIT } from '../avatar-picker-dialog/layout-const';
 import { DragZone } from './dragZone';
 import { exportCroppedImage } from './exportCroppedImage';
 const checkeredBg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAABCJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjg8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjg8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpTZXEvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE4OjA3OjE4IDEwOjA3OjUwPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIDMuNy4zPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrsp//0AAAAKUlEQVQIHWP8//8/Aww8ffoUxmRggrPQGKRLsCCbKy0tDTeQdKNw6gAAbSMIvvnXfF4AAAAASUVORK5CYII=';
@@ -54,6 +54,30 @@ export class ImageNavigator extends Component {
         dragStartPoint: new Vector2(x, y)
       });
     });
+    _defineProperty(this, "moveImage", key => {
+      const {
+        viewport
+      } = this.state;
+      switch (key) {
+        case 'ArrowLeft':
+          viewport.dragMove(viewport.itemBounds.x + IMAGE_MOVE_UNIT, viewport.itemBounds.y);
+          break;
+        case 'ArrowRight':
+          viewport.dragMove(viewport.itemBounds.x - IMAGE_MOVE_UNIT, viewport.itemBounds.y);
+          break;
+        case 'ArrowUp':
+          viewport.dragMove(viewport.itemBounds.x, viewport.itemBounds.y + IMAGE_MOVE_UNIT);
+          break;
+        case 'ArrowDown':
+          viewport.dragMove(viewport.itemBounds.x, viewport.itemBounds.y - IMAGE_MOVE_UNIT);
+          break;
+        default:
+          return;
+      }
+      this.setState({
+        viewport
+      });
+    });
     _defineProperty(this, "onMouseMove", e => {
       if (this.state.isDragging) {
         const {
@@ -323,7 +347,8 @@ export class ImageNavigator extends Component {
     const {
       onDragStarted,
       onImageLoaded,
-      onRemoveImage
+      onRemoveImage,
+      moveImage
     } = this;
     const {
       itemBounds
@@ -345,7 +370,8 @@ export class ImageNavigator extends Component {
       onDragStarted: onDragStarted,
       onImageLoaded: onImageLoaded,
       onRemoveImage: onRemoveImage,
-      onImageError: onImageError
+      onImageError: onImageError,
+      moveImage: moveImage
     }), /*#__PURE__*/React.createElement("div", {
       className: ax(["_4cvr1h6o _1bah1h6o _1e0c1txw _2lx2vrvc _19pku2gc _bfhk1bhr _v69yidpf _ogxmidpf _1qtqidpf _n9z4idpf _40631ntv"])
     }, /*#__PURE__*/React.createElement(Slider, {

package/dist/es2019/image-navigator/slider.js

@@ -5,9 +5,11 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Component } from 'react';
 import FieldRange from '@atlaskit/range';
+import { messages } from '@atlaskit/media-ui';
 import ScaleLargeIcon from '@atlaskit/icon/core/migration/image--media-services-scale-large';
 import ScaleSmallIcon from '@atlaskit/icon/core/migration/image--media-services-scale-small';
 import Button from '@atlaskit/button/standard-button';
+import { injectIntl } from 'react-intl-next';
 export const defaultProps = {
   value: 0
 };
@@ -16,7 +18,10 @@ export class Slider extends Component {
   render() {
     const {
       value,
-      onChange
+      onChange,
+      intl: {
+        formatMessage
+      }
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "slider",
@@ -28,7 +33,8 @@ export class Slider extends Component {
       iconAfter: /*#__PURE__*/React.createElement(ScaleSmallIcon, {
         label: "scale-small-icon"
       }),
-      onClick: () => onChange(0)
+      onClick: () => onChange(0),
+      "aria-label": formatMessage(messages.image_cropper_zoom_out)
     }), /*#__PURE__*/React.createElement(FieldRange, {
       value: value,
       onChange: onChange
@@ -39,8 +45,10 @@ export class Slider extends Component {
       iconAfter: /*#__PURE__*/React.createElement(ScaleLargeIcon, {
         label: "scale-large-icon"
       }),
-      onClick: () => onChange(100)
+      onClick: () => onChange(100),
+      "aria-label": formatMessage(messages.image_cropper_zoom_in)
     }));
   }
 }
-_defineProperty(Slider, "defaultProps", defaultProps);
+_defineProperty(Slider, "defaultProps", defaultProps);
+export default injectIntl(Slider);

package/dist/es2019/index.js

@@ -1,7 +1,7 @@
 export { default as AvatarPickerDialog } from './avatar-picker-dialog/avatar-picker-dialog-loader';
 export { default as ImageNavigator } from './image-navigator';
 export { default as ImageCropper } from './image-cropper';
-export { Slider } from './image-navigator/slider';
+export { default as Slider } from './image-navigator/slider';
 export { Viewport } from './viewport';
 export { checkeredBg } from './image-navigator/images';
 export { exportCroppedImage } from './image-navigator/exportCroppedImage';

package/dist/esm/avatar-picker-dialog/layout-const.js

@@ -7,4 +7,5 @@ export var PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
 export var CONTAINER_SIZE = 8 * 32;
 export var CONTAINER_INNER_SIZE = 8 * 25;
 export var CONTAINER_PADDING = (CONTAINER_SIZE - CONTAINER_INNER_SIZE) / 2;
-export var CONTAINER_RECT = new Rectangle(CONTAINER_SIZE, CONTAINER_SIZE);
+export var CONTAINER_RECT = new Rectangle(CONTAINER_SIZE, CONTAINER_SIZE);
+export var IMAGE_MOVE_UNIT = 5;

package/dist/esm/image-cropper/index.compiled.css

@@ -1,6 +1,7 @@
 
 ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._154i1b66{top:var(--ds-space-050,4px)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._154i1b66{top:var(--ds-space-050,4px)}
 ._18m915vq{overflow-y:hidden}
 ._1bsb1osq{width:100%}
 ._1reo15vq{overflow-x:hidden}
@@ -9,4 +10,7 @@
 ._80om15ng{cursor:move}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
-._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
+._ra3xnqa1:focus-visible{outline-style:solid}

package/dist/esm/image-cropper/index.js

@@ -8,6 +8,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
@@ -29,7 +31,7 @@ var dragOverlayStyles = {
   root: "_kqswstnw _1bsb1osq _4t3i1osq _80om15ng"
 };
 var maskPositionStyle = {
-  root: "_kqswstnw"
+  root: "_kqswstnw _1ah3v77o _128m1bk5 _mizu1p6i _ra3xnqa1"
 };
 var maskStyles = {
   top: "".concat(CONTAINER_PADDING, "px"),
@@ -39,6 +41,15 @@ var maskStyles = {
   opacity: "var(--ds-opacity-disabled, 0.4)",
   boxShadow: "0 0 0 100px ".concat("var(--ds-surface-overlay, rgba(255, 255, 255))")
 };
+var offscreenStyles = {
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: 0
+};
 var rectMaskStyles = {
   root: "_2rkoiti9"
 };
@@ -59,6 +70,45 @@ export var ImageCropper = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, ImageCropper, [].concat(args));
+    _defineProperty(_this, "state", {
+      liveMsg: ''
+    });
+    _defineProperty(_this, "onKeyDown", function (e) {
+      var formatMessage = _this.props.intl.formatMessage;
+      var msg = '';
+      switch (e.key) {
+        case 'ArrowLeft':
+          msg = formatMessage(messages.image_cropper_image_moved, {
+            from: 'left',
+            to: 'right'
+          });
+          break;
+        case 'ArrowRight':
+          msg = formatMessage(messages.image_cropper_image_moved, {
+            from: 'right',
+            to: 'left'
+          });
+          break;
+        case 'ArrowUp':
+          msg = formatMessage(messages.image_cropper_image_moved, {
+            from: 'top',
+            to: 'bottom'
+          });
+          break;
+        case 'ArrowDown':
+          msg = formatMessage(messages.image_cropper_image_moved, {
+            from: 'bottom',
+            to: 'top'
+          });
+          break;
+        default:
+          return;
+      }
+      _this.props.moveImage && _this.props.moveImage(e.key);
+      _this.setState({
+        liveMsg: msg
+      });
+    });
     _defineProperty(_this, "onDragStarted", function (e) {
       if (_this.props.onDragStarted) {
         _this.props.onDragStarted(e.screenX, e.screenY);
@@ -134,16 +184,38 @@ export var ImageCropper = /*#__PURE__*/function (_Component) {
         onImageLoad: onImageLoaded,
         onImageError: this.onImageError
       })), isCircularMask ? /*#__PURE__*/React.createElement(Box, {
-        xcss: cx(circularMaskStyles.root, maskPositionStyle.root),
-        style: maskStyles
+        testId: "image-cropper-mask",
+        xcss: cx(circularMaskStyles.root, maskPositionStyle.root)
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: maskStyles,
+        tabIndex: 0,
+        onKeyDown: this.onKeyDown,
+        "aria-label": formatMessage(messages.image_cropper_arrow_keys_label)
       }) : /*#__PURE__*/React.createElement(Box, {
-        xcss: cx(rectMaskStyles.root, maskPositionStyle.root),
-        style: maskStyles
+        testId: "image-cropper-mask",
+        xcss: cx(rectMaskStyles.root, maskPositionStyle.root)
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: maskStyles,
+        tabIndex: 0,
+        onKeyDown: this.onKeyDown,
+        "aria-label": formatMessage(messages.image_cropper_arrow_keys_label)
       }), /*#__PURE__*/React.createElement(Box, {
         id: "drag-overlay",
         xcss: dragOverlayStyles.root,
         onMouseDown: this.onDragStarted
-      }), /*#__PURE__*/React.createElement(Box, {
+      }), /*#__PURE__*/React.createElement("div", {
+        id: "image-cropper-image-movements-log",
+        "aria-live": "assertive",
+        role: "log",
+        "aria-atomic": "true"
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: _objectSpread(_objectSpread({}, offscreenStyles), {}, {
+          position: 'absolute'
+        })
+      }, this.state.liveMsg), /*#__PURE__*/React.createElement(Box, {
         id: "remove-image-container",
         xcss: removeImageContainerStyles.root
       }, /*#__PURE__*/React.createElement(IconButton, {

package/dist/esm/image-navigator/index.js

@@ -25,8 +25,8 @@ import { uploadPlaceholder, errorIcon } from './images';
 import { fileSizeMb } from '../util';
 import { ERROR, MAX_SIZE_MB, ACCEPT } from '../avatar-picker-dialog';
 import { Viewport } from '../viewport';
-import { Slider } from './slider';
-import { CONTAINER_SIZE, CONTAINER_PADDING } from '../avatar-picker-dialog/layout-const';
+import Slider from './slider';
+import { CONTAINER_SIZE, CONTAINER_PADDING, IMAGE_MOVE_UNIT } from '../avatar-picker-dialog/layout-const';
 import { DragZone } from './dragZone';
 import { exportCroppedImage } from './exportCroppedImage';
 var checkeredBg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAABCJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjg8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjg8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpTZXEvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE4OjA3OjE4IDEwOjA3OjUwPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIDMuNy4zPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrsp//0AAAAKUlEQVQIHWP8//8/Aww8ffoUxmRggrPQGKRLsCCbKy0tDTeQdKNw6gAAbSMIvvnXfF4AAAAASUVORK5CYII=';
@@ -69,6 +69,28 @@ export var ImageNavigator = /*#__PURE__*/function (_Component) {
         dragStartPoint: new Vector2(x, y)
       });
     });
+    _defineProperty(_this, "moveImage", function (key) {
+      var viewport = _this.state.viewport;
+      switch (key) {
+        case 'ArrowLeft':
+          viewport.dragMove(viewport.itemBounds.x + IMAGE_MOVE_UNIT, viewport.itemBounds.y);
+          break;
+        case 'ArrowRight':
+          viewport.dragMove(viewport.itemBounds.x - IMAGE_MOVE_UNIT, viewport.itemBounds.y);
+          break;
+        case 'ArrowUp':
+          viewport.dragMove(viewport.itemBounds.x, viewport.itemBounds.y + IMAGE_MOVE_UNIT);
+          break;
+        case 'ArrowDown':
+          viewport.dragMove(viewport.itemBounds.x, viewport.itemBounds.y - IMAGE_MOVE_UNIT);
+          break;
+        default:
+          return;
+      }
+      _this.setState({
+        viewport: viewport
+      });
+    });
     _defineProperty(_this, "onMouseMove", function (e) {
       if (_this.state.isDragging) {
         var _this$state = _this.state,
@@ -361,7 +383,8 @@ export var ImageNavigator = /*#__PURE__*/function (_Component) {
       var onImageError = this.props.onImageError;
       var onDragStarted = this.onDragStarted,
         onImageLoaded = this.onImageLoaded,
-        onRemoveImage = this.onRemoveImage;
+        onRemoveImage = this.onRemoveImage,
+        moveImage = this.moveImage;
       var itemBounds = viewport.itemBounds;
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         style: {
@@ -380,7 +403,8 @@ export var ImageNavigator = /*#__PURE__*/function (_Component) {
         onDragStarted: onDragStarted,
         onImageLoaded: onImageLoaded,
         onRemoveImage: onRemoveImage,
-        onImageError: onImageError
+        onImageError: onImageError,
+        moveImage: moveImage
       }), /*#__PURE__*/React.createElement("div", {
         className: ax(["_4cvr1h6o _1bah1h6o _1e0c1txw _2lx2vrvc _19pku2gc _bfhk1bhr _v69yidpf _ogxmidpf _1qtqidpf _n9z4idpf _40631ntv"])
       }, /*#__PURE__*/React.createElement(Slider, {

package/dist/esm/image-navigator/slider.js

@@ -12,9 +12,11 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { Component } from 'react';
 import FieldRange from '@atlaskit/range';
+import { messages } from '@atlaskit/media-ui';
 import ScaleLargeIcon from '@atlaskit/icon/core/migration/image--media-services-scale-large';
 import ScaleSmallIcon from '@atlaskit/icon/core/migration/image--media-services-scale-small';
 import Button from '@atlaskit/button/standard-button';
+import { injectIntl } from 'react-intl-next';
 export var defaultProps = {
   value: 0
 };
@@ -30,7 +32,8 @@ export var Slider = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         value = _this$props.value,
-        onChange = _this$props.onChange;
+        onChange = _this$props.onChange,
+        formatMessage = _this$props.intl.formatMessage;
       return /*#__PURE__*/React.createElement("div", {
         "data-testid": "slider",
         className: ax(["_1e0c1txw _4cvr1h6o _1bsb1osq _yw87h2mm _1grc1i6y"])
@@ -43,7 +46,8 @@ export var Slider = /*#__PURE__*/function (_Component) {
         }),
         onClick: function onClick() {
           return onChange(0);
-        }
+        },
+        "aria-label": formatMessage(messages.image_cropper_zoom_out)
       }), /*#__PURE__*/React.createElement(FieldRange, {
         value: value,
         onChange: onChange
@@ -56,9 +60,11 @@ export var Slider = /*#__PURE__*/function (_Component) {
         }),
         onClick: function onClick() {
           return onChange(100);
-        }
+        },
+        "aria-label": formatMessage(messages.image_cropper_zoom_in)
       }));
     }
   }]);
 }(Component);
-_defineProperty(Slider, "defaultProps", defaultProps);
+_defineProperty(Slider, "defaultProps", defaultProps);
+export default injectIntl(Slider);

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 export { default as AvatarPickerDialog } from './avatar-picker-dialog/avatar-picker-dialog-loader';
 export { default as ImageNavigator } from './image-navigator';
 export { default as ImageCropper } from './image-cropper';
-export { Slider } from './image-navigator/slider';
+export { default as Slider } from './image-navigator/slider';
 export { Viewport } from './viewport';
 export { checkeredBg } from './image-navigator/images';
 export { exportCroppedImage } from './image-navigator/exportCroppedImage';

package/dist/types/avatar-picker-dialog/layout-const.d.ts

@@ -8,3 +8,4 @@ export declare const CONTAINER_SIZE: number;
 export declare const CONTAINER_INNER_SIZE: number;
 export declare const CONTAINER_PADDING: number;
 export declare const CONTAINER_RECT: Rectangle;
+export declare const IMAGE_MOVE_UNIT = 5;

package/dist/types/image-cropper/index.d.ts

@@ -14,6 +14,7 @@ export interface ImageCropperProp {
     onImageLoaded: (image: HTMLImageElement) => void;
     onRemoveImage: () => void;
     onImageError: (errorMessage: string) => void;
+    moveImage?: (key: string) => void;
 }
 export declare class ImageCropper extends Component<ImageCropperProp & WrappedComponentProps, {}> {
     static defaultProps: {
@@ -22,7 +23,11 @@ export declare class ImageCropper extends Component<ImageCropperProp & WrappedCo
         onDragStarted: () => void;
         onImageSize: () => void;
     };
+    state: {
+        liveMsg: string;
+    };
     componentDidMount(): void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     onDragStarted: (e: React.MouseEvent<{}>) => void;
     onImageError: () => void;
     render(): React.JSX.Element | null;

package/dist/types/image-navigator/index.d.ts

@@ -47,6 +47,7 @@ export declare class ImageNavigator extends Component<Props & WrappedComponentPr
     componentDidMount(): void;
     componentWillUnmount(): void;
     onDragStarted: (x: number, y: number) => void;
+    moveImage: (key: string) => void;
     onMouseMove: (e: MouseEvent) => void;
     onMouseUp: () => void;
     /**

package/dist/types/image-navigator/slider.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
 export interface SliderProps {
     value: number;
     onChange: (value: number) => void;
@@ -6,9 +7,13 @@ export interface SliderProps {
 export declare const defaultProps: {
     value: number;
 };
-export declare class Slider extends Component<SliderProps, {}> {
+export declare class Slider extends Component<SliderProps & WrappedComponentProps, {}> {
     static defaultProps: {
         value: number;
     };
     render(): JSX.Element;
 }
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<SliderProps & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<SliderProps & WrappedComponentProps>;
+};
+export default _default;

package/dist/types/index.d.ts

@@ -4,7 +4,7 @@ export { default as ImageNavigator } from './image-navigator';
 export type { Props as ImageNavigatorProps, OnLoadHandler, LoadParameters, } from './image-navigator';
 export type { Avatar } from './avatar-list';
 export { default as ImageCropper } from './image-cropper';
-export { Slider } from './image-navigator/slider';
+export { default as Slider } from './image-navigator/slider';
 export { Viewport } from './viewport';
 export { checkeredBg } from './image-navigator/images';
 export { exportCroppedImage } from './image-navigator/exportCroppedImage';

package/dist/types-ts4.5/avatar-picker-dialog/layout-const.d.ts

@@ -8,3 +8,4 @@ export declare const CONTAINER_SIZE: number;
 export declare const CONTAINER_INNER_SIZE: number;
 export declare const CONTAINER_PADDING: number;
 export declare const CONTAINER_RECT: Rectangle;
+export declare const IMAGE_MOVE_UNIT = 5;

package/dist/types-ts4.5/image-cropper/index.d.ts

@@ -14,6 +14,7 @@ export interface ImageCropperProp {
     onImageLoaded: (image: HTMLImageElement) => void;
     onRemoveImage: () => void;
     onImageError: (errorMessage: string) => void;
+    moveImage?: (key: string) => void;
 }
 export declare class ImageCropper extends Component<ImageCropperProp & WrappedComponentProps, {}> {
     static defaultProps: {
@@ -22,7 +23,11 @@ export declare class ImageCropper extends Component<ImageCropperProp & WrappedCo
         onDragStarted: () => void;
         onImageSize: () => void;
     };
+    state: {
+        liveMsg: string;
+    };
     componentDidMount(): void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     onDragStarted: (e: React.MouseEvent<{}>) => void;
     onImageError: () => void;
     render(): React.JSX.Element | null;

package/dist/types-ts4.5/image-navigator/index.d.ts

@@ -47,6 +47,7 @@ export declare class ImageNavigator extends Component<Props & WrappedComponentPr
     componentDidMount(): void;
     componentWillUnmount(): void;
     onDragStarted: (x: number, y: number) => void;
+    moveImage: (key: string) => void;
     onMouseMove: (e: MouseEvent) => void;
     onMouseUp: () => void;
     /**

package/dist/types-ts4.5/image-navigator/slider.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
 export interface SliderProps {
     value: number;
     onChange: (value: number) => void;
@@ -6,9 +7,13 @@ export interface SliderProps {
 export declare const defaultProps: {
     value: number;
 };
-export declare class Slider extends Component<SliderProps, {}> {
+export declare class Slider extends Component<SliderProps & WrappedComponentProps, {}> {
     static defaultProps: {
         value: number;
     };
     render(): JSX.Element;
 }
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<SliderProps & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<SliderProps & WrappedComponentProps>;
+};
+export default _default;

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

@@ -4,7 +4,7 @@ export { default as ImageNavigator } from './image-navigator';
 export type { Props as ImageNavigatorProps, OnLoadHandler, LoadParameters, } from './image-navigator';
 export type { Avatar } from './avatar-list';
 export { default as ImageCropper } from './image-cropper';
-export { Slider } from './image-navigator/slider';
+export { default as Slider } from './image-navigator/slider';
 export { Viewport } from './viewport';
 export { checkeredBg } from './image-navigator/images';
 export { exportCroppedImage } from './image-navigator/exportCroppedImage';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "26.0.7",
+	"version": "26.1.0",
 	"description": "A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,19 +35,19 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/button": "^22.0.0",
+		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/flag": "^17.1.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/icon": "^25.2.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/media-ui": "^28.1.0",
-		"@atlaskit/modal-dialog": "^14.0.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/modal-dialog": "^14.1.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/range": "^9.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",