@atlaskit/media-card 79.16.11 → 79.16.13

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/media-card
 
+## 79.16.13
+
+### 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
+
+## 79.16.12
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 79.16.11
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -20,7 +20,7 @@ var _label = _interopRequireDefault(require("@atlaskit/react-ufo/label"));
 var _excluded = ["identifier"];
 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 packageName = "@atlaskit/media-card";
-var packageVersion = "79.16.10";
+var packageVersion = "0.0.0-development";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardView.js

@@ -9,6 +9,7 @@ exports.CardViewBase = exports.CardView = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
 var _mediaClient = require("@atlaskit/media-client");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
@@ -39,6 +40,13 @@ 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var i18n = (0, _reactIntlNext.defineMessages)({
+  traceIdTooltip: {
+    id: 'fabric.media.trace_id_tooltip',
+    defaultMessage: 'Use Trace ID {traceId} when reaching out to support.',
+    description: 'Tooltip content showing the trace identifier for troubleshooting file preview errors'
+  }
+});
 var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
   var identifier = _ref.identifier,
     _ref$innerRef = _ref.innerRef,
@@ -73,7 +81,9 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
     overriddenCreationDate = _ref.overriddenCreationDate,
     onSvgError = _ref.onSvgError,
-    onSvgLoad = _ref.onSvgLoad;
+    onSvgLoad = _ref.onSvgLoad,
+    traceId = _ref.traceId;
+  var intl = (0, _reactIntlNext.useIntl)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didSvgRender = _useState2[0],
@@ -170,6 +180,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
         });
         var _iconMessage;
         var _customTitleMessage;
+        var _traceTooltipVariant;
         if ((0, _errors.isUploadError)(error)) {
           _iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage2.FailedToUpload, null);
           _customTitleMessage = _mediaUi.messages.failed_to_upload;
@@ -178,8 +189,10 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
           _customTitleMessage = _mediaUi.messages.check_internet_connection;
         } else if (!metadata) {
           _iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage2.FailedToLoad, null);
+          _traceTooltipVariant = 'failed-to-load';
         } else {
           _iconMessage = /*#__PURE__*/_react.default.createElement(_iconMessage2.PreviewUnavailable, null);
+          _traceTooltipVariant = 'preview-unavailable';
         }
         if (!disableOverlay) {
           var _renderFailedTitleBox = !name || !!_customTitleMessage;
@@ -187,11 +200,13 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
             renderTitleBox: !!name && !_customTitleMessage,
             renderFailedTitleBox: _renderFailedTitleBox,
             iconMessage: !_renderFailedTitleBox ? _iconMessage : undefined,
-            customTitleMessage: _customTitleMessage
+            customTitleMessage: _customTitleMessage,
+            traceTooltipVariant: _traceTooltipVariant
           });
         }
         return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-          iconMessage: _iconMessage
+          iconMessage: _iconMessage,
+          traceTooltipVariant: _traceTooltipVariant
         });
       case 'loading-preview':
       case 'loading':
@@ -212,17 +227,22 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     renderFailedTitleBox = _getRenderConfigBySta.renderFailedTitleBox,
     renderTickBox = _getRenderConfigBySta.renderTickBox,
     isFixedBlanket = _getRenderConfigBySta.isFixedBlanket,
-    customTitleMessage = _getRenderConfigBySta.customTitleMessage;
+    customTitleMessage = _getRenderConfigBySta.customTitleMessage,
+    traceTooltipVariant = _getRenderConfigBySta.traceTooltipVariant;
   var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
   var isPlayButtonClickable = shouldRenderPlayButton() && !!disableOverlay;
   var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
-  // Disable tooltip for Media Single
-  var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
   var _ref4 = metadata || {},
     mediaType = _ref4.mediaType,
     mimeType = _ref4.mimeType,
     name = _ref4.name,
     createdAt = _ref4.createdAt;
+  var shouldShowTraceIdTooltip = !!traceTooltipVariant && !!traceId && (0, _platformFeatureFlags.fg)('platform_trace_id_tooltip_attachment_failures');
+  var tooltipContent = shouldShowTraceIdTooltip ? intl.formatMessage(i18n.traceIdTooltip, {
+    traceId: traceId
+  }) : name;
+  // Disable tooltip for Media Single
+  var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
   var isTitleBoxVisible = renderTitleBox && name;
   var hasVisibleTitleBox = !!(isTitleBoxVisible || renderFailedTitleBox);
   var metadataRef = (0, _useCurrentValueRef.useCurrentValueRef)(metadata);
@@ -324,6 +344,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
     onClick: onClick,
+    ariaLabel: name || 'Media Card',
     onMouseEnter: onMouseEnter,
     innerRef: mergedRef,
     breakpoint: breakpoint,
@@ -335,7 +356,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     isTickBoxSelectable: isTickBoxSelectable,
     shouldDisplayTooltip: shouldDisplayTooltip
   }, shouldDisplayTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    content: name,
+    content: tooltipContent,
     position: "bottom",
     tag: "div"
   }, contents) : contents));

package/dist/cjs/card/fileCard.js

@@ -734,6 +734,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       onSvgLoad: onSvgLoad,
       nativeLazyLoad: nativeLazyLoad,
       forceSyncDisplay: forceSyncDisplay,
+      traceId: traceContext.traceId,
       mediaCardCursor: mediaCardCursor,
       shouldHideTooltip: shouldHideTooltip,
       overriddenCreationDate: overridenDate

package/dist/cjs/card/inlinePlayerWrapper-compiled.js

@@ -40,11 +40,15 @@ var InlinePlayerWrapper = exports.InlinePlayerWrapper = function InlinePlayerWra
     dimensions = props.dimensions,
     onClick = props.onClick,
     innerRef = props.innerRef;
