fix: description being used as alternative text for images

.changeset/slick-hats-arrive.md

@@ -0,0 +1,7 @@
+---
+'@rocket.chat/federation-matrix': patch
+'@rocket.chat/core-typings': patch
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where `description` was incorrectly being used as alternative text for image attachments

apps/meteor/app/file-upload/server/methods/sendFileMessage.ts

@@ -73,7 +73,7 @@ export const parseFileIntoMessageAttachments = async (
 		const attachment: FileAttachmentProps = {
 			title: file.name,
 			type: 'file',
-			description: file?.description,
+			image_alt: file?.description,
 			title_link: fileUrl,
 			title_link_download: true,
 			image_url: fileUrl,

apps/meteor/client/components/message/content/attachments/DefaultAttachment.tsx

@@ -98,7 +98,7 @@ const DefaultAttachment = (attachment: DefaultAttachmentProps) => {
 							/>
 						)}
 						{attachment.image_url && (
-							<AttachmentImage {...(attachment.image_dimensions as any)} src={attachment.image_url} alt={attachment.description || ''} />
+							<AttachmentImage {...(attachment.image_dimensions as any)} src={attachment.image_url} alt={attachment.image_alt || ''} />
 						)}
 						{/* DEPRECATED */}
 						{isActionAttachment(attachment) && <ActionAttachment {...attachment} />}

apps/meteor/client/components/message/content/attachments/file/ImageAttachment.tsx

@@ -17,6 +17,7 @@ const ImageAttachment = ({
 		width: 368,
 		height: 368,
 	},
+	image_alt: altText,
 	description,
 	descriptionMd,
 	title_link: link,
@@ -38,7 +39,7 @@ const ImageAttachment = ({
 					src={getURL(url)}
 					previewUrl={`data:image/png;base64,${imagePreview}`}
 					id={id}
-					alt={description}
+					alt={altText}
 				/>
 			</MessageCollapsible>
 		</>

apps/meteor/client/lib/chats/ChatAPI.ts

@@ -122,7 +122,7 @@ export type UploadsAPI = {
 	cancel(id: Upload['id']): void;
 	removeUpload(id: Upload['id']): void;
 	editUploadFileName: (id: Upload['id'], fileName: string) => void;
-	editUploadDescription: (id: Upload['id'], description: string) => void;
+	editUploadAltText: (id: Upload['id'], altText: string) => void;
 	send(file: File, encrypted?: never): Promise<void>;
 	send(file: File, encrypted: EncryptedFileUploadContent): Promise<void>;
 };

apps/meteor/client/lib/chats/Upload.ts

@@ -6,7 +6,7 @@ export type NonEncryptedUpload = {
 	readonly url?: string;
 	readonly percentage: number;
 	readonly error?: Error;
-	readonly description?: string;
+	readonly altText?: string;
 };
 
 export type EncryptedUpload = NonEncryptedUpload & {

apps/meteor/client/lib/chats/flows/processMessageUploads.ts

@@ -59,7 +59,7 @@ const getAttachmentForFile = async (fileToUpload: EncryptedUpload): Promise<File
 		[`${fileType}_size`]: fileToUpload.file.size,
 		...(fileType === 'image' && {
 			image_dimensions: await getHeightAndWidthFromDataUrl(window.URL.createObjectURL(fileToUpload.file)),
-			description: fileToUpload.description,
+			image_alt: fileToUpload.altText,
 		}),
 	};
 };
@@ -123,7 +123,7 @@ async function continueSendingMessage(store: UploadsAPI, message: IMessage) {
 			confirmFilesQueue.push({
 				_id: upload.id,
 				name: upload.file.name,
-				composedMessage: { tmid, msg: currentMsg, fileName: upload.file.name, description: upload.description },
+				composedMessage: { tmid, msg: currentMsg, fileName: upload.file.name, description: upload.altText || undefined },
 			});
 			continue;
 		}

apps/meteor/client/lib/chats/uploads.ts

@@ -63,7 +63,7 @@ class UploadsStore extends Emitter<{ update: void; [x: `cancelling-${Upload['id'
 		}
 	};
 
-	editUploadDescription = (uploadId: Upload['id'], description: string) => {
+	editUploadAltText = (uploadId: Upload['id'], altText: string) => {
 		this.set(
 			this.uploads.map((upload) => {
 				if (upload.id !== uploadId) {
@@ -72,9 +72,9 @@ class UploadsStore extends Emitter<{ update: void; [x: `cancelling-${Upload['id'
 
 				return {
 					...upload,
-					description,
+					altText,
 					...(isEncryptedUpload(upload) && {
-						metadataForEncryption: { ...upload.metadataForEncryption, description },
+						metadataForEncryption: { ...upload.metadataForEncryption, altText },
 					}),
 				};
 			}),

apps/meteor/client/views/room/composer/messageBox/MessageComposerFileItem.tsx

@@ -7,7 +7,7 @@ import { isPreviewableImage } from '../../../../lib/utils/isPreviewableImage';
 export type MessageComposerFileItemProps = {
 	upload: Upload;
 	onRemove: (id: string) => void;
-	onEdit: (id: Upload['id'], fileName: string, description?: string) => void;
+	onEdit: (id: Upload['id'], fileName: string, altText?: string) => void;
 	onCancel: (id: Upload['id']) => void;
 	disabled: boolean;
 	shouldPreview?: boolean;

apps/meteor/client/views/room/composer/messageBox/MessageComposerFiles.tsx

@@ -11,10 +11,10 @@ const MessageComposerFiles = () => {
 	const { uploads, uploadsStore, isProcessingUploads, hasUploads } = useFileUpload();
 
 	const handleEdit = useCallback(
-		(id: Upload['id'], fileName: string, description?: string) => {
+		(id: Upload['id'], fileName: string, altText?: string) => {
 			uploadsStore?.editUploadFileName(id, fileName);
-			if (description !== undefined) {
-				uploadsStore?.editUploadDescription(id, description);
+			if (altText !== undefined) {
+				uploadsStore?.editUploadAltText(id, altText);
 			}
 		},
 		[uploadsStore],

apps/meteor/client/views/room/composer/messageBox/MessageComposerGenericFile.tsx

@@ -39,13 +39,13 @@ const MessageComposerGenericFile = ({
 
 		setModal(
 			<FileUploadModal
-				onSubmit={(name, description) => {
-					onEdit(upload.id, name, description);
+				onSubmit={(name, altText) => {
+					onEdit(upload.id, name, altText);
 					setModal(null);
 					chat?.composer?.focus();
 				}}
 				fileName={upload.file.name}
-				fileDescription={upload.description}
+				fileAltText={upload.altText}
 				file={upload.file}
 				onClose={() => setModal(null)}
 			/>,
@@ -86,7 +86,7 @@ const MessageComposerGenericFile = ({
 			fileTitle={upload.file.name}
 			fileSubtitle={`${fileSize} - ${fileExtension}`}
 			previewUrl={shouldPreview ? previewUrl : undefined}
-			alt={upload.description}
+			alt={upload.altText}
 			fileFormat={getFileExtension(upload.file.name)}
 			showPreview={shouldPreview}
 			actionIcon={actionIcon}

apps/meteor/client/views/room/modals/FileUploadModal/FilePreview.tsx

@@ -39,14 +39,14 @@ const shouldShowMediaPreview = (file: File, fileType: FilePreviewType | undefine
 
 type FilePreviewProps = {
 	file: File;
-	description?: string;
+	altText?: string;
 };
 
-const FilePreview = ({ file, description }: FilePreviewProps) => {
+const FilePreview = ({ file, altText }: FilePreviewProps) => {
 	const fileType = getFileType(file.type);
 
 	if (shouldShowMediaPreview(file, fileType)) {
-		return <MediaPreview file={file} fileType={fileType as FilePreviewType} description={description} />;
+		return <MediaPreview file={file} fileType={fileType as FilePreviewType} altText={altText} />;
 	}
 
 	return <GenericPreview file={file} />;

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx

@@ -30,13 +30,13 @@ import { getMimeTypeFromFileName } from '../../../../../app/utils/lib/mimeTypes'
 
 type FileUploadModalProps = {
 	onClose: () => void;
-	onSubmit: (name: string, description?: string) => void;
+	onSubmit: (name: string, altText?: string) => void;
 	file: File;
 	fileName: string;
-	fileDescription?: string;
+	fileAltText?: string;
 };
 
-const FileUploadModal = ({ onClose, file, fileName, fileDescription = '', onSubmit }: FileUploadModalProps) => {
+const FileUploadModal = ({ onClose, file, fileName, fileAltText = '', onSubmit }: FileUploadModalProps) => {
 	const { t } = useTranslation();
 	const fileUploadFormId = useId();
 	const isImage = file.type.startsWith('image/');
@@ -45,7 +45,7 @@ const FileUploadModal = ({ onClose, file, fileName, fileDescription = '', onSubm
 		control,
 		handleSubmit,
 		formState: { errors, isDirty, isSubmitting },
-	} = useForm({ mode: 'onBlur', defaultValues: { name: fileName, description: fileDescription } });
+	} = useForm({ mode: 'onBlur', defaultValues: { name: fileName, altText: fileAltText } });
 
 	const validateFileName = useCallback(
 		(fieldValue: string) => {
@@ -63,12 +63,7 @@ const FileUploadModal = ({ onClose, file, fileName, fileDescription = '', onSubm
 		<Modal
 			aria-labelledby={`${fileUploadFormId}-title`}
 			wrapperFunction={(props: ComponentProps<typeof Box>) => (
-				<Box
-					is='form'
-					id={fileUploadFormId}
-					onSubmit={handleSubmit(({ name, description }) => onSubmit(name, description?.trim() || undefined))}
-					{...props}
-				/>
+				<Box is='form' id={fileUploadFormId} onSubmit={handleSubmit(({ name, altText }) => onSubmit(name, altText?.trim()))} {...props} />
 			)}
 		>
 			<Box display='flex' flexDirection='column' height='100%'>
@@ -78,7 +73,7 @@ const FileUploadModal = ({ onClose, file, fileName, fileDescription = '', onSubm
 				</ModalHeader>
 				<ModalContent>
 					<Box display='flex' maxHeight='x360' w='full' justifyContent='center' alignContent='center' mbe={16}>
-						<FilePreview file={file} description={fileDescription} />
+						<FilePreview file={file} altText={fileAltText} />
 					</Box>
 					<FieldGroup>
 						<Field>
@@ -101,7 +96,7 @@ const FileUploadModal = ({ onClose, file, fileName, fileDescription = '', onSubm
 								<FieldLabel>{t('Alternative_text')}</FieldLabel>
 								<FieldDescription>{t('Alt_text_description')}</FieldDescription>
 								<FieldRow>
-									<Controller name='description' control={control} render={({ field }) => <TextAreaInput {...field} />} />
+									<Controller name='altText' control={control} render={({ field }) => <TextAreaInput {...field} />} />
 								</FieldRow>
 							</Field>
 						)}

apps/meteor/client/views/room/modals/FileUploadModal/ImagePreview.tsx

@@ -7,10 +7,10 @@ import PreviewSkeleton from './PreviewSkeleton';
 type ImagePreviewProps = {
 	url: string;
 	file: File;
-	alt?: string;
+	altText?: string;
 };
 
-const ImagePreview = ({ url, file, alt = '' }: ImagePreviewProps) => {
+const ImagePreview = ({ url, file, altText = '' }: ImagePreviewProps) => {
 	const [error, setError] = useState(false);
 	const [loading, setLoading] = useState(true);
 
@@ -30,7 +30,7 @@ const ImagePreview = ({ url, file, alt = '' }: ImagePreviewProps) => {
 			<Box
 				is='img'
 				src={url}
-				alt={alt}
+				alt={altText}
 				maxWidth='full'
 				objectFit='contain'
 				onLoad={handleLoad}

apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx

@@ -11,10 +11,10 @@ import { useFileAsDataURL } from '../../hooks/useFileAsDataURL';
 type MediaPreviewProps = {
 	file: File;
 	fileType: FilePreviewType;
-	description?: string;
+	altText?: string;
 };
 
-const MediaPreview = ({ file, fileType, description }: MediaPreviewProps) => {
+const MediaPreview = ({ file, fileType, altText }: MediaPreviewProps) => {
 	const [loaded, url] = useFileAsDataURL(file);
 	const { t } = useTranslation();
 
@@ -32,7 +32,7 @@ const MediaPreview = ({ file, fileType, description }: MediaPreviewProps) => {
 	}
 
 	if (fileType === FilePreviewType.IMAGE) {
-		return <ImagePreview url={url} file={file} alt={description} />;
+		return <ImagePreview url={url} file={file} altText={altText} />;
 	}
 
 	if (fileType === FilePreviewType.VIDEO) {

apps/meteor/tests/end-to-end/api/rooms.ts

@@ -641,7 +641,7 @@ describe('[Rooms]', () => {
 					expect(res.body.message.files).to.be.an('array').of.length(2);
 					expect(res.body.message.files[0]).to.have.property('type', 'image/png');
 					expect(res.body.message.files[0]).to.have.property('name', '1024x1024.png');
-					expect(res.body.message.attachments[0]).to.have.property('description', 'some_file_description');
+					expect(res.body.message.attachments[0]).to.have.property('image_alt', 'some_file_description');
 				});
 		});
 

ee/packages/federation-matrix/tests/end-to-end/messaging.spec.ts

@@ -758,7 +758,7 @@ import { SynapseClient } from '../helper/synapse-client';
 						expect(rcMessage?.attachments?.[0]?.title_link).toMatch(/^\/file-upload\/[^/]+\/.+$/);
 						expect(rcMessage?.attachments?.[0]?.title_link_download).toBe(true);
 						expect((rcMessage?.attachments?.[0] as any)?.type).toBe('file');
-						expect(rcMessage?.attachments?.[0]?.description).toBe(fileInfo.description);
+						expect((rcMessage?.attachments?.[0] as any)?.image_alt).toBe(fileInfo.description);
 						expect((rcMessage?.attachments?.[0] as any)?.image_url).toMatch(/^\/file-upload\/[^/]+\/.+$/);
 						expect((rcMessage?.attachments?.[0] as any)?.image_type).toBe('image/webp');
 						expect((rcMessage?.attachments?.[0] as any)?.image_size).toBe(uploadResponse.message.files?.[0]?.size);

packages/core-typings/src/IMessage/MessageAttachment/Files/ImageAttachmentProps.ts

@@ -11,6 +11,8 @@ export type ImageAttachmentProps = {
 	image_url: string;
 	image_type?: string;
 	image_size?: number;
+	/** Accessibility alternative text for the image. Kept separate from `description` so it is not rendered as a visible caption. */
+	image_alt?: string;
 	file?: FileProp;
 } & MessageAttachmentBase;
 

packages/core-typings/src/IMessage/MessageAttachment/MessageAttachmentDefault.ts

@@ -20,6 +20,8 @@ export type MessageAttachmentDefault = {
 	// footer_icon
 
 	image_url?: string;
+	/** Accessibility alternative text for the image. Kept separate from `description` so it is not rendered as a visible caption. */
+	image_alt?: string;
 	image_dimensions?: {
 		width: number;
 		height: number;