From fefce1e2556fb98c9369b7835169da8d067169b4 Mon Sep 17 00:00:00 2001
From: Nick Colley <2445413+NickColley@users.noreply.github.com>
Date: Sun, 12 Mar 2023 15:36:35 +0000
Subject: [PATCH 1/5] Add an ALT button to images

---
 src/intl/de.js                                |  2 +
 src/intl/en-US.js                             |  2 +
 src/intl/es.js                                |  2 +
 src/intl/fr.js                                |  2 +
 src/intl/ru-RU.JS                             |  2 +
 .../asyncDialogs/importShowMediaAltDialog.js  |  4 ++
 .../dialog/components/MediaAltDialog.html     | 34 +++++++++++
 .../dialog/creators/showMediaAltDialog.js     |  9 +++
 src/routes/_components/status/Media.html      | 57 ++++++++++++++++++-
 .../_components/status/MediaAttachments.html  |  8 +--
 10 files changed, 115 insertions(+), 7 deletions(-)
 create mode 100644 src/routes/_components/dialog/asyncDialogs/importShowMediaAltDialog.js
 create mode 100644 src/routes/_components/dialog/components/MediaAltDialog.html
 create mode 100644 src/routes/_components/dialog/creators/showMediaAltDialog.js

diff --git a/src/intl/de.js b/src/intl/de.js
index ae87d5bfe..9fa1cb35e 100644
--- a/src/intl/de.js
+++ b/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',
diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index e952f4eea..78688d321 100644
--- a/src/intl/en-US.js
+++ b/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',
diff --git a/src/intl/es.js b/src/intl/es.js
index 51eb95260..271394bd9 100644
--- a/src/intl/es.js
+++ b/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',
diff --git a/src/intl/fr.js b/src/intl/fr.js
index 8854e4648..a0ca980f8 100644
--- a/src/intl/fr.js
+++ b/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',
diff --git a/src/intl/ru-RU.JS b/src/intl/ru-RU.JS
index 9887945b7..3c7b99cc7 100644
--- a/src/intl/ru-RU.JS
+++ b/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: 'Дополнительные комментарии',
diff --git a/src/routes/_components/dialog/asyncDialogs/importShowMediaAltDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowMediaAltDialog.js
new file mode 100644
index 000000000..dfe348149
--- /dev/null
+++ b/src/routes/_components/dialog/asyncDialogs/importShowMediaAltDialog.js
@@ -0,0 +1,4 @@
+export const importShowMediaAltDialog = () => import(
+    '../creators/showMediaAltDialog.js'
+).then(mod => mod.default)
+  
\ No newline at end of file
diff --git a/src/routes/_components/dialog/components/MediaAltDialog.html b/src/routes/_components/dialog/components/MediaAltDialog.html
new file mode 100644
index 000000000..3273b30a5
--- /dev/null
+++ b/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>
diff --git a/src/routes/_components/dialog/creators/showMediaAltDialog.js b/src/routes/_components/dialog/creators/showMediaAltDialog.js
new file mode 100644
index 000000000..60c56acea
--- /dev/null
+++ b/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
+  })
+}
diff --git a/src/routes/_components/status/Media.html b/src/routes/_components/status/Media.html
index 212a1cdc7..a975df6fa 100644
--- a/src/routes/_components/status/Media.html
+++ b/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 @@
       ),
       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: () => ({
diff --git a/src/routes/_components/status/MediaAttachments.html b/src/routes/_components/status/MediaAttachments.html
index b5d7e0c5e..36021e50a 100644
--- a/src/routes/_components/status/MediaAttachments.html
+++ b/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;
   }

From fb6b84526ba23d1b352f33585e76ecb5a5980b28 Mon Sep 17 00:00:00 2001
From: Nick Colley <2445413+NickColley@users.noreply.github.com>
Date: Sun, 12 Mar 2023 15:38:14 +0000
Subject: [PATCH 2/5] Ignore all mastodon file changes

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index a932aa4a8..1b9b09595 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 /node_modules
 /__sapper__
 /mastodon
+/mastodon/*
 /mastodon.log
 /src/template.html
 /static/*.css

From 309973452be3fe5331657f2c535d2840a341ddb4 Mon Sep 17 00:00:00 2001
From: Nick Colley <2445413+NickColley@users.noreply.github.com>
Date: Sun, 12 Mar 2023 15:49:03 +0000
Subject: [PATCH 3/5] Tidy model styling

---
 .../_components/dialog/components/ComposeDialog.html |  7 ++++++-
 .../_components/dialog/components/ModalDialog.html   | 12 ++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/routes/_components/dialog/components/ComposeDialog.html b/src/routes/_components/dialog/components/ComposeDialog.html
index 49d1aca75..465ee1995 100644
--- a/src/routes/_components/dialog/components/ComposeDialog.html
+++ b/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'
diff --git a/src/routes/_components/dialog/components/ModalDialog.html b/src/routes/_components/dialog/components/ModalDialog.html
index 946640f52..045ab47ab 100644
--- a/src/routes/_components/dialog/components/ModalDialog.html
+++ b/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;

From 5ecb0f84cfac1b8c3902e4ab0c637e7bfa5fff8f Mon Sep 17 00:00:00 2001
From: Nick Colley <2445413+NickColley@users.noreply.github.com>
Date: Sun, 12 Mar 2023 15:51:41 +0000
Subject: [PATCH 4/5] Ensure alt is readable in light and dark themes

---
 src/routes/_components/status/Media.html | 3 ++-
 src/scss/themes/_base.scss               | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/routes/_components/status/Media.html b/src/routes/_components/status/Media.html
index a975df6fa..a94da8399 100644
--- a/src/routes/_components/status/Media.html
+++ b/src/routes/_components/status/Media.html
@@ -118,7 +118,8 @@
     line-height: 1;
     border: none;
     border-radius: 2px;
-    background: var(--mask-opaque-bg);
+    background: var(--alt-button-bg);
+    color: var(--alt-button-color);
   }
 
   /* Increase touch area to make it easy not to miss the button */
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index 1aa958cf1..cffdd6b34 100644
--- a/src/scss/themes/_base.scss
+++ b/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)};
 

