@atlaskit/media-viewer 52.9.1 → 52.9.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/media-viewer
 
+## 52.9.3
+
+### Patch Changes
+
+- [`9896ce8e69e57`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9896ce8e69e57) -
+  Improve accessibility across media packages with semantic button elements and i18n support, all
+  changes are behind feature flag
+- Updated dependencies
+
+## 52.9.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 52.9.1
 
 ### Patch Changes

package/dist/cjs/styleWrappers.compiled.css

@@ -1,4 +1,5 @@
 
+._kkk2n7od{all:unset}
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
 ._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
@@ -27,6 +28,7 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
 ._1ghp1kxc video{max-height:100vh}
 ._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
 ._1jyy1poe._1jyy1poe h1{color:#c7d1db}

package/dist/cjs/styleWrappers.js

@@ -15,8 +15,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _reactScrolllock = require("react-scrolllock");
 var _useCallbackRef = require("use-callback-ref");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _reactIntlNext = require("react-intl-next");
+var _mediaUi = require("@atlaskit/media-ui");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; } /* eslint-disable @atlaskit/design-system/use-tokens-typography */ // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
@@ -67,6 +70,7 @@ var downloadButtonWrapperStyles = null;
 var customVideoPlayerWrapperStyles = null;
 var sidebarWrapperStyles = null;
 var spinnerWrapperStyles = null;
