media description support

src/components/attachment/attachment.vue

@@ -51,7 +51,6 @@
       :class="{'hidden': hidden && preloadImage }"
       :href="attachment.url"
       target="_blank"
-      :title="attachment.description"
       @click="openModal"
     >
       <StillImage
@@ -59,6 +58,7 @@
         :mimetype="attachment.mimetype"
         :src="attachment.large_thumb_url || attachment.url"
         :image-load-handler="onImageLoad"
+        :alt="attachment.description"
       />
     </a>
 

src/components/media_modal/media_modal.vue

@@ -8,6 +8,8 @@
       v-if="type === 'image'"
       class="modal-image"
       :src="currentMedia.url"
+      :alt="currentMedia.description"
+      :title="currentMedia.description"
       @touchstart.stop="mediaTouchStart"
       @touchmove.stop="mediaTouchMove"
       @click="hide"

src/components/post_status_form/post_status_form.js

@@ -78,6 +78,7 @@ const PostStatusForm = {
         nsfw: false,
         files: [],
         poll: {},
+        mediaDescriptions: {},
         visibility: scope,
         contentType
       },
@@ -190,6 +191,7 @@ const PostStatusForm = {
         visibility: newStatus.visibility,
         sensitive: newStatus.nsfw,
         media: newStatus.files,
+        mediaDescriptions: newStatus.mediaDescriptions || {},
         store: this.$store,
         inReplyToStatusId: this.replyTo,
         contentType: newStatus.contentType,
@@ -200,6 +202,7 @@ const PostStatusForm = {
             status: '',
             spoilerText: '',
             files: [],
+            mediaDescriptions: {},
             visibility: newStatus.visibility,
             contentType: newStatus.contentType,
             poll: {}

src/components/post_status_form/post_status_form.vue

@@ -266,6 +266,7 @@
               :href="file.url"
             >{{ file.url }}</a>
           </div>
+          <input type="text" :placeholder="$t('post_status.media_description')" v-model="newStatus.mediaDescriptions[file.id]"></input>
         </div>
       </div>
       <div
@@ -399,6 +400,11 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+
+    input {
+      min-width: 300px;
+      flex: 1;
+    }
   }
 
   .status-input-wrapper {

src/components/still-image/still-image.js

@@ -4,7 +4,8 @@ const StillImage = {
     'referrerpolicy',
     'mimetype',
     'imageLoadError',
-    'imageLoadHandler'
+    'imageLoadHandler',
+    'alt'
   ],
   data () {
     return {

src/components/still-image/still-image.vue

@@ -10,6 +10,8 @@
     <!-- NOTE: key is required to force to re-render img tag when src is changed -->
     <img
       ref="src"
+      :alt="alt"
+      :title="alt"
       :key="src"
       :src="src"
       :referrerpolicy="referrerpolicy"

src/i18n/en.json

@@ -174,6 +174,7 @@
     "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
     "account_not_locked_warning_link": "locked",
     "attachments_sensitive": "Mark attachments as sensitive",
+    "media_description": "Media description",
     "content_type": {
       "text/plain": "Plain text",
       "text/html": "HTML",

src/services/api/api.service.js

@@ -617,7 +617,8 @@ const postStatus = ({
   poll,
   mediaIds = [],
   inReplyToStatusId,
-  contentType
+  contentType,
+  mediaDescriptions
 }) => {
   const form = new FormData()
   const pollOptions = poll.options || []
@@ -644,6 +645,7 @@ const postStatus = ({
       form.append('poll[options][]', option)
     })
   }
+  form.append('descriptions', JSON.stringify(mediaDescriptions))
   if (inReplyToStatusId) {
     form.append('in_reply_to_id', inReplyToStatusId)
   }

src/services/status_poster/status_poster.service.js

@@ -1,7 +1,7 @@
 import { map } from 'lodash'
 import apiService from '../api/api.service.js'
 
-const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
+const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, media = [], inReplyToStatusId = undefined, contentType = 'text/plain', mediaDescriptions = {} }) => {
   const mediaIds = map(media, 'id')
 
   return apiService.postStatus({
@@ -13,7 +13,8 @@ const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, m
     mediaIds,
     inReplyToStatusId,
     contentType,
-    poll })
+    poll,
+    mediaDescriptions })
     .then((data) => {
       if (!data.error) {
         store.dispatch('addNewStatuses', {