From 0d00c6a2ecfd3dcf1bf9b581281eb8b28cc0d545 Mon Sep 17 00:00:00 2001
From: Nick Colley <2445413+NickColley@users.noreply.github.com>
Date: Mon, 13 Mar 2023 21:04:48 +0000
Subject: [PATCH 5/5] Fix linting errors

---
 .../dialog/asyncDialogs/importShowMediaAltDialog.js        | 7 +++----
 src/routes/_components/status/Media.html                   | 6 +++---
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/routes/_components/dialog/asyncDialogs/importShowMediaAltDialog.js b/src/routes/_components/dialog/asyncDialogs/importShowMediaAltDialog.js
index dfe348149..e2766acc1 100644
--- a/src/routes/_components/dialog/asyncDialogs/importShowMediaAltDialog.js
+++ b/src/routes/_components/dialog/asyncDialogs/importShowMediaAltDialog.js
@@ -1,4 +1,3 @@
-export const importShowMediaAltDialog = () => import(
-    '../creators/showMediaAltDialog.js'
-).then(mod => mod.default)
-  
\ No newline at end of file
+export const importShowMediaAltDialog = () => import(
+  '../creators/showMediaAltDialog.js'
+).then(mod => mod.default)
diff --git a/src/routes/_components/status/Media.html b/src/routes/_components/status/Media.html
index a94da8399..a378f9ca5 100644
--- a/src/routes/_components/status/Media.html
+++ b/src/routes/_components/status/Media.html
@@ -217,7 +217,7 @@
         formatIntl('intl.animatedImage', { description })
       ),
       altLabel: ({ index }) => (
-        formatIntl('intl.altMediaAriaLabel', { number : index + 1 })
+        formatIntl('intl.altMediaAriaLabel', { number: index + 1 })
       )
     },
     methods: {
@@ -232,8 +232,8 @@
       handleAltClick (event) {
         (async () => {
           const { mediaAttachments, index } = this.get()
-          const media = mediaAttachments[index];
-          const { description } = media;
+          const media = mediaAttachments[index]
+          const { description } = media
           const showMediaAltDialog = await importShowMediaAltDialog()
           showMediaAltDialog(description)
         })()