From 0d25bd9a166162da4f915b0fabe940ebc3168096 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 30 Jun 2025 12:17:55 +0200
Subject: [PATCH] pl-fe: do not display avatar alt in most places
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/account.tsx            |  8 ++++----
 packages/pl-fe/src/components/avatar-stack.tsx       |  1 +
 packages/pl-fe/src/components/preview-card.tsx       |  2 +-
 packages/pl-fe/src/components/ui/avatar.tsx          | 12 +++++++++++-
 .../pl-fe/src/features/account/components/header.tsx |  2 ++
 .../pl-fe/src/features/admin/components/report.tsx   |  1 +
 .../src/features/chats/components/chat-list-item.tsx |  1 +
 .../features/chats/components/chat-message-list.tsx  |  2 +-
 .../chat-page/components/chat-page-main.tsx          |  4 ++--
 .../chats/components/chat-search/results.tsx         |  2 +-
 .../chats/components/chat-widget/chat-settings.tsx   |  2 +-
 .../chats/components/chat-widget/chat-window.tsx     |  2 +-
 .../chats/components/shoutbox-message-list.tsx       |  2 ++
 .../src/features/ui/components/panels/user-panel.tsx |  2 ++
 packages/pl-fe/src/layouts/home-layout.tsx           |  2 +-
 packages/pl-fe/src/pages/account-lists/directory.tsx |  1 +
 packages/pl-fe/src/pages/fun/circle.tsx              |  2 +-
 17 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx
