From 12179505e1ef9e137a922650495e53f12bd6f121 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 27 May 2019 12:31:49 -0700
Subject: [PATCH] fix: improve UI/a11y of media upload (#1241)

---
 .../_components/compose/ComposeMediaItem.html | 36 ++++++++++++++-----
 src/scss/themes/_base.scss                    |  6 +++-
 src/scss/themes/_dark.scss                    |  2 +-
 tests/utils.js                                |  4 +--
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/routes/_components/compose/ComposeMediaItem.html b/src/routes/_components/compose/ComposeMediaItem.html
index c674cc73..f42aa6f1 100644
--- a/src/routes/_components/compose/ComposeMediaItem.html
+++ b/src/routes/_components/compose/ComposeMediaItem.html
@@ -8,12 +8,12 @@
     </button>
   </div>
   <div class="compose-media-alt">
-    <input id="compose-media-input-{uuid}"
-           type="text"
+    <textarea id="compose-media-input-{uuid}"
            class="compose-media-alt-input"
-           placeholder="Description"
+           placeholder="Describe for the visually impaired"
+           ref:textarea
            bind:value=rawText
-    >
+    ></textarea>
     <label for="compose-media-input-{uuid}" class="sr-only">
       Describe {shortName} for the visually impaired
     </label>
@@ -51,6 +51,9 @@
     font-size: 1.2em;
     background: var(--alt-input-bg);
     color: var(--body-text-color);
+    max-height: 100px;
+    border: 1px solid var(--input-border);
+    resize: none;
   }
   .compose-media-alt-input:focus {
     background: var(--main-bg);
@@ -66,12 +69,15 @@
     margin: 2px;
   }
   .compose-media-delete-button {
-    padding: 10px;
-    background: none;
-    border: none;
+    padding: 7px 10px 5px;
+    background: var(--floating-button-bg);
+    border: 1px solid var(--button-border);
   }
   .compose-media-delete-button:hover {
-    background: var(--toast-border);
+    background: var(--floating-button-bg-hover);
+  }
+  .compose-media-delete-button:active {
+    background: var(--floating-button-bg-active);
   }
   :global(.compose-media-delete-button-svg) {
     fill: var(--button-text);
@@ -87,6 +93,9 @@
     .compose-media-realm-dialog {
       max-height: 15vh;
     }
+    .compose-media-alt-input {
+      max-height: 7vh;
+    }
   }
 </style>
 <script>
@@ -96,11 +105,16 @@
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { observe } from 'svelte-extras'
   import SvgIcon from '../SvgIcon.html'
+  import { autosize } from '../../_thirdparty/autosize/autosize'
 
   export default {
     oncreate () {
       this.setupSyncFromStore()
       this.setupSyncToStore()
+      this.setupAutosize()
+    },
+    ondestroy () {
+      this.teardownAutosize()
     },
     data: () => ({
       rawText: ''
@@ -141,6 +155,12 @@
           saveStore()
         }, { init: false })
       },
+      setupAutosize () {
+        autosize(this.refs.textarea)
+      },
+      teardownAutosize () {
+        autosize.destroy(this.refs.textarea)
+      },
       onDeleteMedia () {
         let {
           realm,
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index 03c8cc14..398fa7fa 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -87,7 +87,7 @@
   --status-direct-background: #{darken($body-bg-color, 5%)};
   --main-theme-color: #{$main-theme-color};
   --warning-color: #{#e01f19};
-  --alt-input-bg: #{rgba($main-bg-color, 0.7)};
+  --alt-input-bg: #{rgba($main-bg-color, 0.9)};
 
   --muted-modal-text: #{$secondary-text-color};
   --muted-modal-bg: #{transparent};
@@ -112,4 +112,8 @@
 
   --tooltip-bg: rgba(30, 30, 30, 0.9);
   --tooltip-color: white;
+
+  --floating-button-bg: #{rgba($main-bg-color, 0.8)};
+  --floating-button-bg-hover: #{darken(rgba($main-bg-color, 0.9), 5%)};
+  --floating-button-bg-active: #{darken(rgba($main-bg-color, 0.9), 10%)};
 }
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
index 1cb0e0ab..cfee0c2c 100644
--- a/src/scss/themes/_dark.scss
+++ b/src/scss/themes/_dark.scss
@@ -18,7 +18,7 @@
   --status-direct-background: #{darken($body-bg-color, 5%)};
   --main-theme-color: #{$main-theme-color};
   --warning-color: #{#c7423d};
-  --alt-input-bg: #{rgba($main-bg-color, 0.7)};
+  --alt-input-bg: #{rgba($main-bg-color, 0.9)};
 
   --muted-modal-bg: #{transparent};
   --muted-modal-focus: #{#999};
diff --git a/tests/utils.js b/tests/utils.js
index 8dc14ccc..2e84d435 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -82,7 +82,7 @@ export const instanceSettingNotificationMentions = $('#instance-option-notificat
 export const notificationBadge = $('#main-nav li:nth-child(2) .nav-link-badge')
 
 export function getComposeModalNthMediaAltInput (n) {
-  return $(`.modal-dialog .compose-media:nth-child(${n}) .compose-media-alt input`)
+  return $(`.modal-dialog .compose-media:nth-child(${n}) .compose-media-alt textarea`)
 }
 
 export function getComposeModalNthMediaImg (n) {
@@ -211,7 +211,7 @@ export const getScrollTop = exec(() => {
 })
 
 export function getNthMediaAltInput (n) {
-  return $(`.compose-box .compose-media:nth-child(${n}) .compose-media-alt input`)
+  return $(`.compose-box .compose-media:nth-child(${n}) .compose-media-alt textarea`)
 }
 
 export function getNthComposeReplyInput (n) {