From ce0bac7a3d76fffdee8630046ac84eb021770ca9 Mon Sep 17 00:00:00 2001
From: Joe <johani@discourse.org>
Date: Mon, 4 Nov 2019 07:15:14 +0800
Subject: [PATCH] FEATURE: fallback to image alt before filename if there's no
 title in lightboxes (#8286)

* use image alt as a fallback when there's no title

* update spec

we used to check that the overlay information is added when the image has a titie. This adds 2 more scenarios. One where an image has both a title and an alt, in which case the title should be used and alt ignored.

The other is when there's only an alt, it should then be used to generate the overlay
---
 lib/cooked_post_processor.rb                  |  2 +-
 spec/components/cooked_post_processor_spec.rb | 66 ++++++++++++++++++-
 2 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/lib/cooked_post_processor.rb b/lib/cooked_post_processor.rb
index a6dfd64218..78591ee254 100644
--- a/lib/cooked_post_processor.rb
+++ b/lib/cooked_post_processor.rb
@@ -426,7 +426,7 @@ class CookedPostProcessor
     informations = +"#{original_width}×#{original_height}"
     informations << " #{upload.human_filesize}" if upload
 
-    a["title"] = CGI.escapeHTML(img["title"] || filename)
+    a["title"] = CGI.escapeHTML(img["title"] || img["alt"] || filename)
 
     meta.add_child create_icon_node("far-image")
     meta.add_child create_span_node("filename", a["title"])
diff --git a/spec/components/cooked_post_processor_spec.rb b/spec/components/cooked_post_processor_spec.rb
index 174c8b0ef5..c1870ed6b1 100644
--- a/spec/components/cooked_post_processor_spec.rb
+++ b/spec/components/cooked_post_processor_spec.rb
@@ -597,7 +597,38 @@ describe CookedPostProcessor do
 
       end
 
-      context "with title" do
+      context "with title and alt" do
+        fab!(:post) do
+          Fabricate(:post, raw: <<~HTML)
+          <img src="#{upload.url}" title="WAT" alt="RED">
+          HTML
+        end
+
+        let(:cpp) { CookedPostProcessor.new(post, disable_loading_image: true) }
+
+        before do
+          SiteSetting.max_image_height = 2000
+          SiteSetting.create_thumbnails = true
+          FastImage.expects(:size).returns([1750, 2000])
+          OptimizedImage.expects(:resize).returns(true)
+          FileStore::BaseStore.any_instance.expects(:get_depth_for).returns(0)
+        end
+
+        it "generates overlay information using image title and ignores alt" do
+          cpp.post_process
+
+          expect(cpp.html).to match_html <<~HTML
+            <p><div class="lightbox-wrapper"><a class="lightbox" href="//test.localhost#{upload.url}" data-download-href="//test.localhost/uploads/default/#{upload.sha1}" title="WAT"><img src="//test.localhost/uploads/default/optimized/1X/#{upload.sha1}_#{OptimizedImage::VERSION}_690x788.png" title="WAT" alt="RED" width="690" height="788"><div class="meta">
+            <svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg><span class="filename">WAT</span><span class="informations">1750×2000 1.21 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg>
+            </div></a></div></p>
+          HTML
+
+          expect(cpp).to be_dirty
+        end
+
+      end
+
+      context "with title only" do
         fab!(:post) do
           Fabricate(:post, raw: <<~HTML)
           <img src="#{upload.url}" title="WAT">
@@ -614,7 +645,7 @@ describe CookedPostProcessor do
           FileStore::BaseStore.any_instance.expects(:get_depth_for).returns(0)
         end
 
-        it "generates overlay information" do
+        it "generates overlay information using image title" do
           cpp.post_process
 
           expect(cpp.html).to match_html <<~HTML
@@ -628,6 +659,37 @@ describe CookedPostProcessor do
 
       end
 
+      context "with alt only" do
+        fab!(:post) do
+          Fabricate(:post, raw: <<~HTML)
+          <img src="#{upload.url}" alt="RED">
+          HTML
+        end
+
+        let(:cpp) { CookedPostProcessor.new(post, disable_loading_image: true) }
+
+        before do
+          SiteSetting.max_image_height = 2000
+          SiteSetting.create_thumbnails = true
+          FastImage.expects(:size).returns([1750, 2000])
+          OptimizedImage.expects(:resize).returns(true)
+          FileStore::BaseStore.any_instance.expects(:get_depth_for).returns(0)
+        end
+
+        it "generates overlay information using image alt" do
+          cpp.post_process
+
+          expect(cpp.html).to match_html <<~HTML
+            <p><div class="lightbox-wrapper"><a class="lightbox" href="//test.localhost#{upload.url}" data-download-href="//test.localhost/uploads/default/#{upload.sha1}" title="RED"><img src="//test.localhost/uploads/default/optimized/1X/#{upload.sha1}_#{OptimizedImage::VERSION}_690x788.png" alt="RED" width="690" height="788"><div class="meta">
+            <svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg><span class="filename">RED</span><span class="informations">1750×2000 1.21 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg>
+            </div></a></div></p>
+          HTML
+
+          expect(cpp).to be_dirty
+        end
+
+      end
+
       context "topic image" do
         let(:post) { Fabricate(:post_with_uploaded_image) }
         let(:cpp) { CookedPostProcessor.new(post) }