Merge branch 'missing-alt-description' into 'main'

Add optional indicator for attachments without description

See merge request soapbox-pub/soapbox!2982

src/components/upload.tsx

@@ -10,14 +10,14 @@ 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 { defineMessages, useIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { spring } from 'react-motion';
 
 import { openModal } from 'soapbox/actions/modals';
 import Blurhash from 'soapbox/components/blurhash';
 import { HStack, Icon, IconButton } from 'soapbox/components/ui';
 import Motion from 'soapbox/features/ui/util/optional-motion';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useSettings } from 'soapbox/hooks';
 import { Attachment } from 'soapbox/types/entities';
 
 export const MIMETYPE_ICONS: Record<string, string> = {
@@ -58,6 +58,7 @@ const messages = defineMessages({
   description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
   delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
   preview: { id: 'upload_form.preview', defaultMessage: 'Preview' },
+  descriptionMissingTitle: { id: 'upload_form.description_missing.title', defaultMessage: 'This attachment doesn\'t have a description' },
 });
 
 interface IUpload {
@@ -80,6 +81,8 @@ const Upload: React.FC<IUpload> = ({
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
+  const { missingDescriptionModal } = useSettings();
+
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
   const [dirtyDescription, setDirtyDescription] = useState<string | null>(null);
@@ -200,6 +203,19 @@ const Upload: React.FC<IUpload> = ({
               </div>
             )}
 
+            {missingDescriptionModal && !description && (
+              <span
+                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', {
+                  '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='compose-form__upload-preview'>
               {mediaType === 'video' && (
                 <video autoPlay playsInline muted loop>

src/locales/en.json

@@ -1591,6 +1591,8 @@
   "upload_error.video_duration_limit": "Video exceeds the current duration limit ({limit, plural, one {# second} other {# seconds}})",
   "upload_error.video_size_limit": "Video exceeds the current file size limit ({limit})",
   "upload_form.description": "Describe for the visually impaired",
+  "upload_form.description_missing.indicator": "Alt",
+  "upload_form.description_missing.title": "This attachment doesn't have a description",
   "upload_form.preview": "Preview",
   "upload_form.undo": "Delete",
   "upload_progress.label": "Uploading…",