+  var a11yProps = (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? {
+    role: 'presentation',
+    tabIndex: -1
+  } : {};
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     id: "inlinePlayerWrapper",
     "data-testid": testId
+  }, a11yProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
     className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_editor_media_border_radius_fix') ? "_1reo15vq _18m915vq _2rko1mok _kqswh2mm _p12f1osq _c71l1osq _1bsb1ez3 _4t3i1amq _1y2k1osq _z18o1osq" : "_1reo15vq _18m915vq _2rkofajl _kqswh2mm _p12f1osq _c71l1osq _1bsb1ez3 _4t3i1amq _1y2k1osq _z18o1osq", selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", (0, _platformFeatureFlags.fg)('platform_editor_media_border_radius_fix') ? "_14mj1kw7 _aetrb3bt _z0ai1osq _1qdg1osq _18postnw _15l2idpf _631ousvi _11fnglyw" : "_14mjfajl _aetrb3bt _z0ai1osq _1qdg1osq _18postnw _15l2idpf _631ousvi _11fnglyw", selected && "_eq43fyzg", inlinePlayerClassName]),
     onClick: onClick,
     ref: innerRef

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.16.10";
+var packageVersion = "0.0.0-development";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/card/ui/actionsBar/actionsBarWrapper-compiled.js

@@ -1,6 +1,7 @@
 /* actionsBarWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,20 +10,27 @@ exports.ActionsBarWrapper = void 0;
 require("./actionsBarWrapper-compiled.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styles = require("./styles");
+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 wrapperStyles = null;
 var fixedActionBarStyle = null;
 var ActionsBarWrapper = exports.ActionsBarWrapper = function ActionsBarWrapper(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  var a11yProps = (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? {
+    role: 'presentation',
+    tabIndex: -1
+  } : {};
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     id: "actionsBarWrapper",
-    "data-testId": "actionsBarWrapper",
+    "data-testId": "actionsBarWrapper"
+  }, a11yProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: (0, _runtime.ax)(["_v564ybtr _2lx2vrvc _1n261q9c _zulpu2gc _kqswstnw _154iidpf _1xi2idpf _1e0c1txw _1bahusic _ca0qu2gc _n3tdu2gc _u5f3u2gc _19bvu2gc _tzy4idpf", props.isFixed && "_tzy4kb7n", _styles.actionsBarClassName]),
     onClick: function onClick(event) {
       event.stopPropagation();
       event.preventDefault();
     }
-  }, props.children);
+  }), props.children);
 };
 ActionsBarWrapper.displayName = 'ActionsBarWrapper';

package/dist/cjs/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.compiled.css

@@ -1,7 +1,9 @@
 
+._kkk2n7od{all:unset}
 ._1i7vfhey p{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)}._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
 ._2lx21bp4{flex-direction:column}
 ._31ku1h6o p{text-align:center}
 ._4cvr1h6o{align-items:center}

package/dist/cjs/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.js

@@ -16,6 +16,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
 var _utils = require("../../../utils");
 var _contentLoadingErrorMessage = require("./contentLoadingErrorMessage");
@@ -48,6 +49,7 @@ var getConvertedDimension = function getConvertedDimension(dimensions) {
   };
 };
 var wrapperStyle = null;
+var plainButtonStyle = null;
 var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Component) {
   function UnhandledErrorCard() {
     (0, _classCallCheck2.default)(this, UnhandledErrorCard);
@@ -63,7 +65,22 @@ var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Co
         onClick = _this$props.onClick;
       var convertedDimensions = getConvertedDimension(dimensions);
       var hideText = !shouldShowText(getConvertedDimension(dimensions));
-      return /*#__PURE__*/React.createElement("div", {
+      return (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        style: convertedDimensions,
+        onClick: onClick,
+        "data-testid": "unhandled-error-card"
+        // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+        ,
+        "aria-label": "Preview unavailable",
+        className: (0, _runtime.ax)(["_kkk2n7od _1e0c1ule", "_2rkofajl _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm _syazazsu _c71l1osq _p12f1osq _2lx21bp4 _1i7vfhey _31ku1h6o"])
+      }, /*#__PURE__*/React.createElement(_statusWarning.default, {
+        label: "Error",
+        color: "var(--ds-icon-warning, #E06C00)",
+        spacing: "spacious"
+      }), /*#__PURE__*/React.createElement(_contentLoadingErrorMessage.ContentLoadingErrorMessage, {
+        isHidden: hideText
+      })) : /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         style: convertedDimensions,
         onClick: onClick,

package/dist/cjs/card/ui/wrapper/wrapper-compiled.compiled.css

@@ -1,4 +1,5 @@
 
+._kkk2n7od{all:unset}
 ._2rko18qm{border-radius:var(--ds-radius-large,3px)}
 button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._10pb1osq>div{height:100%}
 ._14r11j28::-moz-selection{background-color:transparent}
@@ -7,6 +8,7 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._16qst7xp{box-shadow:var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}
 ._19zy8vuz:hover .media-card-play-button .play-icon-background{height:56px}
 ._1bsb1qmm{width:var(--media-wrapper-width)}
+._1e0c1ule{display:block}
 ._1np21j28 ::-moz-selection{background-color:transparent}
 ._1ntskb7n:hover .media-card-actions-bar{opacity:1}
 ._1p1y1j28::selection{background-color:transparent}
@@ -26,4 +28,6 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}
 ._p12f1osq{max-width:100%}
 ._vchhusvi{box-sizing:border-box}
-._yfmhtlke [data-cursor=pointer]{cursor:pointer}
+._yfmhtlke [data-cursor=pointer]{cursor:pointer}
+[data-node-type=media]>._4gy2stnw{position:absolute}
+[data-node-type=media]>._d81m1osq{height:100%}

package/dist/cjs/card/ui/wrapper/wrapper-compiled.js

@@ -17,6 +17,7 @@ var _vcMedia = require("@atlaskit/react-ufo/vc-media");
 var _cardDimensions = require("../../../utils/cardDimensions");
 var _getCSSUnitValue = require("../../../utils/getCSSUnitValue");
 var _customData = _interopRequireDefault(require("@atlaskit/react-ufo/custom-data"));
