Profile redesign: Add alt to avatar and header (#38532)

app/javascript/mastodon/api_types/accounts.ts

@@ -37,6 +37,7 @@ export interface BaseApiAccountJSON {
   acct: string;
   avatar: string;
   avatar_static: string;
+  avatar_description: string;
   bot: boolean;
   created_at: string;
   discoverable?: boolean;
@@ -50,6 +51,7 @@ export interface BaseApiAccountJSON {
   group: boolean;
   header: string;
   header_static: string;
+  header_description: string;
   id: string;
   last_status_at: string;
   locked: boolean;

app/javascript/mastodon/components/avatar.tsx

@@ -13,6 +13,7 @@ interface Props {
   account:
     | Pick<Account, 'id' | 'acct' | 'avatar' | 'avatar_static'>
     | undefined; // FIXME: remove `undefined` once we know for sure its always there
+  alt?: string;
   size?: number;
   style?: React.CSSProperties;
   inline?: boolean;
@@ -25,6 +26,7 @@ interface Props {
 
 export const Avatar: React.FC<Props> = ({
   account,
+  alt = '',
   animate = autoPlayGif,
   size = 20,
   inline = false,
@@ -65,7 +67,7 @@ export const Avatar: React.FC<Props> = ({
       style={style}
     >
       {src && !error && (
-        <img src={src} alt='' onLoad={handleLoad} onError={handleError} />
+        <img src={src} alt={alt} onLoad={handleLoad} onError={handleError} />
       )}
 
       {counter && (

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -72,7 +72,7 @@ export const AccountHeader: React.FC<{
           modalType: 'IMAGE',
           modalProps: {
             src: account.avatar,
-            alt: '',
+            alt: account.avatar_description,
           },
         }),
       );
@@ -120,7 +120,7 @@ export const AccountHeader: React.FC<{
           {!suspendedOrHidden && (
             <img
               src={autoPlayGif ? account.header : account.header_static}
-              alt=''
+              alt={account.header_description}
               className='parallax'
             />
           )}
@@ -147,6 +147,7 @@ export const AccountHeader: React.FC<{
             >
               <Avatar
                 account={suspendedOrHidden ? undefined : account}
+                alt={account.avatar_description}
                 size={80}
               />
             </a>

app/javascript/mastodon/models/account.ts

@@ -62,6 +62,7 @@ export const accountDefaultValues: AccountShape = {
   acct: '',
   avatar: '',
   avatar_static: '',
+  avatar_description: '',
   bot: false,
   created_at: '',
   discoverable: false,
@@ -78,6 +79,7 @@ export const accountDefaultValues: AccountShape = {
   group: false,
   header: '',
   header_static: '',
+  header_description: '',
   id: '',
   last_status_at: '',
   locked: false,

app/javascript/testing/factories.ts

@@ -25,6 +25,7 @@ export const accountFactory: FactoryFunction<ApiAccountJSON> = ({
   acct: 'testuser',
   avatar: '/avatars/original/missing.png',
   avatar_static: '/avatars/original/missing.png',
+  avatar_description: '',
   username: 'testuser',
   display_name: 'Test User',
   bot: false,
@@ -42,6 +43,7 @@ export const accountFactory: FactoryFunction<ApiAccountJSON> = ({
   group: false,
   header: '/header.png',
   header_static: '/header_static.png',
+  header_description: '',
   indexable: true,
   last_status_at: '2023-01-01',
   locked: false,