index baf57e04f..5049782fa 100644
--- a/packages/pl-fe/src/components/account.tsx
+++ b/packages/pl-fe/src/components/account.tsx
@@ -225,10 +225,10 @@ const Account = ({
       <HStack alignItems={actionAlignment} space={3} justifyContent='between'>
         <HStack alignItems='center' space={3} className='max-w-full'>
           {disableUserProvidedMedia ? (
-            <Avatar src={account.avatar} alt={account.avatar_description} />
+            <Avatar src={account.avatar} alt={account.avatar_description} username={account.username} />
           ) : (
             <div className='rounded-lg'>
-              <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} isCat={account.is_cat} />
+              <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} isCat={account.is_cat} username={account.username} />
               {emoji && (
                 <Emoji
                   className='!absolute -right-1.5 bottom-0 size-5'
@@ -280,14 +280,14 @@ const Account = ({
       <HStack alignItems={actionAlignment} space={3} justifyContent='between'>
         <HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3} className='max-w-full'>
           {withAvatar && (disableUserProvidedMedia ? (
-            <Avatar src={account.avatar} alt={account.avatar_description} />
+            <Avatar src={account.avatar} alt={account.avatar_description} username={account.username} />
           ) : (
             <ProfilePopper
               condition={showAccountHoverCard}
               wrapper={(children) => <HoverAccountWrapper className='relative' accountId={account.id} element='span'>{children}</HoverAccountWrapper>}
             >
               <LinkEl className='rounded-lg' {...linkProps}>
-                <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} isCat={account.is_cat} />
+                <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} isCat={account.is_cat} username={account.username} />
                 {emoji && (
                   <Emoji
                     className='!absolute -right-1.5 bottom-0 size-5'
diff --git a/packages/pl-fe/src/components/avatar-stack.tsx b/packages/pl-fe/src/components/avatar-stack.tsx
index 7c41bf98c..94421fb10 100644
--- a/packages/pl-fe/src/components/avatar-stack.tsx
+++ b/packages/pl-fe/src/components/avatar-stack.tsx
@@ -28,6 +28,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
             alt={account.avatar_description}
             size={20}
             isCat={account.is_cat}
+            username={account.username}
           />
         </div>
       ))}
diff --git a/packages/pl-fe/src/components/preview-card.tsx b/packages/pl-fe/src/components/preview-card.tsx
index 365f794b3..79966ab15 100644
--- a/packages/pl-fe/src/components/preview-card.tsx
+++ b/packages/pl-fe/src/components/preview-card.tsx
@@ -271,7 +271,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                     <Link to={`/@${author.account?.acct}`}>
                       <HStack space={1} alignItems='center'>
                         {author.account && (
-                          <Avatar src={author.account?.avatar} size={16} />
+                          <Avatar src={author.account?.avatar} size={16} username={author.account.username} />
                         )}
                         <Text weight='medium'>
                           <Emojify text={author.account?.display_name || author.name} emojis={author.account?.emojis} />
diff --git a/packages/pl-fe/src/components/ui/avatar.tsx b/packages/pl-fe/src/components/ui/avatar.tsx
index 45f48f0a0..3fbd12486 100644
--- a/packages/pl-fe/src/components/ui/avatar.tsx
+++ b/packages/pl-fe/src/components/ui/avatar.tsx
@@ -20,6 +20,8 @@ const AVATAR_SIZE = 42;
 
 const messages = defineMessages({
   avatar: { id: 'account.avatar.alt', defaultMessage: 'Avatar' },
+  avatar_with_username: { id: 'account.avatar.with_username', defaultMessage: 'Avatar for {username}' },
+  avatar_with_content: { id: 'account.avatar.with_content', defaultMessage: 'Avatar for {username}: {alt}' },
 });
 
 interface IAvatar extends Pick<IStillImage, 'alt' | 'src' | 'onError' | 'className'> {
@@ -27,6 +29,8 @@ interface IAvatar extends Pick<IStillImage, 'alt' | 'src' | 'onError' | 'classNa
   size?: number;
   /** Whether the user is a cat. */
   isCat?: boolean;
+  username?: string;
+  showAlt?: boolean;
 }
 
 const fac = new FastAverageColor();
@@ -108,13 +112,19 @@ const Avatar = (props: IAvatar) => {
     );
   }
 
+  const altText = props.showAlt && alt
+    ? intl.formatMessage(messages.avatar_with_content, { username: props.username, alt })
+    : props.username
+      ? intl.formatMessage(messages.avatar_with_username, { username: props.username })
+      : intl.formatMessage(messages.avatar);
+
   return (
     <StillImage
       className={clsx('rounded-lg leading-[0]', isCat && 'avatar__cat bg-gray-200 dark:bg-gray-900', className)}
       innerClassName='rounded-lg text-sm'
       style={style}
       src={src}
-      alt={alt || intl.formatMessage(messages.avatar)}
+      alt={altText}
       onError={handleLoadFailure}
     />
   );
diff --git a/packages/pl-fe/src/features/account/components/header.tsx b/packages/pl-fe/src/features/account/components/header.tsx
index 150e1ed70..1cf0ea9d6 100644
--- a/packages/pl-fe/src/features/account/components/header.tsx
+++ b/packages/pl-fe/src/features/account/components/header.tsx
@@ -741,6 +741,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
                 size={96}
                 className='relative size-24 rounded-lg bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
                 isCat={account.is_cat}
+                username={account.username}
+                showAlt
               />
             </a>
             {account.verified && (
diff --git a/packages/pl-fe/src/features/admin/components/report.tsx b/packages/pl-fe/src/features/admin/components/report.tsx
index 166ed1810..d94b0785e 100644
--- a/packages/pl-fe/src/features/admin/components/report.tsx
+++ b/packages/pl-fe/src/features/admin/components/report.tsx
@@ -91,6 +91,7 @@ const Report: React.FC<IReport> = ({ id }) => {
             alt={targetAccount.avatar_description}
             size={32}
             isCat={targetAccount.is_cat}
+            username={targetAccount.username}
           />
         </HoverAccountWrapper>
       </Link>
diff --git a/packages/pl-fe/src/features/chats/components/chat-list-item.tsx b/packages/pl-fe/src/features/chats/components/chat-list-item.tsx
index 30be45ba5..8f122497f 100644
--- a/packages/pl-fe/src/features/chats/components/chat-list-item.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-list-item.tsx
@@ -95,6 +95,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
             size={40}
             className='flex-none'
             isCat={chat.account.is_cat}
+            username={chat.account.username}
           />
 
           <Stack alignItems='start' className='overflow-hidden'>
diff --git a/packages/pl-fe/src/features/chats/components/chat-message-list.tsx b/packages/pl-fe/src/features/chats/components/chat-message-list.tsx
index 9ca0e3e89..480a724f0 100644
--- a/packages/pl-fe/src/features/chats/components/chat-message-list.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-message-list.tsx
@@ -186,7 +186,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
     return (
       <Stack alignItems='center' justifyContent='center' className='h-full grow'>
         <Stack alignItems='center' space={2}>
-          <Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={75} isCat={chat.account.is_cat} />
+          <Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={75} isCat={chat.account.is_cat} username={chat.account.username} />
           <Text align='center'>
             <>
               <Text tag='span'>{intl.formatMessage(messages.blockedBy)}</Text>
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
index 776bcab1e..47796d66b 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -137,7 +137,7 @@ const ChatPageMain = () => {
             />
 
             <Link to={`/@${chat.account.acct}`}>
-              <Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={40} className='flex-none' isCat={chat.account.is_cat} />
+              <Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={40} className='flex-none' isCat={chat.account.is_cat} username={chat.account.username} />
             </Link>
           </HStack>
 
@@ -157,7 +157,7 @@ const ChatPageMain = () => {
           src={require('@tabler/icons/outline/info-circle.svg')}
           component={() => (
             <HStack className='px-4 py-2' alignItems='center' space={3}>
-              <Avatar src={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} />
+              <Avatar src={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} username={chat.account.username} />
               <Stack>
                 <Text weight='semibold'>{chat.account.display_name}</Text>
                 <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
diff --git a/packages/pl-fe/src/features/chats/components/chat-search/results.tsx b/packages/pl-fe/src/features/chats/components/chat-search/results.tsx
index e1f8b32e4..b4f0fddcb 100644
--- a/packages/pl-fe/src/features/chats/components/chat-search/results.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-search/results.tsx
@@ -41,7 +41,7 @@ const Results = ({ accountSearchResult, onSelect, parentRef }: IResults) => {
       data-testid='account'
     >
       <HStack alignItems='center' space={2}>
-        <Avatar src={account.avatar} alt={account.avatar_description} size={40} isCat={account.is_cat} />
+        <Avatar src={account.avatar} alt={account.avatar_description} size={40} isCat={account.is_cat} username={account.username} />
 
         <Stack alignItems='start'>
           <div className='flex grow items-center space-x-1'>
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
index d28169b5e..2c378e3f0 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -113,7 +113,7 @@ const ChatSettings = () => {
 
       <Stack space={4} className='mx-auto w-5/6'>
         <HStack alignItems='center' space={3}>
-          <Avatar src={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} />
+          <Avatar src={chat.account.avatar_static} alt={chat.account.avatar_description} size={50} isCat={chat.account.is_cat} username={chat.account.username} />
           <Stack>
             <Text weight='semibold'>{chat.account.display_name}</Text>
             <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
index 93434b498..6641cbbe5 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
@@ -70,7 +70,7 @@ const ChatWindow = () => {
             <HStack alignItems='center' space={3}>
               {isOpen && (
                 <Link to={`/@${chat.account.acct}`}>
-                  <Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={40} isCat={chat.account.is_cat} />
+                  <Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={40} isCat={chat.account.is_cat} username={chat.account.username} />
                 </Link>
               )}
 
diff --git a/packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx b/packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx
index 015180f6d..21df8d49e 100644
--- a/packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx
+++ b/packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx
@@ -47,6 +47,8 @@ const ShoutboxMessage: React.FC<IShoutboxMessage> = ({ message, isMyMessage }) =
                 src={account.avatar}
                 alt={account.avatar_description}
                 size={32}
+                isCat={account.is_cat}
+                username={account.username}
               />
             </HoverAccountWrapper>
           </Link>
diff --git a/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
index 90a97aba5..a2756f68e 100644
--- a/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
@@ -57,6 +57,8 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
                   src={account.avatar}
                   alt={account.avatar_description}
                   isCat={account.is_cat}
+                  username={account.username}
+                  showAlt
                   size={80}
                   className='size-20 bg-gray-50 ring-2 ring-white'
                 />
diff --git a/packages/pl-fe/src/layouts/home-layout.tsx b/packages/pl-fe/src/layouts/home-layout.tsx
index 2848a739a..17b4b2a31 100644
--- a/packages/pl-fe/src/layouts/home-layout.tsx
+++ b/packages/pl-fe/src/layouts/home-layout.tsx
@@ -73,7 +73,7 @@ const HomeLayout: React.FC<IHomeLayout> = ({ children }) => {
               <HStack alignItems='start' space={2}>
                 {!disableUserProvidedMedia && (
                   <Link to={`/@${acct}`}>
-                    <Avatar src={avatar} alt={account?.avatar_description} isCat={account?.is_cat} size={42} />
+                    <Avatar src={avatar} alt={account?.avatar_description} isCat={account?.is_cat} size={42} username={account?.username} />
                   </Link>
                 )}
 
diff --git a/packages/pl-fe/src/pages/account-lists/directory.tsx b/packages/pl-fe/src/pages/account-lists/directory.tsx
index 2b95cdeca..23e192d07 100644
--- a/packages/pl-fe/src/pages/account-lists/directory.tsx
+++ b/packages/pl-fe/src/pages/account-lists/directory.tsx
@@ -76,6 +76,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
               className='!absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900'
               size={64}
               isCat={account.is_cat}
+              username={account.username}
             />
           </HoverAccountWrapper>
         </Link>
diff --git a/packages/pl-fe/src/pages/fun/circle.tsx b/packages/pl-fe/src/pages/fun/circle.tsx
index 3c20f0006..c2c68716c 100644
--- a/packages/pl-fe/src/pages/fun/circle.tsx
+++ b/packages/pl-fe/src/pages/fun/circle.tsx
@@ -210,7 +210,7 @@ const CirclePage: React.FC = () => {
               {users?.map(user => (
                 <Link key={user.id} to={`/@${user.acct}`}>
                   <HStack space={2} alignItems='center'>
-                    <Avatar size={20} src={user.avatar!} alt={user.avatar_description} />
+                    <Avatar size={20} src={user.avatar!} alt={user.avatar_description} username={user.acct} />
                     <Text size='sm' weight='semibold' truncate>
                       {user.acct}
                     </Text>