From 9d706a3748c6f9ff7b42593832a1334e5da9c9c5 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 10 Apr 2018 20:02:42 -0700
Subject: [PATCH] Add img title as well as alt (#66)

Fixes #57
---
 routes/_components/LazyImage.html                     | 1 +
 routes/_components/NonAutoplayGifv.html               | 3 ++-
 routes/_components/NonAutoplayImg.html                | 6 ++++--
 routes/_components/dialog/components/ImageDialog.html | 1 +
 routes/_components/status/Media.html                  | 6 ++++--
 tests/spec/109-compose-media.js                       | 2 ++
 6 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/routes/_components/LazyImage.html b/routes/_components/LazyImage.html
index 63c5c96a..55b62911 100644
--- a/routes/_components/LazyImage.html
+++ b/routes/_components/LazyImage.html
@@ -5,6 +5,7 @@
       class="{{hidden ? 'hidden' : ''}} {{className || ''}}"
       aria-hidden="{{ariaHidden || ''}}"
       alt="{{alt || ''}}"
+      title="{{alt || ''}}"
       src="{{displaySrc}}"
       :width
       :height
diff --git a/routes/_components/NonAutoplayGifv.html b/routes/_components/NonAutoplayGifv.html
index 4fd50b97..61d3d20f 100644
--- a/routes/_components/NonAutoplayGifv.html
+++ b/routes/_components/NonAutoplayGifv.html
@@ -13,7 +13,8 @@
       />
   {{else}}
     <LazyImage
-      alt="{{label}}"
+      alt="{{label || ''}}"
+      title="{{label || ''}}"
       src="{{staticSrc}}"
       fallback="{{oneTransparentPixel}}"
       :width
diff --git a/routes/_components/NonAutoplayImg.html b/routes/_components/NonAutoplayImg.html
index 4c68b344..b1571634 100644
--- a/routes/_components/NonAutoplayImg.html
+++ b/routes/_components/NonAutoplayImg.html
@@ -1,13 +1,15 @@
 {{#if staticSrc === src}}
   <img class="{{className || ''}}"
        aria-hidden="{{ariaHidden}}"
-       alt="{{alt}}"
+       alt="{{alt || ''}}"
+       title="{{alt || ''}}"
        src="{{src}}"
        on:imgLoadError />
 {{else}}
   <img class="{{className || ''}} non-autoplay-zoom-in {{isLink ? 'is-link' : ''}}"
        aria-hidden="{{ariaHidden}}"
-       alt="{{alt}}"
+       alt="{{alt || ''}}"
+       title="{{alt || ''}}"
        src="{{staticSrc}}"
        on:imgLoadError
        on:mouseover="onMouseOver(event)"
diff --git a/routes/_components/dialog/components/ImageDialog.html b/routes/_components/dialog/components/ImageDialog.html
index 749e165e..7d4797ae 100644
--- a/routes/_components/dialog/components/ImageDialog.html
+++ b/routes/_components/dialog/components/ImageDialog.html
@@ -19,6 +19,7 @@
       width="{{width}}"
       height="{{height}}"
       alt="{{description || ''}}"
+      title="{{description || ''}}"
     />
   {{/if}}
 </ModalDialog>
diff --git a/routes/_components/status/Media.html b/routes/_components/status/Media.html
index 000a31c4..c736087b 100644
--- a/routes/_components/status/Media.html
+++ b/routes/_components/status/Media.html
@@ -7,7 +7,8 @@
   >
     <PlayVideoIcon />
     <LazyImage
-      alt="{{media.description}}"
+      alt="{{media.description || ''}}"
+      title="{{media.description || ''}}"
       src="{{media.preview_url}}"
       fallback="{{oneTransparentPixel}}"
       width="{{inlineWidth}}"
@@ -46,7 +47,8 @@
     />
   {{else}}
     <LazyImage
-      alt="{{media.description}}"
+      alt="{{media.description || ''}}"
+      title="{{media.description || ''}}"
       src="{{media.preview_url}}"
       fallback="{{oneTransparentPixel}}"
       width="{{inlineWidth}}"
diff --git a/tests/spec/109-compose-media.js b/tests/spec/109-compose-media.js
index fbc8f164..3b152237 100644
--- a/tests/spec/109-compose-media.js
+++ b/tests/spec/109-compose-media.js
@@ -25,7 +25,9 @@ test('uploads alts for media', async t => {
     .typeText(getNthMediaAltInput(1), 'kitten 1')
     .click(composeButton)
     .expect(getNthStatusAndImage(0, 0).getAttribute('alt')).eql('kitten 1')
+    .expect(getNthStatusAndImage(0, 0).getAttribute('title')).eql('kitten 1')
     .expect(getNthStatusAndImage(0, 1).getAttribute('alt')).eql('kitten 2')
+    .expect(getNthStatusAndImage(0, 1).getAttribute('title')).eql('kitten 2')
 })
 
 test('uploads alts when deleting and re-uploading media', async t => {