+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); }
 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; }
@@ -26,6 +27,11 @@ var wrapperStyles = {
   default: "_2rko18qm _vchhusvi _kqswh2mm _ect4ttxp _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmd0i9 _1rquusvi _eg541i5c _mts3kb7n _1ntskb7n"
 };
 var backgroundStyle = null;
+var resetButtonStyle = null;
+
+// Fix for Renderer context: editor-common's [data-node-type='media'] > div
+// selector doesn't match <button>, so we replicate those styles here.
+var rendererMediaButtonFix = null;
 var shadowStyleMap = {
   withOverlay: "_16qst7xp",
   selected: "_16qsr4us",
@@ -67,12 +73,32 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     displayBackground = props.displayBackground,
     isPlayButtonClickable = props.isPlayButtonClickable,
     isTickBoxSelectable = props.isTickBoxSelectable,
-    shouldDisplayTooltip = props.shouldDisplayTooltip;
+    shouldDisplayTooltip = props.shouldDisplayTooltip,
+    ariaLabel = props.ariaLabel;
   var defaultImageCardDimensions = (0, _cardDimensions.getDefaultCardDimensions)(appearance);
   var width = (0, _getCSSUnitValue.getCSSUnitValue)((dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || defaultImageCardDimensions.width);
   var height = (0, _getCSSUnitValue.getCSSUnitValue)((dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || defaultImageCardDimensions.height);
   var wrapperShadowKey = getShadowKey(disableOverlay, selected);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+  return (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
+    id: "newFileExperienceWrapper",
+    type: "button",
+    "aria-label": ariaLabel
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: (0, _runtime.ax)(["_kkk2n7od _1e0c1ule", wrapperStyles.default, "_4gy2stnw _d81m1osq", "_yfmhtlke _5sb1v00u", displayBackground && "_bfhki8nm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", _cardConstants.newFileExperienceClassName]),
+    "data-testid": testId,
+    style: _objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), getResponsiveStyles(breakpoint)),
+    ref: innerRef,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onFocus: function onFocus(ev) {
+      return onMouseEnter && onMouseEnter(ev);
+    }
+  }, _vcMedia.VcMediaWrapperProps), /*#__PURE__*/React.createElement(_customData.default, {
+    data: {
+      hasMediaComponent: true
+    }
+  }), props.children) : /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

package/dist/cjs/inline/loader.js

@@ -116,7 +116,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "79.16.10",
+        packageName: "0.0.0-development",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -19,7 +19,7 @@ var _globalScope = require("./globalScope/globalScope");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.16.10";
+var packageVersion = "0.0.0-development";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.16.10";
+const packageVersion = "0.0.0-development";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardView.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { defineMessages, useIntl } from 'react-intl-next';
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
@@ -26,6 +27,13 @@ import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerBut
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { SvgView } from './svgView';
 import { fg } from '@atlaskit/platform-feature-flags';
