Show alternative text button on images with alternative text

.gitignore

@@ -2,6 +2,7 @@
 /node_modules
 /__sapper__
 /mastodon
+/mastodon/*
 /mastodon.log
 /src/template.html
 /static/*.css

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,3 @@
+export const importShowMediaAltDialog = () => import(
+  '../creators/showMediaAltDialog.js'
+).then(mod => mod.default)

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

@@ -5,7 +5,12 @@
   background="var(--main-bg)"
   on:show="onShow()"
 >
-  <ComposeBox {realm} autoFocus={true} dialogId={id} />
+  <ComposeBox
+    {realm}
+    autoFocus={true}
+    dialogId={id}
+    hideBottomBorder={true}
+  />
 </ModalDialog>
 <script>
   import ModalDialog from './ModalDialog.html'

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/components/ModalDialog.html

@@ -5,9 +5,10 @@
 <div class={contentsClass}
      role="dialog"
      aria-label={label || ''}
+     style="background: {background || '#000'};"
      ref:node
 >
-  <div class="modal-dialog-document" role="document" style="background: {background || '#000'};">
+  <div class="modal-dialog-document" role="document">
     <div class="modal-dialog-header" on:click="onClickHeader(event)">
       {#if title}
         <h1 class="modal-dialog-title">{title}</h1>
@@ -28,6 +29,7 @@ <h1 class="modal-dialog-title">{title}</h1>
     display: none;
   }
   :global(.modal-dialog) {
+    --model-dialog-border-radius: 4px;
     position: fixed;
     z-index: 10000;
     top: 0;
@@ -54,13 +56,13 @@ <h1 class="modal-dialog-title">{title}</h1>
   .modal-dialog-contents {
     z-index: 10020;
     padding: 0;
-    border: 1px solid var(--main-border);
-    border-radius: 2px;
     display: flex;
     flex-direction: row;
     max-height: calc(100% - 20px);
     max-width: calc(100% - 20px);
     flex: 0 1 580px;
+    border: 1px solid var(--main-border);
+    border-radius: var(--model-dialog-border-radius);
   }
   .modal-dialog-contents.should-animate {
     transition: opacity 0.2s linear;
@@ -80,12 +82,14 @@ <h1 class="modal-dialog-title">{title}</h1>
     background: var(--nav-bg);
     display: flex;
     align-items: center;
+    border-top-left-radius: calc(var(--model-dialog-border-radius) - 1px);
+    border-top-right-radius: calc(var(--model-dialog-border-radius) - 1px);
   }
   .modal-dialog-title {
     color: var(--nav-text-color);
     padding: 2px 0 2px 10px;
     margin: 0;
-    font-size: 1.5em;
+    font-size: 1.3em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

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,32 @@
 
   .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(--alt-button-bg);
+    color: var(--alt-button-color);
+  }
+
+  /* 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 +141,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 +155,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 +215,29 @@
       ),
       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;
   }

src/scss/themes/_base.scss

@@ -77,6 +77,9 @@
   --mask-opaque-bg: #{rgba($toast-bg, 0.8)};
   --loading-bg: #{#ededed};
 
+  --alt-button-bg: #{rgba($toast-bg, 0.8)};
+  --alt-button-color: #{$secondary-text-color};
+
   --account-profile-bg-backdrop-filter: #{rgba($main-bg-color, 0.85)};
   --account-profile-bg: #{rgba($main-bg-color, 0.9)};