@atlaskit/media-viewer 52.4.2 → 52.4.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/media-viewer
 
+## 52.4.4
+
+### Patch Changes
+
+- [#180471](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180471)
+  [`c45881148e552`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c45881148e552) -
+  Added image alt tags for a11y compliance
+
+## 52.4.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 52.4.2
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _analytics = require("@atlaskit/media-common/analytics");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "52.4.1";
+var packageVersion = exports.packageVersion = "52.4.3";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 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-viewer";
-var packageVersion = "52.4.1";
+var packageVersion = "52.4.3";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/item-viewer.js

@@ -335,9 +335,11 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref) {
       if (fileItem === 'external-image') {
         // render an external image
         var _ref2 = identifier,
-          dataURI = _ref2.dataURI;
+          dataURI = _ref2.dataURI,
+          name = _ref2.name;
         return /*#__PURE__*/_react.default.createElement(_interactiveImg.InteractiveImg, {
           src: dataURI,
+          alt: name !== null && name !== void 0 ? name : '',
           onLoad: function onLoad() {
             (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)({
               fileId: 'external-image'

package/dist/cjs/styleWrappers-emotion.js

@@ -620,6 +620,7 @@ var Img = exports.Img = function Img(_ref25) {
     onLoad = _ref25.onLoad,
     onError = _ref25.onError,
     onMouseDown = _ref25.onMouseDown,
+    alt = _ref25.alt,
     className = _ref25.className;
   var cursor = (0, _react2.useMemo)(function () {
     if (canDrag && isDragging) {
@@ -631,7 +632,7 @@ var Img = exports.Img = function Img(_ref25) {
     }
   }, [canDrag, isDragging]);
   return (
-    // eslint-disable-next-line jsx-a11y/alt-text, jsx-a11y/no-noninteractive-element-interactions
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     (0, _react.jsx)("img", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className
@@ -641,6 +642,7 @@ var Img = exports.Img = function Img(_ref25) {
         cursor: cursor,
         shouldPixelate: shouldPixelate
       }),
+      alt: alt,
       "data-testid": datatestId,
       src: src
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

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

@@ -321,6 +321,7 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
           case 'image':
             return /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_interactiveImg.InteractiveImg, {
               src: src,
+              alt: name,
               onLoad: this.onViewerLoad(selectedArchiveEntry),
               onError: this.onViewerError('archiveviewer-imageviewer-onerror', selectedArchiveEntry)
             }));

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

@@ -65,7 +65,7 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _this$props = this.props, fileState = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName, traceContext = _this$props.traceContext;
-              if (!(fileState.status === 'error')) {
+              if (!(0, _mediaClient.isErrorFileState)(fileState)) {
                 _context.next = 3;
                 break;
               }
@@ -199,6 +199,9 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
         onClose = _this$props2.onClose,
         contextId = _this$props2.contextId,
         collectionName = _this$props2.collectionName;
+      if ((0, _mediaClient.isErrorFileState)(item)) {
+        return null;
+      }
       var src = contextId ? (0, _mediaClient.addFileAttrsToUrl)(content.objectUrl, {
         id: item.id,
         contextId: contextId,
@@ -208,6 +211,7 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
         onLoad: this.onLoad,
         onError: this.onImgError,
         src: src,
+        alt: item.name,
         originalBinaryImageSrc: content.originalBinaryImageUrl,
         orientation: content.orientation,
         onClose: onClose

package/dist/cjs/viewers/image/interactive-img.js

@@ -283,7 +283,8 @@ var InteractiveImgComponent = exports.InteractiveImgComponent = /*#__PURE__*/fun
         "data-testid": "media-viewer-image",
         canDrag: canDrag,
         isDragging: isDragging,
-        src: srcToDisplay
+        src: srcToDisplay,
+        alt: this.props.alt
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
         style: imgStyle,

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "52.4.1";
+const packageVersion = "52.4.3";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "52.4.1";
+const packageVersion = "52.4.3";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/item-viewer.js

@@ -265,10 +265,12 @@ export const ItemViewerBase = ({
       if (fileItem === 'external-image') {
         // render an external image
         const {
-          dataURI
+          dataURI,
+          name
         } = identifier;
         return /*#__PURE__*/React.createElement(InteractiveImg, {
           src: dataURI,
+          alt: name !== null && name !== void 0 ? name : '',
           onLoad: () => {
             fireAnalytics(createLoadSucceededEvent({
               fileId: 'external-image'

package/dist/es2019/styleWrappers-emotion.js

@@ -586,6 +586,7 @@ export const Img = ({
   onLoad,
   onError,
   onMouseDown,
+  alt,
   className
 }) => {
   const cursor = useMemo(() => {
@@ -598,7 +599,7 @@ export const Img = ({
     }
   }, [canDrag, isDragging]);
   return (
-    // eslint-disable-next-line jsx-a11y/alt-text, jsx-a11y/no-noninteractive-element-interactions
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     jsx("img", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className
@@ -608,6 +609,7 @@ export const Img = ({
         cursor,
         shouldPixelate
       }),
+      alt: alt,
       "data-testid": datatestId,
       src: src
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

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

@@ -205,6 +205,7 @@ export class ArchiveViewerBase extends BaseViewer {
         case 'image':
           return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null, /*#__PURE__*/React.createElement(InteractiveImg, {
             src: src,
+            alt: name,
             onLoad: this.onViewerLoad(selectedArchiveEntry),
             onError: this.onViewerError('archiveviewer-imageviewer-onerror', selectedArchiveEntry)
           }));

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

@@ -38,7 +38,7 @@ export class ImageViewer extends BaseViewer {
       collectionName,
       traceContext
     } = this.props;
-    if (fileState.status === 'error') {
+    if (isErrorFileState(fileState)) {
       return;
     }
     const controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
@@ -121,6 +121,9 @@ export class ImageViewer extends BaseViewer {
       contextId,
       collectionName
     } = this.props;
+    if (isErrorFileState(item)) {
+      return null;
+    }
     const src = contextId ? addFileAttrsToUrl(content.objectUrl, {
       id: item.id,
       contextId,
@@ -130,6 +133,7 @@ export class ImageViewer extends BaseViewer {
       onLoad: this.onLoad,
       onError: this.onImgError,
       src: src,
+      alt: item.name,
       originalBinaryImageSrc: content.originalBinaryImageUrl,
       orientation: content.orientation,
       onClose: onClose

package/dist/es2019/viewers/image/interactive-img.js

@@ -271,7 +271,8 @@ export class InteractiveImgComponent extends React.Component {
       "data-testid": "media-viewer-image",
       canDrag: canDrag,
       isDragging: isDragging,
-      src: srcToDisplay
+      src: srcToDisplay,
+      alt: this.props.alt
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
       style: imgStyle,

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.4.1";
+var packageVersion = "52.4.3";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.4.1";
+var packageVersion = "52.4.3";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/item-viewer.js

@@ -312,9 +312,11 @@ export var ItemViewerBase = function ItemViewerBase(_ref) {
       if (fileItem === 'external-image') {
         // render an external image
         var _ref2 = identifier,
-          dataURI = _ref2.dataURI;
+          dataURI = _ref2.dataURI,
+          name = _ref2.name;
         return /*#__PURE__*/React.createElement(InteractiveImg, {
           src: dataURI,
+          alt: name !== null && name !== void 0 ? name : '',
           onLoad: function onLoad() {
             fireAnalytics(createLoadSucceededEvent({
               fileId: 'external-image'

package/dist/esm/styleWrappers-emotion.js

@@ -612,6 +612,7 @@ export var Img = function Img(_ref25) {
     onLoad = _ref25.onLoad,
     onError = _ref25.onError,
     onMouseDown = _ref25.onMouseDown,
+    alt = _ref25.alt,
     className = _ref25.className;
   var cursor = useMemo(function () {
     if (canDrag && isDragging) {
@@ -623,7 +624,7 @@ export var Img = function Img(_ref25) {
     }
   }, [canDrag, isDragging]);
   return (
-    // eslint-disable-next-line jsx-a11y/alt-text, jsx-a11y/no-noninteractive-element-interactions
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     jsx("img", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className
@@ -633,6 +634,7 @@ export var Img = function Img(_ref25) {
         cursor: cursor,
         shouldPixelate: shouldPixelate
       }),
+      alt: alt,
       "data-testid": datatestId,
       src: src
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

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

@@ -315,6 +315,7 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
           case 'image':
             return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null, /*#__PURE__*/React.createElement(InteractiveImg, {
               src: src,
+              alt: name,
               onLoad: this.onViewerLoad(selectedArchiveEntry),
               onError: this.onViewerError('archiveviewer-imageviewer-onerror', selectedArchiveEntry)
             }));

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

@@ -58,7 +58,7 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _this$props = this.props, fileState = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName, traceContext = _this$props.traceContext;
-              if (!(fileState.status === 'error')) {
+              if (!isErrorFileState(fileState)) {
                 _context.next = 3;
                 break;
               }
@@ -192,6 +192,9 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
         onClose = _this$props2.onClose,
         contextId = _this$props2.contextId,
         collectionName = _this$props2.collectionName;
+      if (isErrorFileState(item)) {
+        return null;
+      }
       var src = contextId ? addFileAttrsToUrl(content.objectUrl, {
         id: item.id,
         contextId: contextId,
@@ -201,6 +204,7 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
         onLoad: this.onLoad,
         onError: this.onImgError,
         src: src,
+        alt: item.name,
         originalBinaryImageSrc: content.originalBinaryImageUrl,
         orientation: content.orientation,
         onClose: onClose

package/dist/esm/viewers/image/interactive-img.js

@@ -275,7 +275,8 @@ export var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
         "data-testid": "media-viewer-image",
         canDrag: canDrag,
         isDragging: isDragging,
-        src: srcToDisplay
+        src: srcToDisplay,
+        alt: this.props.alt
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
         style: imgStyle,

package/dist/types/styleWrappers-emotion.d.ts

@@ -84,8 +84,9 @@ export type ImgProps = {
     onLoad: (ev: React.SyntheticEvent<HTMLImageElement>) => void;
     onMouseDown: (ev: MouseEvent<{}>) => void;
     onError: (() => void) | undefined;
+    alt: string;
 } & DataTestID & ClassName;
-export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, onMouseDown, className, }: ImgProps) => jsx.JSX.Element;
+export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, onMouseDown, alt, className, }: ImgProps) => jsx.JSX.Element;
 export declare const MedatadataTextWrapper: ({ children }: Children) => jsx.JSX.Element;
 export declare const MetadataWrapper: ({ children }: Children) => jsx.JSX.Element;
 type MetadataFileNameProps = DataTestID & Children;

package/dist/types/styleWrappers.d.ts

@@ -79,6 +79,7 @@ export type ImgProps = {
     onLoad: (ev: React.SyntheticEvent<HTMLImageElement>) => void;
     onMouseDown: (ev: MouseEvent<{}>) => void;
     onError: (() => void) | undefined;
+    alt: string;
 } & DataTestID & ClassName;
 export declare const Img: (props: ImgProps) => React.JSX.Element;
 export declare const MedatadataTextWrapper: (props: Children) => React.JSX.Element;

package/dist/types/viewers/image/index.d.ts

@@ -28,7 +28,7 @@ export declare class ImageViewer extends BaseViewer<ImageViewerContent, ImageVie
     protected init(): Promise<void>;
     protected release(): void;
     revokeObjectUrl(objectUrl: string): void;
-    protected renderSuccessful(content: ImageViewerContent): React.JSX.Element;
+    protected renderSuccessful(content: ImageViewerContent): React.JSX.Element | null;
     private onLoad;
     private onImgError;
 }

package/dist/types/viewers/image/interactive-img.d.ts

@@ -5,6 +5,7 @@ import { ZoomLevel } from '../../domain/zoomLevel';
 export declare function zoomLevelAfterResize(newCamera: Camera, oldCamera: Camera, oldZoomLevel: ZoomLevel): ZoomLevel;
 export interface Props extends WithAnalyticsEventsProps {
     src: string;
+    alt: string;
     originalBinaryImageSrc?: string;
     orientation?: number;
     onClose?: () => void;

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

@@ -84,8 +84,9 @@ export type ImgProps = {
     onLoad: (ev: React.SyntheticEvent<HTMLImageElement>) => void;
     onMouseDown: (ev: MouseEvent<{}>) => void;
     onError: (() => void) | undefined;
+    alt: string;
 } & DataTestID & ClassName;
-export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, onMouseDown, className, }: ImgProps) => jsx.JSX.Element;
+export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, onMouseDown, alt, className, }: ImgProps) => jsx.JSX.Element;
 export declare const MedatadataTextWrapper: ({ children }: Children) => jsx.JSX.Element;
 export declare const MetadataWrapper: ({ children }: Children) => jsx.JSX.Element;
 type MetadataFileNameProps = DataTestID & Children;

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

@@ -79,6 +79,7 @@ export type ImgProps = {
     onLoad: (ev: React.SyntheticEvent<HTMLImageElement>) => void;
     onMouseDown: (ev: MouseEvent<{}>) => void;
     onError: (() => void) | undefined;
+    alt: string;
 } & DataTestID & ClassName;
 export declare const Img: (props: ImgProps) => React.JSX.Element;
 export declare const MedatadataTextWrapper: (props: Children) => React.JSX.Element;

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

@@ -28,7 +28,7 @@ export declare class ImageViewer extends BaseViewer<ImageViewerContent, ImageVie
     protected init(): Promise<void>;
     protected release(): void;
     revokeObjectUrl(objectUrl: string): void;
-    protected renderSuccessful(content: ImageViewerContent): React.JSX.Element;
+    protected renderSuccessful(content: ImageViewerContent): React.JSX.Element | null;
     private onLoad;
     private onImgError;
 }

package/dist/types-ts4.5/viewers/image/interactive-img.d.ts

@@ -5,6 +5,7 @@ import { ZoomLevel } from '../../domain/zoomLevel';
 export declare function zoomLevelAfterResize(newCamera: Camera, oldCamera: Camera, oldZoomLevel: ZoomLevel): ZoomLevel;
 export interface Props extends WithAnalyticsEventsProps {
     src: string;
+    alt: string;
     originalBinaryImageSrc?: string;
     orientation?: number;
     onClose?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "52.4.2",
+	"version": "52.4.4",
 	"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/"
@@ -44,12 +44,12 @@
 		"@atlaskit/icon": "^27.2.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
 		"@atlaskit/icon-lab": "^5.1.0",
-		"@atlaskit/media-client": "^34.2.0",
+		"@atlaskit/media-client": "^35.0.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
 		"@atlaskit/media-document-viewer": "^0.3.0",
 		"@atlaskit/media-svg": "^2.1.0",
-		"@atlaskit/media-ui": "^28.5.0",
+		"@atlaskit/media-ui": "^28.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/primitives": "^14.10.0",
@@ -91,7 +91,7 @@
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-state": "^1.7.0",
-		"@atlaskit/media-test-data": "^3.1.0",
+		"@atlaskit/media-test-data": "^3.2.0",
 		"@atlaskit/media-test-helpers": "^37.0.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/toggle": "^15.0.0",