+const i18n = defineMessages({
+  traceIdTooltip: {
+    id: 'fabric.media.trace_id_tooltip',
+    defaultMessage: 'Use Trace ID {traceId} when reaching out to support.',
+    description: 'Tooltip content showing the trace identifier for troubleshooting file preview errors'
+  }
+});
 export const CardViewBase = ({
   identifier,
   innerRef = null,
@@ -58,8 +66,10 @@ export const CardViewBase = ({
   shouldOpenMediaViewer,
   overriddenCreationDate,
   onSvgError,
-  onSvgLoad
+  onSvgLoad,
+  traceId
 }) => {
+  const intl = useIntl();
   const [didSvgRender, setDidSvgRender] = useState(false);
   const [didImageRender, setDidImageRender] = useState(false);
   const divRef = useRef(null);
@@ -156,6 +166,7 @@ export const CardViewBase = ({
         };
         let iconMessage;
         let customTitleMessage;
+        let traceTooltipVariant;
         if (isUploadError(error)) {
           iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
           customTitleMessage = messages.failed_to_upload;
@@ -164,8 +175,10 @@ export const CardViewBase = ({
           customTitleMessage = messages.check_internet_connection;
         } else if (!metadata) {
           iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
+          traceTooltipVariant = 'failed-to-load';
         } else {
           iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
+          traceTooltipVariant = 'preview-unavailable';
         }
         if (!disableOverlay) {
           const renderFailedTitleBox = !name || !!customTitleMessage;
@@ -174,12 +187,14 @@ export const CardViewBase = ({
             renderTitleBox: !!name && !customTitleMessage,
             renderFailedTitleBox,
             iconMessage: !renderFailedTitleBox ? iconMessage : undefined,
-            customTitleMessage
+            customTitleMessage,
+            traceTooltipVariant
           };
         }
         return {
           ...baseErrorConfig,
-          iconMessage
+          iconMessage,
+          traceTooltipVariant
         };
       case 'loading-preview':
       case 'loading':
@@ -200,19 +215,24 @@ export const CardViewBase = ({
     renderFailedTitleBox,
     renderTickBox,
     isFixedBlanket,
-    customTitleMessage
+    customTitleMessage,
+    traceTooltipVariant
   } = getRenderConfigByStatus();
   const shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
   const isPlayButtonClickable = shouldRenderPlayButton() && !!disableOverlay;
   const isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
-  // Disable tooltip for Media Single
-  const shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
   const {
     mediaType,
     mimeType,
     name,
     createdAt
   } = metadata || {};
+  const shouldShowTraceIdTooltip = !!traceTooltipVariant && !!traceId && fg('platform_trace_id_tooltip_attachment_failures');
+  const tooltipContent = shouldShowTraceIdTooltip ? intl.formatMessage(i18n.traceIdTooltip, {
+    traceId
+  }) : name;
+  // Disable tooltip for Media Single
+  const shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
   const isTitleBoxVisible = renderTitleBox && name;
   const hasVisibleTitleBox = !!(isTitleBoxVisible || renderFailedTitleBox);
   const metadataRef = useCurrentValueRef(metadata);
@@ -313,6 +333,7 @@ export const CardViewBase = ({
     testId: testId || 'media-card-view',
     dimensions: dimensions,
     onClick: onClick,
+    ariaLabel: name || 'Media Card',
     onMouseEnter: onMouseEnter,
     innerRef: mergedRef,
     breakpoint: breakpoint,
@@ -324,7 +345,7 @@ export const CardViewBase = ({
     isTickBoxSelectable: isTickBoxSelectable,
     shouldDisplayTooltip: shouldDisplayTooltip
   }, shouldDisplayTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-    content: name,
+    content: tooltipContent,
     position: "bottom",
     tag: "div"
   }, contents) : contents));

package/dist/es2019/card/fileCard.js

@@ -654,6 +654,7 @@ export const FileCard = ({
       onSvgLoad: onSvgLoad,
       nativeLazyLoad: nativeLazyLoad,
       forceSyncDisplay: forceSyncDisplay,
+      traceId: traceContext.traceId,
       mediaCardCursor: mediaCardCursor,
       shouldHideTooltip: shouldHideTooltip,
       overriddenCreationDate: overridenDate

package/dist/es2019/card/inlinePlayerWrapper-compiled.js

@@ -32,11 +32,15 @@ export const InlinePlayerWrapper = props => {
     onClick,
     innerRef
   } = props;
+  const a11yProps = fg('platform_media_a11y_suppression_fixes') ? {
+    role: 'presentation',
+    tabIndex: -1
+  } : {};
   return /*#__PURE__*/React.createElement("div", _extends({
     id: "inlinePlayerWrapper",
     "data-testid": testId
+  }, a11yProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
     className: ax([fg('platform_editor_media_border_radius_fix') ? "_1reo15vq _18m915vq _2rko1mok _kqswh2mm _p12f1osq _c71l1osq _1bsbbj0z _4t3io1dg _1y2k1osq _z18o1osq" : "_1reo15vq _18m915vq _2rkofajl _kqswh2mm _p12f1osq _c71l1osq _1bsbbj0z _4t3io1dg _1y2k1osq _z18o1osq", selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", fg('platform_editor_media_border_radius_fix') ? "_14mj1kw7 _aetrb3bt _z0ai1osq _1qdg1osq _18postnw _15l2idpf _631ousvi _11fnglyw" : "_14mjfajl _aetrb3bt _z0ai1osq _1qdg1osq _18postnw _15l2idpf _631ousvi _11fnglyw", selected && "_eq43fyzg", inlinePlayerClassName]),
     style: {
       [LOCAL_WIDTH_VARIABLE]: getDimensionsWithDefault(dimensions).width || '100%',

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.16.10";
+const packageVersion = "0.0.0-development";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/ui/actionsBar/actionsBarWrapper-compiled.js

@@ -1,20 +1,27 @@
 /* actionsBarWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./actionsBarWrapper-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { actionsBarClassName } from './styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 const wrapperStyles = null;
 const fixedActionBarStyle = null;
 export const ActionsBarWrapper = props => {
-  return /*#__PURE__*/React.createElement("div", {
+  const a11yProps = fg('platform_media_a11y_suppression_fixes') ? {
+    role: 'presentation',
+    tabIndex: -1
+  } : {};
+  return /*#__PURE__*/React.createElement("div", _extends({
     id: "actionsBarWrapper",
-    "data-testId": "actionsBarWrapper",
+    "data-testId": "actionsBarWrapper"
+  }, a11yProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax(["_v564ybtr _2lx2vrvc _1n261q9c _zulpu2gc _kqswstnw _154iidpf _1xi2idpf _1e0c1txw _1bahusic _ca0qu2gc _n3tdu2gc _u5f3u2gc _19bvu2gc _tzy4idpf", props.isFixed && "_tzy4kb7n", actionsBarClassName]),
     onClick: event => {
       event.stopPropagation();
       event.preventDefault();
     }
-  }, props.children);
+  }), props.children);
 };
 ActionsBarWrapper.displayName = 'ActionsBarWrapper';

package/dist/es2019/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.compiled.css

@@ -1,7 +1,9 @@
 
+._kkk2n7od{all:unset}
 ._1i7vfhey p{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)}._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
 ._2lx21bp4{flex-direction:column}
 ._31ku1h6o p{text-align:center}
 ._4cvr1h6o{align-items:center}

package/dist/es2019/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.js

@@ -3,6 +3,7 @@ import "./unhandledErrorCard-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Component } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import WarningIcon from '@atlaskit/icon/core/status-warning';
 import { defaultImageCardDimensions } from '../../../utils';
 import { ContentLoadingErrorMessage } from './contentLoadingErrorMessage';
@@ -31,6 +32,7 @@ const getConvertedDimension = dimensions => {
   };
 };
 const wrapperStyle = null;
+const plainButtonStyle = null;
 export class UnhandledErrorCard extends Component {
   render() {
     const {
@@ -39,7 +41,22 @@ export class UnhandledErrorCard extends Component {
     } = this.props;
     const convertedDimensions = getConvertedDimension(dimensions);
     const hideText = !shouldShowText(getConvertedDimension(dimensions));
-    return /*#__PURE__*/React.createElement("div", {
+    return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      style: convertedDimensions,
+      onClick: onClick,
+      "data-testid": "unhandled-error-card"
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+      ,
+      "aria-label": "Preview unavailable",
+      className: ax(["_kkk2n7od _1e0c1ule", "_2rkofajl _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm _syazazsu _c71l1osq _p12f1osq _2lx21bp4 _1i7vfhey _31ku1h6o"])
+    }, /*#__PURE__*/React.createElement(WarningIcon, {
+      label: "Error",
+      color: "var(--ds-icon-warning, #E06C00)",
+      spacing: "spacious"
+    }), /*#__PURE__*/React.createElement(ContentLoadingErrorMessage, {
+      isHidden: hideText
+    })) : /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       style: convertedDimensions,
       onClick: onClick,

package/dist/es2019/card/ui/wrapper/wrapper-compiled.compiled.css

@@ -1,4 +1,5 @@
 
+._kkk2n7od{all:unset}
 ._2rko18qm{border-radius:var(--ds-radius-large,3px)}
 button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._10pb1osq>div{height:100%}
 ._14r11j28::-moz-selection{background-color:transparent}
@@ -7,6 +8,7 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._16qst7xp{box-shadow:var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}
 ._19zy8vuz:hover .media-card-play-button .play-icon-background{height:56px}
 ._1bsb1qmm{width:var(--media-wrapper-width)}
+._1e0c1ule{display:block}
 ._1np21j28 ::-moz-selection{background-color:transparent}
 ._1ntskb7n:hover .media-card-actions-bar{opacity:1}
 ._1p1y1j28::selection{background-color:transparent}
@@ -26,4 +28,6 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}
 ._p12f1osq{max-width:100%}
 ._vchhusvi{box-sizing:border-box}
-._yfmhtlke [data-cursor=pointer]{cursor:pointer}
+._yfmhtlke [data-cursor=pointer]{cursor:pointer}
+[data-node-type=media]>._4gy2stnw{position:absolute}
+[data-node-type=media]>._d81m1osq{height:100%}

package/dist/es2019/card/ui/wrapper/wrapper-compiled.js

@@ -8,12 +8,18 @@ import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
 import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
 import { getCSSUnitValue } from '../../../utils/getCSSUnitValue';
 import UFOCustomData from '@atlaskit/react-ufo/custom-data';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const LOCAL_WIDTH_VARIABLE = '--media-wrapper-width';
 export const LOCAL_HEIGHT_VARIABLE = '--media-wrapper-height';
 const wrapperStyles = {
   default: "_2rko18qm _vchhusvi _kqswh2mm _ect4ttxp _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmd0i9 _1rquusvi _eg541i5c _mts3kb7n _1ntskb7n"
 };
 const backgroundStyle = null;
+const resetButtonStyle = null;
+
+// Fix for Renderer context: editor-common's [data-node-type='media'] > div
+// selector doesn't match <button>, so we replicate those styles here.
+const rendererMediaButtonFix = null;
 const shadowStyleMap = {
   withOverlay: "_16qst7xp",
   selected: "_16qsr4us",
@@ -62,13 +68,36 @@ export const Wrapper = props => {
     displayBackground,
     isPlayButtonClickable,
     isTickBoxSelectable,
-    shouldDisplayTooltip
+    shouldDisplayTooltip,
+    ariaLabel
   } = props;
   const defaultImageCardDimensions = getDefaultCardDimensions(appearance);
   const width = getCSSUnitValue((dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || defaultImageCardDimensions.width);
   const height = getCSSUnitValue((dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || defaultImageCardDimensions.height);
   const wrapperShadowKey = getShadowKey(disableOverlay, selected);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", _extends({
+    id: "newFileExperienceWrapper",
+    type: "button",
+    "aria-label": ariaLabel
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_kkk2n7od _1e0c1ule", wrapperStyles.default, "_4gy2stnw _d81m1osq", "_yfmhtlke _5sb1v00u", displayBackground && "_bfhki8nm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
+    "data-testid": testId,
+    style: {
+      [LOCAL_WIDTH_VARIABLE]: width,
+      [LOCAL_HEIGHT_VARIABLE]: height,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ...getResponsiveStyles(breakpoint)
+    },
+    ref: innerRef,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onFocus: ev => onMouseEnter && onMouseEnter(ev)
+  }, VcMediaWrapperProps), /*#__PURE__*/React.createElement(UFOCustomData, {
+    data: {
+      hasMediaComponent: true
+    }
+  }), props.children) : /*#__PURE__*/React.createElement("div", _extends({
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "79.16.10",
+      packageName: "0.0.0-development",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -9,7 +9,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.16.10";
+const packageVersion = "0.0.0-development";
 const SAMPLE_RATE = 0.05;
 
 /**

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.16.10";
+var packageVersion = "0.0.0-development";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/cardView.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { defineMessages, useIntl } from 'react-intl-next';
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
@@ -30,6 +31,13 @@ import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerBut
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { SvgView } from './svgView';
 import { fg } from '@atlaskit/platform-feature-flags';
+var i18n = defineMessages({
+  traceIdTooltip: {
+    id: 'fabric.media.trace_id_tooltip',
+    defaultMessage: 'Use Trace ID {traceId} when reaching out to support.',
+    description: 'Tooltip content showing the trace identifier for troubleshooting file preview errors'
+  }
+});
 export var CardViewBase = function CardViewBase(_ref) {
   var identifier = _ref.identifier,
     _ref$innerRef = _ref.innerRef,
@@ -64,7 +72,9 @@ export var CardViewBase = function CardViewBase(_ref) {
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
     overriddenCreationDate = _ref.overriddenCreationDate,
     onSvgError = _ref.onSvgError,
-    onSvgLoad = _ref.onSvgLoad;
+    onSvgLoad = _ref.onSvgLoad,
+    traceId = _ref.traceId;
+  var intl = useIntl();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     didSvgRender = _useState2[0],
@@ -161,6 +171,7 @@ export var CardViewBase = function CardViewBase(_ref) {
         });
         var _iconMessage;
         var _customTitleMessage;
+        var _traceTooltipVariant;
         if (isUploadError(error)) {
           _iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
           _customTitleMessage = messages.failed_to_upload;
@@ -169,8 +180,10 @@ export var CardViewBase = function CardViewBase(_ref) {
           _customTitleMessage = messages.check_internet_connection;
         } else if (!metadata) {
           _iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
+          _traceTooltipVariant = 'failed-to-load';
         } else {
           _iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
+          _traceTooltipVariant = 'preview-unavailable';
         }
         if (!disableOverlay) {
           var _renderFailedTitleBox = !name || !!_customTitleMessage;
@@ -178,11 +191,13 @@ export var CardViewBase = function CardViewBase(_ref) {
             renderTitleBox: !!name && !_customTitleMessage,
             renderFailedTitleBox: _renderFailedTitleBox,
             iconMessage: !_renderFailedTitleBox ? _iconMessage : undefined,
-            customTitleMessage: _customTitleMessage
+            customTitleMessage: _customTitleMessage,
+            traceTooltipVariant: _traceTooltipVariant
           });
         }
         return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
-          iconMessage: _iconMessage
+          iconMessage: _iconMessage,
+          traceTooltipVariant: _traceTooltipVariant
         });
       case 'loading-preview':
       case 'loading':
@@ -203,17 +218,22 @@ export var CardViewBase = function CardViewBase(_ref) {
     renderFailedTitleBox = _getRenderConfigBySta.renderFailedTitleBox,
     renderTickBox = _getRenderConfigBySta.renderTickBox,
     isFixedBlanket = _getRenderConfigBySta.isFixedBlanket,
-    customTitleMessage = _getRenderConfigBySta.customTitleMessage;
+    customTitleMessage = _getRenderConfigBySta.customTitleMessage,
+    traceTooltipVariant = _getRenderConfigBySta.traceTooltipVariant;
   var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
   var isPlayButtonClickable = shouldRenderPlayButton() && !!disableOverlay;
   var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
-  // Disable tooltip for Media Single
-  var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
   var _ref4 = metadata || {},
     mediaType = _ref4.mediaType,
     mimeType = _ref4.mimeType,
     name = _ref4.name,
     createdAt = _ref4.createdAt;
+  var shouldShowTraceIdTooltip = !!traceTooltipVariant && !!traceId && fg('platform_trace_id_tooltip_attachment_failures');
+  var tooltipContent = shouldShowTraceIdTooltip ? intl.formatMessage(i18n.traceIdTooltip, {
+    traceId: traceId
+  }) : name;
+  // Disable tooltip for Media Single
+  var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
   var isTitleBoxVisible = renderTitleBox && name;
   var hasVisibleTitleBox = !!(isTitleBoxVisible || renderFailedTitleBox);
   var metadataRef = useCurrentValueRef(metadata);
@@ -315,6 +335,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
     onClick: onClick,
+    ariaLabel: name || 'Media Card',
     onMouseEnter: onMouseEnter,
     innerRef: mergedRef,
     breakpoint: breakpoint,
@@ -326,7 +347,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     isTickBoxSelectable: isTickBoxSelectable,
     shouldDisplayTooltip: shouldDisplayTooltip
   }, shouldDisplayTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-    content: name,
+    content: tooltipContent,
     position: "bottom",
     tag: "div"
   }, contents) : contents));

package/dist/esm/card/fileCard.js

@@ -726,6 +726,7 @@ export var FileCard = function FileCard(_ref) {
       onSvgLoad: onSvgLoad,
       nativeLazyLoad: nativeLazyLoad,
       forceSyncDisplay: forceSyncDisplay,
+      traceId: traceContext.traceId,
       mediaCardCursor: mediaCardCursor,
       shouldHideTooltip: shouldHideTooltip,
       overriddenCreationDate: overridenDate

package/dist/esm/card/inlinePlayerWrapper-compiled.js

@@ -31,11 +31,15 @@ export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
     dimensions = props.dimensions,
     onClick = props.onClick,
     innerRef = props.innerRef;
+  var a11yProps = fg('platform_media_a11y_suppression_fixes') ? {
+    role: 'presentation',
+    tabIndex: -1
+  } : {};
   return /*#__PURE__*/React.createElement("div", _extends({
     id: "inlinePlayerWrapper",
     "data-testid": testId
+  }, a11yProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
     className: ax([fg('platform_editor_media_border_radius_fix') ? "_1reo15vq _18m915vq _2rko1mok _kqswh2mm _p12f1osq _c71l1osq _1bsb1ez3 _4t3i1amq _1y2k1osq _z18o1osq" : "_1reo15vq _18m915vq _2rkofajl _kqswh2mm _p12f1osq _c71l1osq _1bsb1ez3 _4t3i1amq _1y2k1osq _z18o1osq", selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", fg('platform_editor_media_border_radius_fix') ? "_14mj1kw7 _aetrb3bt _z0ai1osq _1qdg1osq _18postnw _15l2idpf _631ousvi _11fnglyw" : "_14mjfajl _aetrb3bt _z0ai1osq _1qdg1osq _18postnw _15l2idpf _631ousvi _11fnglyw", selected && "_eq43fyzg", inlinePlayerClassName]),
     onClick: onClick,
     ref: innerRef

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.16.10";
+var packageVersion = "0.0.0-development";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/card/ui/actionsBar/actionsBarWrapper-compiled.js

@@ -1,20 +1,27 @@
 /* actionsBarWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./actionsBarWrapper-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { actionsBarClassName } from './styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 var wrapperStyles = null;
 var fixedActionBarStyle = null;
 export var ActionsBarWrapper = function ActionsBarWrapper(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  var a11yProps = fg('platform_media_a11y_suppression_fixes') ? {
+    role: 'presentation',
+    tabIndex: -1
+  } : {};
+  return /*#__PURE__*/React.createElement("div", _extends({
     id: "actionsBarWrapper",
-    "data-testId": "actionsBarWrapper",
+    "data-testId": "actionsBarWrapper"
+  }, a11yProps, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax(["_v564ybtr _2lx2vrvc _1n261q9c _zulpu2gc _kqswstnw _154iidpf _1xi2idpf _1e0c1txw _1bahusic _ca0qu2gc _n3tdu2gc _u5f3u2gc _19bvu2gc _tzy4idpf", props.isFixed && "_tzy4kb7n", actionsBarClassName]),
     onClick: function onClick(event) {
       event.stopPropagation();
       event.preventDefault();
     }
-  }, props.children);
+  }), props.children);
 };
 ActionsBarWrapper.displayName = 'ActionsBarWrapper';

package/dist/esm/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.compiled.css

@@ -1,7 +1,9 @@
 
+._kkk2n7od{all:unset}
 ._1i7vfhey p{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)}._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
 ._2lx21bp4{flex-direction:column}
 ._31ku1h6o p{text-align:center}
 ._4cvr1h6o{align-items:center}

package/dist/esm/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.js

@@ -10,6 +10,7 @@ import { ax, ix } from "@compiled/react/runtime";
 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 { Component } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import WarningIcon from '@atlaskit/icon/core/status-warning';
 import { defaultImageCardDimensions } from '../../../utils';
 import { ContentLoadingErrorMessage } from './contentLoadingErrorMessage';
@@ -39,6 +40,7 @@ var getConvertedDimension = function getConvertedDimension(dimensions) {
   };
 };
 var wrapperStyle = null;
+var plainButtonStyle = null;
 export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
   function UnhandledErrorCard() {
     _classCallCheck(this, UnhandledErrorCard);
@@ -54,7 +56,22 @@ export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
         onClick = _this$props.onClick;
       var convertedDimensions = getConvertedDimension(dimensions);
       var hideText = !shouldShowText(getConvertedDimension(dimensions));
-      return /*#__PURE__*/React.createElement("div", {
+      return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        style: convertedDimensions,
+        onClick: onClick,
+        "data-testid": "unhandled-error-card"
+        // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+        ,
+        "aria-label": "Preview unavailable",
+        className: ax(["_kkk2n7od _1e0c1ule", "_2rkofajl _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm _syazazsu _c71l1osq _p12f1osq _2lx21bp4 _1i7vfhey _31ku1h6o"])
+      }, /*#__PURE__*/React.createElement(WarningIcon, {
+        label: "Error",
+        color: "var(--ds-icon-warning, #E06C00)",
+        spacing: "spacious"
+      }), /*#__PURE__*/React.createElement(ContentLoadingErrorMessage, {
+        isHidden: hideText
+      })) : /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         style: convertedDimensions,
         onClick: onClick,

package/dist/esm/card/ui/wrapper/wrapper-compiled.compiled.css

@@ -1,4 +1,5 @@
 
+._kkk2n7od{all:unset}
 ._2rko18qm{border-radius:var(--ds-radius-large,3px)}
 button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._10pb1osq>div{height:100%}
 ._14r11j28::-moz-selection{background-color:transparent}
@@ -7,6 +8,7 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._16qst7xp{box-shadow:var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}
 ._19zy8vuz:hover .media-card-play-button .play-icon-background{height:56px}
 ._1bsb1qmm{width:var(--media-wrapper-width)}
+._1e0c1ule{display:block}
 ._1np21j28 ::-moz-selection{background-color:transparent}
 ._1ntskb7n:hover .media-card-actions-bar{opacity:1}
 ._1p1y1j28::selection{background-color:transparent}
@@ -26,4 +28,6 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}
 ._p12f1osq{max-width:100%}
 ._vchhusvi{box-sizing:border-box}
-._yfmhtlke [data-cursor=pointer]{cursor:pointer}
+._yfmhtlke [data-cursor=pointer]{cursor:pointer}
+[data-node-type=media]>._4gy2stnw{position:absolute}
+[data-node-type=media]>._d81m1osq{height:100%}

package/dist/esm/card/ui/wrapper/wrapper-compiled.js

@@ -11,12 +11,18 @@ import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
 import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
 import { getCSSUnitValue } from '../../../utils/getCSSUnitValue';
 import UFOCustomData from '@atlaskit/react-ufo/custom-data';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var LOCAL_WIDTH_VARIABLE = '--media-wrapper-width';
 export var LOCAL_HEIGHT_VARIABLE = '--media-wrapper-height';
 var wrapperStyles = {
   default: "_2rko18qm _vchhusvi _kqswh2mm _ect4ttxp _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmd0i9 _1rquusvi _eg541i5c _mts3kb7n _1ntskb7n"
 };
 var backgroundStyle = null;
+var resetButtonStyle = null;
+
+// Fix for Renderer context: editor-common's [data-node-type='media'] > div
+// selector doesn't match <button>, so we replicate those styles here.
+var rendererMediaButtonFix = null;
 var shadowStyleMap = {
   withOverlay: "_16qst7xp",
   selected: "_16qsr4us",
@@ -58,12 +64,32 @@ export var Wrapper = function Wrapper(props) {
     displayBackground = props.displayBackground,
     isPlayButtonClickable = props.isPlayButtonClickable,
     isTickBoxSelectable = props.isTickBoxSelectable,
-    shouldDisplayTooltip = props.shouldDisplayTooltip;
+    shouldDisplayTooltip = props.shouldDisplayTooltip,
+    ariaLabel = props.ariaLabel;
   var defaultImageCardDimensions = getDefaultCardDimensions(appearance);
   var width = getCSSUnitValue((dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || defaultImageCardDimensions.width);
   var height = getCSSUnitValue((dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || defaultImageCardDimensions.height);
   var wrapperShadowKey = getShadowKey(disableOverlay, selected);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", _extends({
+    id: "newFileExperienceWrapper",
+    type: "button",
+    "aria-label": ariaLabel
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_kkk2n7od _1e0c1ule", wrapperStyles.default, "_4gy2stnw _d81m1osq", "_yfmhtlke _5sb1v00u", displayBackground && "_bfhki8nm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
+    "data-testid": testId,
+    style: _objectSpread(_defineProperty(_defineProperty({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), getResponsiveStyles(breakpoint)),
+    ref: innerRef,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onFocus: function onFocus(ev) {
+      return onMouseEnter && onMouseEnter(ev);
+    }
+  }, VcMediaWrapperProps), /*#__PURE__*/React.createElement(UFOCustomData, {
+    data: {
+      hasMediaComponent: true
+    }
+  }), props.children) : /*#__PURE__*/React.createElement("div", _extends({
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

package/dist/esm/inline/loader.js

@@ -101,7 +101,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "79.16.10",
+        packageName: "0.0.0-development",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/ufoExperiences.js

@@ -13,7 +13,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.16.10";
+var packageVersion = "0.0.0-development";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/types/card/cardView.d.ts

@@ -37,11 +37,13 @@ export interface CardViewProps {
     readonly onSvgLoad?: () => void;
     readonly nativeLazyLoad?: boolean;
     readonly forceSyncDisplay?: boolean;
+    readonly traceId?: string;
     disableAnimation?: boolean;
     shouldHideTooltip?: boolean;
     overriddenCreationDate?: number;
 }
 export type CardViewBaseProps = CardViewProps & WithAnalyticsEventsProps;
+type TraceTooltipVariant = 'preview-unavailable' | 'failed-to-load';
 export interface RenderConfigByStatus {
     renderTypeIcon?: boolean;
     iconMessage?: JSX.Element;
@@ -56,6 +58,8 @@ export interface RenderConfigByStatus {
     renderFailedTitleBox?: boolean;
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
+    traceTooltipVariant?: TraceTooltipVariant;
 }
-export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, }: CardViewBaseProps) => React.JSX.Element;
+export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, }: CardViewBaseProps) => React.JSX.Element;
 export declare const CardView: React.ForwardRefExoticComponent<Omit<CardViewProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export {};

package/dist/types/card/ui/titleBox/styles.d.ts

@@ -6,7 +6,7 @@ type TitleBoxWrapperStyleArgs = {
     display?: 'none' | 'flex';
 };
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, display, }: TitleBoxWrapperStyleArgs): import("@emotion/utils").SerializedStyles;
+    ({ breakpoint, display }: TitleBoxWrapperStyleArgs): import("@emotion/utils").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

package/dist/types/card/ui/wrapper/types.d.ts

@@ -21,4 +21,5 @@ export interface WrapperProps {
     shouldDisplayTooltip: boolean;
     innerRef?: React.Ref<HTMLDivElement>;
     children?: JSX.Element;
+    ariaLabel?: string;
 }

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

@@ -37,11 +37,13 @@ export interface CardViewProps {
     readonly onSvgLoad?: () => void;
     readonly nativeLazyLoad?: boolean;
     readonly forceSyncDisplay?: boolean;
+    readonly traceId?: string;
     disableAnimation?: boolean;
     shouldHideTooltip?: boolean;
     overriddenCreationDate?: number;
 }
 export type CardViewBaseProps = CardViewProps & WithAnalyticsEventsProps;
+type TraceTooltipVariant = 'preview-unavailable' | 'failed-to-load';
 export interface RenderConfigByStatus {
     renderTypeIcon?: boolean;
     iconMessage?: JSX.Element;
@@ -56,6 +58,8 @@ export interface RenderConfigByStatus {
     renderFailedTitleBox?: boolean;
     renderTickBox?: boolean;
     customTitleMessage?: MessageDescriptor;
+    traceTooltipVariant?: TraceTooltipVariant;
 }
-export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, }: CardViewBaseProps) => React.JSX.Element;
+export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, }: CardViewBaseProps) => React.JSX.Element;
 export declare const CardView: React.ForwardRefExoticComponent<Omit<CardViewProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export {};

package/dist/types-ts4.5/card/ui/titleBox/styles.d.ts

@@ -6,7 +6,7 @@ type TitleBoxWrapperStyleArgs = {
     display?: 'none' | 'flex';
 };
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, display, }: TitleBoxWrapperStyleArgs): import("@emotion/utils").SerializedStyles;
+    ({ breakpoint, display }: TitleBoxWrapperStyleArgs): import("@emotion/utils").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

package/dist/types-ts4.5/card/ui/wrapper/types.d.ts

@@ -21,4 +21,5 @@ export interface WrapperProps {
     shouldDisplayTooltip: boolean;
     innerRef?: React.Ref<HTMLDivElement>;
     children?: JSX.Element;
+    ariaLabel?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "79.16.11",
+	"version": "79.16.13",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,10 +46,10 @@
 		"@atlaskit/media-viewer": "^52.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.1.0",
-		"@atlaskit/react-ufo": "^5.10.0",
+		"@atlaskit/react-ufo": "^5.11.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^53.0.0",
+		"@atlaskit/tmp-editor-statsig": "^54.5.0",
 		"@atlaskit/tokens": "^11.4.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@atlaskit/ufo": "^0.4.0",
@@ -79,10 +79,10 @@
 		"@atlaskit/media-picker": "^70.1.0",
 		"@atlaskit/media-test-data": "^3.2.0",
 		"@atlaskit/media-test-helpers": "^40.0.0",
-		"@atlaskit/radio": "^8.4.0",
+		"@atlaskit/radio": "^8.5.0",
 		"@atlaskit/range": "^10.0.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/toggle": "^15.2.0",
+		"@atlaskit/toggle": "^15.3.0",
 		"@atlassian/a11y-jest-testing": "^0.11.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.5.0",
@@ -157,6 +157,12 @@
 		},
 		"platform_media_react19_support": {
 			"type": "boolean"
+		},
+		"platform_trace_id_tooltip_attachment_failures": {
+			"type": "boolean"
+		},
+		"platform_media_a11y_suppression_fixes": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {