Re-implement "no alt" badges

This work is required to make sure we maintain an important Hometown
accessibility feature, originally implemented here:

https://github.com/hometown-fork/hometown/pull/1261

app/javascript/mastodon/components/media_gallery.jsx

@@ -11,6 +11,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
 
 import { AltTextBadge } from 'mastodon/components/alt_text_badge';
+import { NoAltTextBadge } from 'mastodon/components/no_alt_text_badge';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { formatTime } from 'mastodon/features/video';
 
@@ -100,6 +101,8 @@ class Item extends PureComponent {
     const hasMediaDescription = attachment.get('description')?.length > 0;
     if (hasMediaDescription) {
       badges.push(<AltTextBadge key='alt' description={attachment.get('description')} />);
+    } else {
+      badges.push(<NoAltTextBadge key='no-alt' />);
     }
 
     const description = attachment.getIn(['translation', 'description']) || attachment.get('description');

app/javascript/mastodon/components/no_alt_text_badge.tsx

@@ -0,0 +1,67 @@
+import { useState, useCallback, useRef } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import Overlay from 'react-overlays/Overlay';
+import type {
+  OffsetValue,
+  UsePopperOptions,
+} from 'react-overlays/esm/usePopper';
+
+import { Icon }  from 'mastodon/components/icon';
+import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
+
+const offset = [0, 4] as OffsetValue;
+const popperConfig = { strategy: 'fixed' } as UsePopperOptions;
+
+export const NoAltTextBadge: React.FC<{}> = () => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleClick = useCallback(() => {
+    setOpen((v) => !v);
+  }, [setOpen]);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  return (
+    <>
+      <button
+        ref={anchorRef}
+        className='media-gallery__no-alt__label'
+        onClick={handleClick}
+      >
+        <Icon id='warning' icon={WarningIcon} />
+      </button>
+
+      <Overlay
+        rootClose
+        onHide={handleClose}
+        show={open}
+        target={anchorRef.current}
+        placement='top-end'
+        flip
+        offset={offset}
+        popperConfig={popperConfig}
+      >
+        {({ props }) => (
+          <div {...props} className='hover-card-controller'>
+            <div
+              className='media-gallery__alt__popover dropdown-animation'
+              role='tooltip'
+            >
+              <h4>
+                <FormattedMessage
+                  id='no_alt_text_badge.title'
+                  defaultMessage='No alt text provided'
+                />
+              </h4>
+            </div>
+          </div>
+        )}
+      </Overlay>
+    </>
+  );
+};

app/javascript/mastodon/features/audio/index.jsx

@@ -17,6 +17,8 @@ import VolumeOffIcon from '@/material-icons/400-24px/volume_off-fill.svg?react';
 import VolumeUpIcon from '@/material-icons/400-24px/volume_up-fill.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 import { formatTime, getPointerPosition, fileNameFromURL } from 'mastodon/features/video';
+import { AltTextBadge } from 'mastodon/components/alt_text_badge';
+import { NoAltTextBadge } from 'mastodon/components/no_alt_text_badge';
 
 import { Blurhash } from '../../components/blurhash';
 import { displayMedia, useBlurhash } from '../../initial_state';
@@ -582,7 +584,8 @@ class Audio extends PureComponent {
             </div>
 
             <div className='video-player__buttons right'>
-              {!alt && <button type='button' title={intl.formatMessage(messages.no_descriptive_text)} aria-label={intl.formatMessage(messages.no_descriptive_text)} className='player-button no-action media__no-description-icon' ><Icon id='exclamation-triangle' icon={WarningIcon} fixedWidth /></button>}
+              {alt && <button type='button' title={intl.formatMessage(messages.no_descriptive_text)} aria-label={intl.formatMessage(messages.no_descriptive_text)} className='player-button no-action media__no-description-icon' ><AltTextBadge key='alt' description={alt} /></button>}
+              {!alt && <button type='button' title={intl.formatMessage(messages.no_descriptive_text)} aria-label={intl.formatMessage(messages.no_descriptive_text)} className='player-button no-action media__no-description-icon' ><NoAltTextBadge key='no-alt' /></button>}
               {!editable && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' icon={VisibilityOffIcon} /></button>}
               <a title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)} className='video-player__download__icon player-button' href={this.props.src} download>
                 <Icon id={'download'} icon={DownloadIcon} />

app/javascript/mastodon/features/video/index.jsx

@@ -20,6 +20,8 @@ import VolumeUpIcon from '@/material-icons/400-24px/volume_up-fill.svg?react';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon }  from 'mastodon/components/icon';
 import { playerSettings } from 'mastodon/settings';
+import { AltTextBadge } from 'mastodon/components/alt_text_badge';
+import { NoAltTextBadge } from 'mastodon/components/no_alt_text_badge';
 
 import { displayMedia, useBlurhash } from '../../initial_state';
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
@@ -647,7 +649,8 @@ class Video extends PureComponent {
               </div>
 
               <div className='video-player__buttons right'>
-                {!alt && <button type='button' title={intl.formatMessage(messages.no_descriptive_text)} aria-label={intl.formatMessage(messages.no_descriptive_text)} className='player-button no-action media__no-description-icon' ><Icon id='exclamation-triangle' icon={WarningIcon} fixedWidth /></button>}
+                {alt && <button type='button' title={intl.formatMessage(messages.no_descriptive_text)} aria-label={intl.formatMessage(messages.no_descriptive_text)} className='player-button no-action media__no-description-icon' ><AltTextBadge key='alt' description={alt} /></button>}
+                {!alt && <button type='button' title={intl.formatMessage(messages.no_descriptive_text)} aria-label={intl.formatMessage(messages.no_descriptive_text)} className='player-button no-action media__no-description-icon' ><NoAltTextBadge key='no-alt' /></button>}
                 {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' icon={VisibilityOffIcon} /></button>}
                 {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='expand' icon={RectangleIcon} /></button>}
                 {onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='compress' icon={FullscreenExitIcon} /></button>}

app/javascript/styles/mastodon/components.scss

@@ -7018,6 +7018,27 @@ a.status-card {
   }
 }
 
+.media-gallery__no-alt__label {
+  display: block;
+  text-align: center;
+  color: $white;
+  border: 0;
+  background: rgba($black, 0.65);
+  backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+  padding: 2px 4px 0px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  z-index: 1;
+  line-height: 20px;
+  cursor: pointer;
+  pointer-events: auto;
+
+  &--non-interactive {
+    pointer-events: none;
+  }
+}
+
 .media-gallery__alt__popover {
   background: rgba($black, 0.65);
   backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);