Merge pull request #47762 from bernhardoj/fix/46491-autolink-before-i…

…mg-tag

package.json

@@ -112,7 +112,7 @@
     "date-fns-tz": "^2.0.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "2.0.72",
+    "expensify-common": "2.0.76",
     "expo": "^50.0.3",
     "expo-av": "~13.10.4",
     "expo-image": "1.11.0",

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx

@@ -57,6 +57,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
     const previewSource = tryResolveUrlFromApiRoot(htmlAttribs.src);
     const source = tryResolveUrlFromApiRoot(isAttachmentOrReceipt ? attachmentSourceAttribute : htmlAttribs.src);
 
+    const alt = htmlAttribs.alt;
     const imageWidth = (htmlAttribs['data-expensify-width'] && parseInt(htmlAttribs['data-expensify-width'], 10)) || undefined;
     const imageHeight = (htmlAttribs['data-expensify-height'] && parseInt(htmlAttribs['data-expensify-height'], 10)) || undefined;
     const imagePreviewModalDisabled = htmlAttribs['data-expensify-preview-modal-disabled'] === 'true';
@@ -71,6 +72,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
             fallbackIcon={fallbackIcon}
             imageWidth={imageWidth}
             imageHeight={imageHeight}
+            altText={alt}
         />
     );
 

src/components/ImageWithSizeCalculation.tsx

@@ -25,6 +25,9 @@ type ImageWithSizeCalculationProps = {
     /** Url for image to display */
     url: string | ImageSourcePropType;
 
+    /** alt text for the image */
+    altText?: string;
+
     /** Any additional styles to apply */
     style?: StyleProp<ViewStyle>;
 
@@ -46,7 +49,7 @@ type ImageWithSizeCalculationProps = {
  * performing some calculation on a network image after fetching dimensions so
  * it can be appropriately resized.
  */
-function ImageWithSizeCalculation({url, style, onMeasure, onLoadFailure, isAuthTokenRequired, objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL}: ImageWithSizeCalculationProps) {
+function ImageWithSizeCalculation({url, altText, style, onMeasure, onLoadFailure, isAuthTokenRequired, objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL}: ImageWithSizeCalculationProps) {
     const styles = useThemeStyles();
     const isLoadedRef = useRef<boolean | null>(null);
     const [isImageCached, setIsImageCached] = useState(true);
@@ -97,6 +100,7 @@ function ImageWithSizeCalculation({url, style, onMeasure, onLoadFailure, isAuthT
             <Image
                 style={[styles.w100, styles.h100]}
                 source={source}
+                aria-label={altText}
                 isAuthTokenRequired={isAuthTokenRequired}
                 resizeMode={RESIZE_MODES.cover}
                 onLoadStart={() => {

src/components/ThumbnailImage.tsx

@@ -23,6 +23,9 @@ type ThumbnailImageProps = {
     /** Source URL for the preview image */
     previewSourceURL: string | ImageSourcePropType;
 
+    /** alt text for the image */
+    altText?: string;
+
     /** Any additional styles to apply */
     style?: StyleProp<ViewStyle>;
 
@@ -61,6 +64,7 @@ type UpdateImageSizeParams = {
 
 function ThumbnailImage({
     previewSourceURL,
+    altText,
     style,
     isAuthTokenRequired,
     imageWidth = 200,
@@ -132,6 +136,7 @@ function ThumbnailImage({
             <View style={[...sizeStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={previewSourceURL}
+                    altText={altText}
                     onMeasure={updateImageSize}
                     onLoadFailure={() => setFailedToLoad(true)}
                     isAuthTokenRequired={isAuthTokenRequired}