Add an ALT button to images

src/intl/de.js

@@ -262,6 +262,8 @@ export default {
   unmute: 'Stummschaltung aufheben',
   zoomOut: 'Herauszoomen',
   zoomIn: 'Hineinzoomen',
+  imageDescription: 'Image description',
+  altMediaAriaLabel: 'alternative description (ALT) for media {number}',
   // Reporting
   reportingLabel: 'Du machst eine Meldung von {account} an die Moderatoren von {instance}.',
   additionalComments: 'Zusätzliche Kommentare',

src/intl/en-US.js

@@ -270,6 +270,8 @@ export default {
   unmute: 'Unmute',
   zoomOut: 'Zoom out',
   zoomIn: 'Zoom in',
+  imageDescription: 'Image description',
+  altMediaAriaLabel: 'alternative description (ALT) for media {number}',
   // Reporting
   reportingLabel: 'You are reporting {account} to the moderators of {instance}.',
   additionalComments: 'Additional comments',

src/intl/es.js

@@ -271,6 +271,8 @@ export default {
   unmute: 'Dejar de silenciar',
   zoomOut: 'Alejar',
   zoomIn: 'Acercar',
+  imageDescription: 'Image description',
+  altMediaAriaLabel: 'alternative description (ALT) for media {number}',
   // Reporting
   reportingLabel: 'Estás denunciando a {account} a los moderadores de {instance}.',
   additionalComments: 'Comentarios adicionales',

src/intl/fr.js

@@ -264,6 +264,8 @@ export default {
   unmute: 'Ne plus mettre en sourdine',
   zoomOut: 'Dé-zoomer',
   zoomIn: 'Zoomer',
+  imageDescription: 'Image description',
+  altMediaAriaLabel: 'alternative description (ALT) for media {number}',
   // Reporting
   reportingLabel: 'Vous signalez {account} aux modérateurs/modératrices de {instance}.',
   additionalComments: 'Commentaires additionels',

src/intl/ru-RU.JS

@@ -270,6 +270,8 @@ export default {
   unmute: 'Не игнорировать',
   zoomOut: 'Уменьшить',
   zoomIn: 'Увеличить',
+  imageDescription: 'Image description',
+  altMediaAriaLabel: 'alternative description (ALT) for media {number}',
   // Reporting
   reportingLabel: 'Вы отправляете жалобу на {account} модератору {instance}.',
   additionalComments: 'Дополнительные комментарии',

src/routes/_components/dialog/asyncDialogs/importShowMediaAltDialog.js

@@ -0,0 +1,4 @@
+export const importShowMediaAltDialog = () => import(
+    '../creators/showMediaAltDialog.js'
+).then(mod => mod.default)
+  

src/routes/_components/dialog/components/MediaAltDialog.html

@@ -0,0 +1,34 @@
+<ModalDialog
+  {id}
+  {label}
+  title="{intl.imageDescription}"
+  background="var(--main-bg)">
+  <div class="content">
+    {#if description}{description}{/if}
+  </div>
+</ModalDialog>
+<style>
+  .content {
+    box-sizing: border-box;
+    padding: 13px 11px 15px;
+    font-size: 1.2em;
+    width: 100%;
+  }
+</style>
+<script>
+  import ModalDialog from './ModalDialog.html'
+  import { show } from '../helpers/showDialog.js'
+  import { close } from '../helpers/closeDialog.js'
+  import { oncreate } from '../helpers/onCreateDialog.js'
+
+  export default {
+    oncreate,
+    components: {
+      ModalDialog
+    },
+    methods: {
+      show,
+      close
+    }
+  }
+</script>

src/routes/_components/dialog/creators/showMediaAltDialog.js

@@ -0,0 +1,9 @@
+import MediaAltDialog from '../components/MediaAltDialog.html'
+import { showDialog } from './showDialog.js'
+
+export default function showMediaAltDialog (description) {
+  return showDialog(MediaAltDialog, {
+    label: 'ASKASKLAALAAABEL',
+    description
+  })
+}

src/routes/_components/status/Media.html

@@ -1,3 +1,4 @@
+<div class="media">
 {#if !blurhash && (type === 'video' || type === 'audio')}
     <button id={elementId}
             type="button"
@@ -70,8 +71,19 @@
   {/if}
 </button>
 {/if}
+{#if !blurhash && type === 'image' && description}
+<button
+  on:click='handleAltClick(event)'
+  class="alt-button"
+  aria-label={altLabel}
+>ALT</button>
+{/if}
+</div>
 <style>
-
+  .media {
+    position: relative;
+    width: 100%;
+  }
   :global(.status-media video, .status-media img) {
     object-fit: cover;
   }
@@ -92,6 +104,31 @@
 
   .inline-media {
     position: relative;
+    display: block;
+  }
+
+  .alt-button {
+    --alt-button-margin: 10px;
+    z-index: 1;
+    position: absolute;
+    bottom: var(--alt-button-margin);
+    left: var(--alt-button-margin);
+    padding: 6px 8px;
+    font-size: 1em;
+    line-height: 1;
+    border: none;
+    border-radius: 2px;
+    background: var(--mask-opaque-bg);
+  }
+
+  /* Increase touch area to make it easy not to miss the button */
+  .alt-button::before {
+    content: '';
+    position: absolute;
+    top: calc(-1 * var(--alt-button-margin) - 1px);
+    right: calc(-1 * var(--alt-button-margin) - 1px);
+    bottom: calc(-1 * var(--alt-button-margin) - 1px);
+    left: calc(-1 * var(--alt-button-margin) - 1px);
   }
 
   @media (max-width: 240px) {
@@ -103,6 +140,7 @@
 <script>
   import { DEFAULT_MEDIA_WIDTH, DEFAULT_MEDIA_HEIGHT, ONE_TRANSPARENT_PIXEL } from '../../_static/media.js'
   import { importShowMediaDialog } from '../dialog/asyncDialogs/importShowMediaDialog.js'
+  import { importShowMediaAltDialog } from '../dialog/asyncDialogs/importShowMediaAltDialog.js'
   import { mouseover } from '../../_utils/events.js'
   import NonAutoplayGifv from '../NonAutoplayGifv.html'
   import PlayVideoIcon from '../PlayVideoIcon.html'
@@ -116,7 +154,7 @@
 export default {
     async oncreate () {
       const { elementId } = this.get()
-      registerClickDelegate(this, elementId, () => this.onClick())
+      registerClickDelegate(this, elementId, () => this.handleImageClick())
     },
     computed: {
       focus: ({ meta }) => meta && meta.focus,
@@ -176,16 +214,29 @@ export default {
       ),
       animatedLabel: ({ description }) => (
         formatIntl('intl.animatedImage', { description })
+      ),
+      altLabel: ({ index }) => (
+        formatIntl('intl.altMediaAriaLabel', { number : index + 1 })
       )
     },
     methods: {
-      onClick () {
+      handleImageClick () {
         (async () => {
           const { mediaAttachments, index } = this.get()
           const showMediaDialog = await importShowMediaDialog()
           showMediaDialog(mediaAttachments, index)
         })()
         return true
+      },
+      handleAltClick (event) {
+        (async () => {
+          const { mediaAttachments, index } = this.get()
+          const media = mediaAttachments[index];
+          const { description } = media;
+          const showMediaAltDialog = await importShowMediaAltDialog()
+          showMediaAltDialog(description)
+        })()
+        return true
       }
     },
     data: () => ({

src/routes/_components/status/MediaAttachments.html

@@ -23,22 +23,22 @@
     border-radius: 6px;
   }
 
-  .status-media.grouped-images > :global(.inline-media) {
+  .status-media.grouped-images :global(.inline-media) {
       padding-bottom: 56.25%;
       width: 100%;
   }
 
-  .status-media.grouped-images.two-cols > :global(.inline-media) {
+  .status-media.grouped-images.two-cols :global(.inline-media) {
       padding-bottom: calc(112.5% + 5px);
   }
 
-  .status-media.grouped-images.odd-cols > :global(.inline-media:first-child) {
+  .status-media.grouped-images.odd-cols :global(.inline-media:first-child) {
       grid-row-end: span 2;
       padding-bottom: calc(112.5% + 5px);
       background-color: blue;
   }
 
-  .status-media.not-grouped-images > :global(.inline-media) {
+  .status-media.not-grouped-images :global(.inline-media) {
     width: 100%;
     min-height: 250px;
   }