GoToSocial: support avatar/header descriptions, RSS fields

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/account.tsx

@@ -196,7 +196,7 @@ const Account = ({
       <HStack alignItems={actionAlignment} space={3} justifyContent='between'>
         <HStack alignItems='center' space={3} className='overflow-hidden'>
           <div className='rounded-full'>
-            <Avatar src={account.avatar} size={avatarSize} />
+            <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} />
             {emoji && (
               <Emoji
                 className='absolute -right-1.5 bottom-0 h-5 w-5'
@@ -251,7 +251,7 @@ const Account = ({
               wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
             >
               <LinkEl className='rounded-full' {...linkProps}>
-                <Avatar src={account.avatar} size={avatarSize} />
+                <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} />
                 {emoji && (
                   <Emoji
                     className='absolute -right-1.5 bottom-0 h-5 w-5'

src/components/alt-indicator.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Icon } from './ui';
+
+interface IAltIndicator extends Pick<React.HTMLAttributes<HTMLSpanElement>, 'title' | 'className'> {
+  warning?: boolean;
+}
+
+const AltIndicator: React.FC<IAltIndicator> = ({ className, warning, ...props }) => (
+  <span
+    className={clsx('inline-flex items-center gap-1 rounded bg-gray-900 px-2 py-1 text-xs font-medium uppercase text-white', className)}
+    {...props}
+  >
+    {warning && <Icon className='h-4 w-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />}
+    <FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />
+  </span>
+);
+
+export default AltIndicator;

src/components/avatar-stack.tsx

@@ -29,6 +29,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
           <Avatar
             className='ring-1 ring-white dark:ring-primary-900'
             src={account.avatar}
+            alt={account.avatar_description}
             size={20}
           />
         </div>

src/components/groups/group-avatar.tsx

@@ -29,6 +29,7 @@ const GroupAvatar = (props: IGroupAvatar) => {
         })
       }
       src={group.avatar}
+      alt={group.avatar_description}
       size={size}
     />
   );

src/components/ui/avatar/avatar.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 
 import StillImage, { IStillImage } from 'soapbox/components/still-image';
 
@@ -7,14 +8,20 @@ import Icon from '../icon/icon';
 
 const AVATAR_SIZE = 42;
 
-interface IAvatar extends Pick<IStillImage, 'src' | 'onError' | 'className'> {
+const messages = defineMessages({
+  avatar: { id: 'account.avatar.alt', defaultMessage: 'Avatar' },
+});
+
+interface IAvatar extends Pick<IStillImage, 'alt' | 'src' | 'onError' | 'className'> {
   /** Width and height of the avatar in pixels. */
   size?: number;
 }
 
 /** Round profile avatar for accounts. */
 const Avatar = (props: IAvatar) => {
-  const { src, size = AVATAR_SIZE, className } = props;
+  const intl = useIntl();
+
+  const { alt, src, size = AVATAR_SIZE, className } = props;
 
   const [isAvatarMissing, setIsAvatarMissing] = useState<boolean>(false);
 
@@ -47,7 +54,7 @@ const Avatar = (props: IAvatar) => {
       className={clsx('rounded-full', className)}
       style={style}
       src={src}
-      alt='Avatar'
+      alt={alt || intl.formatMessage(messages.avatar)}
       onError={handleLoadFailure}
     />
   );

src/components/upload.tsx

@@ -10,10 +10,11 @@ import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useState } from 'react';
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { spring } from 'react-motion';
 
 import { openModal } from 'soapbox/actions/modals';
+import AltIndicator from 'soapbox/components/alt-indicator';
 import Blurhash from 'soapbox/components/blurhash';
 import { HStack, Icon, IconButton } from 'soapbox/components/ui';
 import Motion from 'soapbox/features/ui/util/optional-motion';
@@ -224,16 +225,14 @@ const Upload: React.FC<IUpload> = ({
             )}
 
             {missingDescriptionModal && !description && (
-              <span
+              <AltIndicator
+                warning
                 title={intl.formatMessage(messages.descriptionMissingTitle)}
-                className={clsx('absolute bottom-2 left-2 z-10 inline-flex items-center gap-1 rounded bg-gray-900 px-2 py-1 text-xs font-medium uppercase text-white transition-opacity duration-100 ease-linear', {
+                className={clsx('absolute bottom-2 left-2 z-10 transition-opacity duration-100 ease-linear', {
                   'opacity-0 pointer-events-none': active,
                   'opacity-100': !active,
                 })}
-              >
-                <Icon className='h-4 w-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />
-                <FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />
-              </span>
+              />
             )}
 
             <div className='absolute inset-0 -z-[1] h-full w-full'>