[Glitch] Add information about alt text to alt text modal in web UI

Port 0885c316331cf4d314fb6dc3f2e057a6d2ccdfaf to glitch-soc

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

app/javascript/flavours/glitch/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 'flavours/glitch/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/flavours/glitch/features/alt_text_modal/index.tsx

@@ -36,6 +36,8 @@ import type { MediaAttachment } from 'flavours/glitch/models/media_attachment';
 import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
 import { assetHost } from 'flavours/glitch/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
+                <InfoButton />
-                  max={MAX_LENGTH}
-                  text={isDetecting ? '' : description}
-                />
               </div>
             </div>
           </form>

app/javascript/flavours/glitch/styles/components.scss

@@ -50,6 +50,34 @@
   }
 }
 
+.help-button {
+  background: $ui-button-background-color;
+  border: 0;
+  color: $ui-button-color;
+  border-radius: 20px;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: $ui-button-focus-background-color;
+  }
+
+  &:focus-visible {
+    outline: $ui-button-icon-focus-outline;
+  }
+
+  .icon {
+    width: 14px;
+    height: 14px;
+  }
+}
+
 .button {
   background-color: $ui-button-background-color;
   border: 10px none;
@@ -6429,6 +6457,20 @@ a.status-card {
     }
   }
 
+  &__popout {
+    background: var(--dropdown-background-color);
+    backdrop-filter: var(--background-filter);
+    border: 1px solid var(--dropdown-border-color);
+    box-shadow: var(--dropdown-shadow);
+    max-width: 320px;
+    padding: 16px;
+    border-radius: 8px;
+    z-index: 9999 !important;
+    font-size: 14px;
+    line-height: 20px;
+    color: $darker-text-color;
+  }
+
   .copy-paste-text {
     margin-bottom: 0;
   }

app/javascript/flavours/glitch/styles/forms.scss

@@ -83,9 +83,12 @@ code {
     &__toolbar {
       margin-top: 16px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
       gap: 16px;
+
+      .character-counter {
+        flex: 0 0 auto;
+      }
     }
 
     &.hidden {
@@ -566,7 +569,7 @@ code {
     margin-bottom: 15px;
   }
 
-  button:not(.button, .link-button) {
+  button:not(.button, .link-button, .help-button) {
     display: block;
     width: 100%;
     border: 0;