+var resetButtonStyle = null;
 var formattedMessageWrapperStyles = null;
 // We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
 var Blanket = exports.Blanket = function Blanket(_ref) {
@@ -239,12 +243,26 @@ var LeftHeader = exports.LeftHeader = function LeftHeader(_ref18) {
 var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref19, ref) {
   var children = _ref19.children,
     datatestId = _ref19['data-testid'],
-    onClick = _ref19.onClick,
+    _onClick = _ref19.onClick,
     style = _ref19.style,
     className = _ref19.className;
-  return /*#__PURE__*/React.createElement("div", {
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
     "data-testid": datatestId,
-    onClick: onClick,
+    onClick: function onClick(event) {
+      return _onClick && _onClick(event);
+    },
+    ref: ref,
+    "aria-label": intl.formatMessage(_mediaUi.messages.svg_image_preview_label_assistive_text)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: (0, _runtime.ax)(["_kkk2n7od _1e0c1ule", "_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    onClick: _onClick,
     ref: ref,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style
@@ -267,9 +285,9 @@ var Img = exports.Img = function Img(_ref20) {
     style = _ref20.style,
     onLoad = _ref20.onLoad,
     onError = _ref20.onError,
-    onMouseDown = _ref20.onMouseDown,
     alt = _ref20.alt,
-    className = _ref20.className;
+    className = _ref20.className,
+    onMouseDown = _ref20.onMouseDown;
   var cursor = (0, _react.useMemo)(function () {
     if (canDrag && isDragging) {
       return 'grabbing';
@@ -280,7 +298,9 @@ var Img = exports.Img = function Img(_ref20) {
     }
   }, [canDrag, isDragging]);
   return /*#__PURE__*/React.createElement("img", {
+    onMouseDown: onMouseDown
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: (0, _runtime.ax)(["_1e0c1o8l _s7n4nkob _kqswh2mm", shouldPixelate && "_1kemd8h4", className]),
     alt: alt,
     "data-testid": datatestId,
@@ -291,8 +311,7 @@ var Img = exports.Img = function Img(_ref20) {
       cursor: cursor
     }, style),
     onLoad: onLoad,
-    onError: onError,
-    onMouseDown: onMouseDown
+    onError: onError
   });
 };
 var MedatadataTextWrapper = exports.MedatadataTextWrapper = function MedatadataTextWrapper(_ref21) {

package/dist/cjs/viewers/archiveSidebar/styleWrappers.js

@@ -10,9 +10,11 @@ require("./styleWrappers.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _reactIntlNext = require("react-intl-next");
+var _mediaUi = require("@atlaskit/media-ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 var ARCHIVE_SIDE_BAR_WIDTH = exports.ARCHIVE_SIDE_BAR_WIDTH = 300;
 var archiveItemViewerWrapperStyles = null;
 var archiveSideBarStyles = null;
@@ -55,9 +57,17 @@ var ArchiveSidebarFolderWrapper = exports.ArchiveSidebarFolderWrapper = function
 };
 var ArchiveDownloadButtonWrapper = exports.ArchiveDownloadButtonWrapper = function ArchiveDownloadButtonWrapper(_ref4) {
   var children = _ref4.children,
-    onClick = _ref4.onClick;
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: onClick,
+    _onClick = _ref4.onClick;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+    "aria-label": intl.formatMessage(_mediaUi.messages.archive_download_label_assistive_text),
+    onClick: function onClick(event) {
+      return _onClick && _onClick(event);
+    },
+    "data-testid": "media-archiveDownloadButton",
+    className: (0, _runtime.ax)(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    onClick: _onClick,
     "data-testid": "media-archiveDownloadButton",
     className: (0, _runtime.ax)(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
   }, children);

package/dist/cjs/viewers/svg/ImageWrapper-compiled.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ImageWrapper = void 0;
 require("./ImageWrapper-compiled.compiled.css");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _mediaUi = require("@atlaskit/media-ui");
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var imageWrapperStyles = null;
 var dynamicImageWrapperStyles = null;
@@ -17,7 +19,14 @@ var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react.forwardRef)(fu
   var children = _ref.children,
     onClick = _ref.onClick,
     isHidden = _ref.isHidden;
-  return /*#__PURE__*/React.createElement("div", {
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/_react.default.createElement("button", {
+    "data-testid": "media-viewer-svg-wrapper",
+    onClick: onClick,
+    ref: ref,
+    "aria-label": intl.formatMessage(_mediaUi.messages.svg_image_preview_label_assistive_text),
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
+  }, children) : /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "media-viewer-svg-wrapper",
     onClick: onClick,
     ref: ref,

package/dist/cjs/viewers/svg/index.js

@@ -20,6 +20,7 @@ var _errors = require("../../errors");
 var _utils = require("./utils");
 var _ImageWrapper = require("./ImageWrapper");
 var _errors2 = require("./errors");
+var _reactIntlNext = require("react-intl-next");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SvgViewerBase = function SvgViewerBase(_ref) {
   var identifier = _ref.identifier,
@@ -48,6 +49,7 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
     wrapperScroll = _useState0[0],
     setWrapperScroll = _useState0[1];
+  var intl = (0, _reactIntlNext.useIntl)();
   var onResize = (0, _react.useCallback)(function () {
     if (!wrapperRef.current || !camera) {
       return;
@@ -164,6 +166,7 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
     isHidden: isHidden
   }, /*#__PURE__*/_react.default.createElement(_mediaSvg.default, {
     testId: 'media-viewer-svg',
+    alt: intl.formatMessage(_mediaUi.messages.svg_base_alt),
     identifier: identifier,
     dimensions: imgDimensions
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

package/dist/es2019/styleWrappers.compiled.css

@@ -1,4 +1,5 @@
 
+._kkk2n7od{all:unset}
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
 ._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
@@ -27,6 +28,7 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
 ._1ghp1kxc video{max-height:100vh}
 ._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
 ._1jyy1poe._1jyy1poe h1{color:#c7d1db}

package/dist/es2019/styleWrappers.js

@@ -8,9 +8,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useMemo } from 'react';
 import { TouchScrollable } from 'react-scrolllock';
 import { useMergeRefs } from 'use-callback-ref';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import Heading from '@atlaskit/heading';
+import { useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui';
 const blanketStyles = null;
 const headerWrapperStyles = null;
 const archiveHeaderWrapperStyles = null;
@@ -58,6 +61,7 @@ const downloadButtonWrapperStyles = null;
 const customVideoPlayerWrapperStyles = null;
 const sidebarWrapperStyles = null;
 const spinnerWrapperStyles = null;
+const resetButtonStyle = null;
 const formattedMessageWrapperStyles = null;
 // We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
 export const Blanket = ({
@@ -217,16 +221,30 @@ export const ImageWrapper = /*#__PURE__*/forwardRef(({
   onClick,
   style,
   className
-}, ref) => /*#__PURE__*/React.createElement("div", {
-  "data-testid": datatestId,
-  onClick: onClick,
-  ref: ref,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-  style: style
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  ,
-  className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
-}, children));
+}, ref) => {
+  const intl = useIntl();
+  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+    "data-testid": datatestId,
+    onClick: event => onClick && onClick(event),
+    ref: ref,
+    "aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_kkk2n7od _1e0c1ule", "_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    onClick: onClick,
+    ref: ref,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
+  }, children);
+});
 export const BaselineExtend = () => /*#__PURE__*/React.createElement("div", {
   className: ax(["_4t3i1osq _1e0c1o8l _s7n4nkob"])
 });
@@ -239,9 +257,9 @@ export const Img = ({
   style,
   onLoad,
   onError,
-  onMouseDown,
   alt,
-  className
+  className,
+  onMouseDown
 }) => {
   const cursor = useMemo(() => {
     if (canDrag && isDragging) {
@@ -253,7 +271,9 @@ export const Img = ({
     }
   }, [canDrag, isDragging]);
   return /*#__PURE__*/React.createElement("img", {
+    onMouseDown: onMouseDown
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ax(["_1e0c1o8l _s7n4nkob _kqswh2mm", shouldPixelate && "_1kemd8h4", className]),
     alt: alt,
     "data-testid": datatestId,
@@ -265,8 +285,7 @@ export const Img = ({
       ...style
     },
     onLoad: onLoad,
-    onError: onError,
-    onMouseDown: onMouseDown
+    onError: onError
   });
 };
 export const MedatadataTextWrapper = ({

package/dist/es2019/viewers/archiveSidebar/styleWrappers.js

@@ -5,6 +5,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+import { useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const ARCHIVE_SIDE_BAR_WIDTH = 300;
 const archiveItemViewerWrapperStyles = null;
 const archiveSideBarStyles = null;
@@ -49,7 +52,13 @@ export const ArchiveDownloadButtonWrapper = ({
   children,
   onClick
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  const intl = useIntl();
+  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+    "aria-label": intl.formatMessage(messages.archive_download_label_assistive_text),
+    onClick: event => onClick && onClick(event),
+    "data-testid": "media-archiveDownloadButton",
+    className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
+  }, children) : /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
     "data-testid": "media-archiveDownloadButton",
     className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])

package/dist/es2019/viewers/svg/ImageWrapper-compiled.js

@@ -1,17 +1,28 @@
 /* ImageWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ImageWrapper-compiled.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { messages } from '@atlaskit/media-ui';
+import React, { forwardRef } from 'react';
+import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 const imageWrapperStyles = null;
 const dynamicImageWrapperStyles = null;
 export const ImageWrapper = /*#__PURE__*/forwardRef(({
   children,
   onClick,
   isHidden
-}, ref) => /*#__PURE__*/React.createElement("div", {
-  "data-testid": "media-viewer-svg-wrapper",
-  onClick: onClick,
-  ref: ref,
-  className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
-}, children));
+}, ref) => {
+  const intl = useIntl();
+  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+    "data-testid": "media-viewer-svg-wrapper",
+    onClick: onClick,
+    ref: ref,
+    "aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text),
+    className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    "data-testid": "media-viewer-svg-wrapper",
+    onClick: onClick,
+    ref: ref,
+    className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
+  }, children);
+});

package/dist/es2019/viewers/svg/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
-import { Camera, Vector2 } from '@atlaskit/media-ui';
+import { Camera, messages, Vector2 } from '@atlaskit/media-ui';
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { BaselineExtend } from '../../styleWrappers';
@@ -11,6 +11,7 @@ import { MediaViewerError } from '../../errors';
 import { clientRectangle, naturalSizeRectangle, zoomLevelAfterResize } from './utils';
 import { ImageWrapper } from './ImageWrapper';
 import { getErrorReason } from './errors';
+import { useIntl } from 'react-intl-next';
 const SvgViewerBase = ({
   identifier,
   onLoad,
@@ -24,6 +25,7 @@ const SvgViewerBase = ({
   const [camera, setCamera] = useState();
   const wrapperRef = useRef(null);
   const [wrapperScroll, setWrapperScroll] = useState();
+  const intl = useIntl();
   const onResize = useCallback(() => {
     if (!wrapperRef.current || !camera) {
       return;
@@ -149,6 +151,7 @@ const SvgViewerBase = ({
     isHidden: isHidden
   }, /*#__PURE__*/React.createElement(MediaSvg, {
     testId: 'media-viewer-svg',
+    alt: intl.formatMessage(messages.svg_base_alt),
     identifier: identifier,
     dimensions: imgDimensions
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

package/dist/esm/styleWrappers.compiled.css

@@ -1,4 +1,5 @@
 
+._kkk2n7od{all:unset}
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
 ._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
@@ -27,6 +28,7 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
 ._1ghp1kxc video{max-height:100vh}
 ._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
 ._1jyy1poe._1jyy1poe h1{color:#c7d1db}

package/dist/esm/styleWrappers.js

@@ -11,9 +11,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { forwardRef, useMemo } from 'react';
 import { TouchScrollable } from 'react-scrolllock';
 import { useMergeRefs } from 'use-callback-ref';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import Heading from '@atlaskit/heading';
+import { useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui';
 var blanketStyles = null;
 var headerWrapperStyles = null;
 var archiveHeaderWrapperStyles = null;
@@ -61,6 +64,7 @@ var downloadButtonWrapperStyles = null;
 var customVideoPlayerWrapperStyles = null;
 var sidebarWrapperStyles = null;
 var spinnerWrapperStyles = null;
+var resetButtonStyle = null;
 var formattedMessageWrapperStyles = null;
 // We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
 export var Blanket = function Blanket(_ref) {
@@ -233,12 +237,26 @@ export var LeftHeader = function LeftHeader(_ref18) {
 export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref19, ref) {
   var children = _ref19.children,
     datatestId = _ref19['data-testid'],
-    onClick = _ref19.onClick,
+    _onClick = _ref19.onClick,
     style = _ref19.style,
     className = _ref19.className;
-  return /*#__PURE__*/React.createElement("div", {
+  var intl = useIntl();
+  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
     "data-testid": datatestId,
-    onClick: onClick,
+    onClick: function onClick(event) {
+      return _onClick && _onClick(event);
+    },
+    ref: ref,
+    "aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_kkk2n7od _1e0c1ule", "_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    onClick: _onClick,
     ref: ref,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style
@@ -261,9 +279,9 @@ export var Img = function Img(_ref20) {
     style = _ref20.style,
     onLoad = _ref20.onLoad,
     onError = _ref20.onError,
-    onMouseDown = _ref20.onMouseDown,
     alt = _ref20.alt,
-    className = _ref20.className;
+    className = _ref20.className,
+    onMouseDown = _ref20.onMouseDown;
   var cursor = useMemo(function () {
     if (canDrag && isDragging) {
       return 'grabbing';
@@ -274,7 +292,9 @@ export var Img = function Img(_ref20) {
     }
   }, [canDrag, isDragging]);
   return /*#__PURE__*/React.createElement("img", {
+    onMouseDown: onMouseDown
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ax(["_1e0c1o8l _s7n4nkob _kqswh2mm", shouldPixelate && "_1kemd8h4", className]),
     alt: alt,
     "data-testid": datatestId,
@@ -285,8 +305,7 @@ export var Img = function Img(_ref20) {
       cursor: cursor
     }, style),
     onLoad: onLoad,
-    onError: onError,
-    onMouseDown: onMouseDown
+    onError: onError
   });
 };
 export var MedatadataTextWrapper = function MedatadataTextWrapper(_ref21) {

package/dist/esm/viewers/archiveSidebar/styleWrappers.js

@@ -5,6 +5,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+import { useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var ARCHIVE_SIDE_BAR_WIDTH = 300;
 var archiveItemViewerWrapperStyles = null;
 var archiveSideBarStyles = null;
@@ -47,9 +50,17 @@ export var ArchiveSidebarFolderWrapper = function ArchiveSidebarFolderWrapper(_r
 };
 export var ArchiveDownloadButtonWrapper = function ArchiveDownloadButtonWrapper(_ref4) {
   var children = _ref4.children,
-    onClick = _ref4.onClick;
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: onClick,
+    _onClick = _ref4.onClick;
+  var intl = useIntl();
+  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+    "aria-label": intl.formatMessage(messages.archive_download_label_assistive_text),
+    onClick: function onClick(event) {
+      return _onClick && _onClick(event);
+    },
+    "data-testid": "media-archiveDownloadButton",
+    className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
+  }, children) : /*#__PURE__*/React.createElement("div", {
+    onClick: _onClick,
     "data-testid": "media-archiveDownloadButton",
     className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
   }, children);

package/dist/esm/viewers/svg/ImageWrapper-compiled.js

@@ -1,15 +1,24 @@
 /* ImageWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ImageWrapper-compiled.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { messages } from '@atlaskit/media-ui';
+import React, { forwardRef } from 'react';
+import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 var imageWrapperStyles = null;
 var dynamicImageWrapperStyles = null;
 export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     onClick = _ref.onClick,
     isHidden = _ref.isHidden;
-  return /*#__PURE__*/React.createElement("div", {
+  var intl = useIntl();
+  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+    "data-testid": "media-viewer-svg-wrapper",
+    onClick: onClick,
+    ref: ref,
+    "aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text),
+    className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
+  }, children) : /*#__PURE__*/React.createElement("div", {
     "data-testid": "media-viewer-svg-wrapper",
     onClick: onClick,
     ref: ref,

package/dist/esm/viewers/svg/index.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
-import { Camera, Vector2 } from '@atlaskit/media-ui';
+import { Camera, messages, Vector2 } from '@atlaskit/media-ui';
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { BaselineExtend } from '../../styleWrappers';
@@ -12,6 +12,7 @@ import { MediaViewerError } from '../../errors';
 import { clientRectangle, naturalSizeRectangle, zoomLevelAfterResize } from './utils';
 import { ImageWrapper } from './ImageWrapper';
 import { getErrorReason } from './errors';
+import { useIntl } from 'react-intl-next';
 var SvgViewerBase = function SvgViewerBase(_ref) {
   var identifier = _ref.identifier,
     onLoad = _ref.onLoad,
@@ -39,6 +40,7 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     wrapperScroll = _useState0[0],
     setWrapperScroll = _useState0[1];
+  var intl = useIntl();
   var onResize = useCallback(function () {
     if (!wrapperRef.current || !camera) {
       return;
@@ -155,6 +157,7 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
     isHidden: isHidden
   }, /*#__PURE__*/React.createElement(MediaSvg, {
     testId: 'media-viewer-svg',
+    alt: intl.formatMessage(messages.svg_base_alt),
     identifier: identifier,
     dimensions: imgDimensions
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

package/dist/types/styleWrappers.d.ts

@@ -81,7 +81,7 @@ export type ImgProps = {
     onError: (() => void) | undefined;
     alt?: string;
 } & DataTestID & ClassName;
-export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, onMouseDown, alt, className, }: ImgProps) => JSX.Element;
+export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, alt, className, onMouseDown }: ImgProps) => JSX.Element;
 export declare const MedatadataTextWrapper: ({ children }: Children) => JSX.Element;
 export declare const MetadataWrapper: ({ children }: Children) => JSX.Element;
 type MetadataFileNameProps = DataTestID & Children;

package/dist/types/viewers/svg/ImageWrapper-compiled.d.ts

@@ -1,7 +1,7 @@
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export type ImageWrapperProps = {
     children: ReactNode;
     isHidden: boolean;
     onClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
 };
-export declare const ImageWrapper: import("react").ForwardRefExoticComponent<ImageWrapperProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ImageWrapper: React.ForwardRefExoticComponent<ImageWrapperProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -81,7 +81,7 @@ export type ImgProps = {
     onError: (() => void) | undefined;
     alt?: string;
 } & DataTestID & ClassName;
-export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, onMouseDown, alt, className, }: ImgProps) => JSX.Element;
+export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, alt, className, onMouseDown }: ImgProps) => JSX.Element;
 export declare const MedatadataTextWrapper: ({ children }: Children) => JSX.Element;
 export declare const MetadataWrapper: ({ children }: Children) => JSX.Element;
 type MetadataFileNameProps = DataTestID & Children;

package/dist/types-ts4.5/viewers/svg/ImageWrapper-compiled.d.ts

@@ -1,7 +1,7 @@
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export type ImageWrapperProps = {
     children: ReactNode;
     isHidden: boolean;
     onClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
 };
-export declare const ImageWrapper: import("react").ForwardRefExoticComponent<ImageWrapperProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ImageWrapper: React.ForwardRefExoticComponent<ImageWrapperProps & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "52.9.1",
+	"version": "52.9.3",
 	"description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,9 +37,9 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/icon": "^33.1.0",
+		"@atlaskit/icon": "^34.0.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-lab": "^6.2.0",
+		"@atlaskit/icon-lab": "^6.4.0",
 		"@atlaskit/media-client": "^36.0.0",
 		"@atlaskit/media-client-react": "^5.0.0",
 		"@atlaskit/media-common": "^13.0.0",
@@ -47,14 +47,14 @@
 		"@atlaskit/media-svg": "^2.2.0",
 		"@atlaskit/media-ui": "^28.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/portal": "^5.3.0",
+		"@atlaskit/portal": "^5.4.0",
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/side-navigation": "^11.1.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^22.0.0",
 		"@atlaskit/tokens": "^11.4.0",
-		"@atlaskit/tooltip": "^21.0.0",
+		"@atlaskit/tooltip": "^21.1.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/language": "6.10.8",
@@ -90,8 +90,8 @@
 		"@atlaskit/media-test-data": "^3.2.0",
 		"@atlaskit/media-test-helpers": "^40.0.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/toggle": "^15.2.0",
-		"@atlassian/a11y-jest-testing": "^0.10.0",
+		"@atlaskit/toggle": "^15.3.0",
+		"@atlassian/a11y-jest-testing": "^0.11.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ufo": "^0.7.0",
 		"@testing-library/dom": "^10.1.0",
@@ -130,6 +130,9 @@
 		},
 		"platform_media_react19_support": {
 			"type": "boolean"
+		},
+		"platform_media_a11y_suppression_fixes": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {