Experiment figcaption for *multiple* media's

src/components/media.jsx

@@ -29,7 +29,7 @@ audio = Audio track
 
 const dataAltLabel = 'ALT';
 const AltBadge = (props) => {
-  const { alt, lang, ...rest } = props;
+  const { alt, lang, index, ...rest } = props;
   if (!alt || !alt.trim()) return null;
   return (
     <button
@@ -47,6 +47,7 @@ const AltBadge = (props) => {
       title="Media description"
     >
       {dataAltLabel}
+      {!!index && <sup>{index}</sup>}
     </button>
   );
 };
@@ -60,6 +61,7 @@ function Media({
   showOriginal,
   autoAnimate,
   showCaption,
+  altIndex,
   onClick = () => {},
 }) {
   const {
@@ -304,7 +306,9 @@ function Media({
                   }
                 }}
               />
-              {!showInlineDesc && <AltBadge alt={description} lang={lang} />}
+              {!showInlineDesc && (
+                <AltBadge alt={description} lang={lang} index={altIndex} />
+              )}
             </>
           )}
         </Parent>
@@ -433,11 +437,13 @@ function Media({
               <div class="media-play">
                 <Icon icon="play" size="xl" />
               </div>
-              {!showInlineDesc && <AltBadge alt={description} lang={lang} />}
+              {!showInlineDesc && (
+                <AltBadge alt={description} lang={lang} index={altIndex} />
+              )}
             </>
           )}
           {!showOriginal && !showInlineDesc && (
-            <AltBadge alt={description} lang={lang} />
+            <AltBadge alt={description} lang={lang} index={altIndex} />
           )}
         </Parent>
       </Figure>
@@ -470,7 +476,9 @@ function Media({
               <div class="media-play">
                 <Icon icon="play" size="xl" />
               </div>
-              {!showInlineDesc && <AltBadge alt={description} lang={lang} />}
+              {!showInlineDesc && (
+                <AltBadge alt={description} lang={lang} index={altIndex} />
+              )}
             </>
           )}
         </Parent>

src/components/status.css

@@ -460,7 +460,7 @@
 .status
   .content-container.has-spoiler:not(.show-spoiler)
   .spoiler
-  ~ *:not(.media-container, .card),
+  ~ *:not(.media-container, .card, .media-figure-multiple),
 .status
   .content-container.has-spoiler:not(.show-spoiler)
   .spoiler
@@ -469,7 +469,7 @@
 .status
   .content-container.has-spoiler:not(.show-spoiler)
   .spoiler
-  ~ .media-container
+  ~ :is(.media-container, .media-figure-multiple)
   figcaption {
   filter: blur(5px) invert(0.5);
   image-rendering: crisp-edges;
@@ -483,7 +483,7 @@
 .status
   .content-container.has-spoiler:not(.show-spoiler)
   .spoiler
-  ~ .media-container
+  ~ :is(.media-container, .media-figure-multiple)
   .media
   > *,
 .status
@@ -1008,6 +1008,37 @@ body:has(#modal-container .carousel) .status .media img:hover {
   white-space: normal;
 }
 
+.media-figure-multiple {
+  margin: 0;
+  padding: 0;
+
+  figcaption {
+    padding: 4px;
+    font-size: 90%;
+    color: var(--text-insignificant-color);
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    & > * {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:hover {
+        color: var(--text-color);
+        cursor: pointer;
+      }
+    }
+
+    sup {
+      opacity: 0.75;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+}
+
 .carousel-item {
   position: relative;
 }
@@ -1687,6 +1718,13 @@ a.card:is(:hover, :focus):visited {
   padding: 4px;
   opacity: 0.65;
 
+  sup {
+    vertical-align: super;
+    font-weight: normal;
+    line-height: 0;
+    padding-left: 2px;
+  }
+
   &.clickable {
     opacity: 0.75;
     border-width: 2px;

src/components/status.jsx

@@ -1265,6 +1265,38 @@ function Status({
             </button>
           )}
           {!!mediaAttachments.length && (
+            <MultipleMediaFigure
+              lang={language}
+              enabled={
+                mediaAttachments.length > 1 &&
+                mediaAttachments.some((media) => !!media.description)
+              }
+              captionChildren={() => {
+                return mediaAttachments.map(
+                  (media, i) =>
+                    !!media.description && (
+                      <div
+                        key={media.id}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          states.showMediaAlt = {
+                            alt: media.description,
+                            lang: language,
+                          };
+                        }}
+                        title={
+                          media.description
+                            ? `Media ${i + 1}: ${media.description}`
+                            : undefined
+                        }
+                      >
+                        <sup>{i + 1}</sup> {media.description}
+                      </div>
+                    ),
+                );
+              }}
+            >
               <div
                 ref={mediaContainerRef}
                 class={`media-container media-eq${mediaAttachments.length} ${
@@ -1280,6 +1312,11 @@ function Status({
                       autoAnimate={isSizeLarge}
                       showCaption={mediaAttachments.length === 1}
                       lang={language}
+                      altIndex={
+                        mediaAttachments.length > 1 &&
+                        !!media.description &&
+                        i + 1
+                      }
                       to={`/${instance}/s/${id}?${
                         withinContext ? 'media' : 'media-only'
                       }=${i + 1}`}
@@ -1293,6 +1330,7 @@ function Status({
                     />
                   ))}
               </div>
+            </MultipleMediaFigure>
           )}
           {!!card &&
             card?.url !== status.url &&
@@ -1489,6 +1527,19 @@ function Status({
   );
 }
 
+function MultipleMediaFigure(props) {
+  const { enabled, children, lang, captionChildren } = props;
+  if (!enabled || !captionChildren) return children;
+  return (
+    <figure class="media-figure-multiple">
+      {children}
+      <figcaption lang={lang} dir="auto">
+        {captionChildren?.()}
+      </figcaption>
+    </figure>
+  );
+}
+
 function Card({ card, instance }) {
   const snapStates = useSnapshot(states);
   const {