[Glitch] Profile redesign: Add alt to avatar and header

Port 59299c69ffce78bd4f2207ed3a7eb9484bd042a8 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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/flavours/glitch/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,
@@ -66,7 +68,7 @@ export const Avatar: React.FC<Props> = ({
       data-avatar-of={account && `@${account.acct}`}
     >
       {src && !error && (
-        <img src={src} alt='' onLoad={handleLoad} onError={handleError} />
+        <img src={src} alt={alt} onLoad={handleLoad} onError={handleError} />
       )}
 
       {counter && (

app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx

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

app/javascript/flavours/glitch/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,