diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/__snapshots__/file_preview_modal_info.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/__snapshots__/file_preview_modal_info.test.tsx.snap index 11720f72859..e9016ef8cfd 100644 --- a/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/__snapshots__/file_preview_modal_info.test.tsx.snap +++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal_info/__snapshots__/file_preview_modal_info.test.tsx.snap @@ -5,6 +5,7 @@ exports[`components/FilePreviewModalInfo should match snapshot 1`] = ` className="file-preview-modal__info" > = (props: Props) => { username={user?.username} url={imageURLForUser(props.post.user_id, user?.last_picture_update)} className='file-preview-modal__avatar' + alt='' /> } diff --git a/webapp/channels/src/components/widgets/users/avatar/avatar.tsx b/webapp/channels/src/components/widgets/users/avatar/avatar.tsx index d784c1f3ce3..3223da8ab04 100644 --- a/webapp/channels/src/components/widgets/users/avatar/avatar.tsx +++ b/webapp/channels/src/components/widgets/users/avatar/avatar.tsx @@ -43,6 +43,14 @@ type Props = { username?: string; size?: TAvatarSizeToken; text?: string; + + /** + * Override the default alt text for the image. + * + * If this Avatar is accompanied in the DOM by the user's name, this should be set to the empty string to prevent + * screen readers from repeating the user's name multiple times. + */ + alt?: string; }; type Attrs = HTMLAttributes; @@ -55,6 +63,7 @@ const Avatar = forwardRef(({ username, size = 'md', text, + alt, ...attrs }, ref) => { const {formatMessage} = useIntl(); @@ -85,7 +94,7 @@ const Avatar = forwardRef(({ {...attrs} ref={ref as RefObject} className={classes} - alt={formatMessage({id: 'avatar.alt', defaultMessage: '{username} profile image'}, { + alt={alt ?? formatMessage({id: 'avatar.alt', defaultMessage: '{username} profile image'}, { username: username || 'user', })} src={url}