Fix: Add fallback name for attachments lacking the original filename

src/components/ImageView/index.js

@@ -5,6 +5,7 @@ import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Image from '@components/Image';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import CONST from '@src/CONST';
@@ -21,14 +22,15 @@ const propTypes = {
     url: PropTypes.string.isRequired,
 
     /** image file name */
-    fileName: PropTypes.string.isRequired,
+    fileName: PropTypes.string,
 
     onError: PropTypes.func,
 };
 
 const defaultProps = {
     isAuthTokenRequired: false,
     onError: () => {},
+    fileName: '',
 };
 
 function ImageView({isAuthTokenRequired, url, fileName, onError}) {
@@ -49,6 +51,7 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) {
 
     const scrollableRef = useRef(null);
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
+    const accessibilityLabel = fileName || FileUtils.getAttachmentName(url);
 
     /**
      * @param {Number} newContainerWidth
@@ -263,7 +266,7 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) {
                 onPressIn={onContainerPressIn}
                 onPress={onContainerPress}
                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGE}
-                accessibilityLabel={fileName}
+                accessibilityLabel={accessibilityLabel}
             >
                 <Image
                     source={{uri: url}}