Add img title as well as alt (#66)

Fixes #57

routes/_components/LazyImage.html

@@ -5,6 +5,7 @@
       class="{{hidden ? 'hidden' : ''}} {{className || ''}}"
       aria-hidden="{{ariaHidden || ''}}"
       alt="{{alt || ''}}"
+      title="{{alt || ''}}"
       src="{{displaySrc}}"
       :width
       :height

routes/_components/NonAutoplayGifv.html

@@ -13,7 +13,8 @@
       />
   {{else}}
     <LazyImage
-      alt="{{label}}"
+      alt="{{label || ''}}"
+      title="{{label || ''}}"
       src="{{staticSrc}}"
       fallback="{{oneTransparentPixel}}"
       :width

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)"

routes/_components/dialog/components/ImageDialog.html

@@ -19,6 +19,7 @@
       width="{{width}}"
       height="{{height}}"
       alt="{{description || ''}}"
+      title="{{description || ''}}"
     />
   {{/if}}
 </ModalDialog>

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}}"

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 => {