Add information about alt text to alt text modal in web UI (#33702)

app/javascript/mastodon/features/alt_text_modal/components/info_button.tsx

@@ -0,0 +1,81 @@
+import { useState, useRef, useCallback, useId } from 'react';
+
+import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
+
+import classNames from 'classnames';
+
+import Overlay from 'react-overlays/Overlay';
+
+import QuestionMarkIcon from '@/material-icons/400-24px/question_mark.svg?react';
+import { Icon } from 'mastodon/components/icon';
+
+const messages = defineMessages({
+  help: { id: 'info_button.label', defaultMessage: 'Help' },
+});
+
+export const InfoButton: React.FC = () => {
+  const intl = useIntl();
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const accessibilityId = useId();
+
+  const handleClick = useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+
+  return (
+    <>
+      <button
+        type='button'
+        className={classNames('help-button', { active: open })}
+        ref={triggerRef}
+        onClick={handleClick}
+        aria-expanded={open}
+        aria-controls={accessibilityId}
+        aria-label={intl.formatMessage(messages.help)}
+      >
+        <Icon id='' icon={QuestionMarkIcon} />
+      </button>
+
+      <Overlay
+        show={open}
+        rootClose
+        placement='top'
+        onHide={handleClick}
+        offset={[5, 5]}
+        target={triggerRef}
+      >
+        {({ props }) => (
+          <div
+            {...props}
+            className='dialog-modal__popout prose dropdown-animation'
+            id={accessibilityId}
+          >
+            <FormattedMessage
+              id='info_button.what_is_alt_text'
+              defaultMessage='<h1>What is alt text?</h1>
+
+            <p>Alt text provides image descriptions for people with vision impairments, low-bandwidth connections, or those seeking extra context.</p>
+
+            <p>You can improve accessibility and understanding for everyone by writing clear, concise, and objective alt text.</p>
+
+            <ul>
+              <li>Capture important elements</li>
+              <li>Summarize text in images</li>
+              <li>Use regular sentence structure</li>
+              <li>Avoid redundant information</li>
+              <li>Focus on trends and key findings in complex visuals (like diagrams or maps)</li>
+            </ul>'
+              values={{
+                h1: (node) => <h1>{node}</h1>,
+                p: (node) => <p>{node}</p>,
+                ul: (node) => <ul>{node}</ul>,
+                li: (node) => <li>{node}</li>,
+              }}
+            />
+          </div>
+        )}
+      </Overlay>
+    </>
+  );
+};

app/javascript/mastodon/features/alt_text_modal/index.tsx

@@ -36,6 +36,8 @@ import type { MediaAttachment } from 'mastodon/models/media_attachment';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 import { assetHost } from 'mastodon/utils/config';
 
+import { InfoButton } from './components/info_button';
+
 const messages = defineMessages({
   placeholderVisual: {
     id: 'alt_text_modal.describe_for_people_with_visual_impairments',
@@ -504,6 +506,13 @@ export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
               </div>
 
               <div className='input__toolbar'>
+                <CharacterCounter
+                  max={MAX_LENGTH}
+                  text={isDetecting ? '' : description}
+                />
+
+                <div className='spacer' />
+
                 <button
                   className='link-button'
                   onClick={handleDetectClick}
@@ -515,10 +524,7 @@ export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
                   />
                 </button>
 
-                <CharacterCounter
-                  max={MAX_LENGTH}
-                  text={isDetecting ? '' : description}
-                />
+                <InfoButton />
               </div>
             </div>
           </form>