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

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

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