A11Y: Set role=presentation if alt attr is missing (#18546)

This applies to all images posted that do not have a user description.

app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js

@@ -958,7 +958,7 @@ eviltrout</p>
   test("URLs in BBCode tags", function (assert) {
     assert.cooked(
       "[img]http://eviltrout.com/eviltrout.png[/img][img]http://samsaffron.com/samsaffron.png[/img]",
-      '<p><img src="http://eviltrout.com/eviltrout.png" alt/><img src="http://samsaffron.com/samsaffron.png" alt/></p>',
+      '<p><img src="http://eviltrout.com/eviltrout.png" alt role="presentation"/><img src="http://samsaffron.com/samsaffron.png" alt role="presentation"/></p>',
       "images are properly parsed"
     );
 
@@ -987,6 +987,11 @@ eviltrout</p>
       '<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"></p>',
       "It allows data images"
     );
+
+    assert.cooked(
+      "![](http://folksy.com/images/folksy-colour.png)",
+      '<p><img src="http://folksy.com/images/folksy-colour.png" alt role="presentation"></p>'
+    );
   });
 
   test("attachment", function (assert) {
@@ -1162,7 +1167,7 @@ eviltrout</p>
     );
     assert.cookedPara(
       "[img]http://eviltrout.com/eviltrout.png[/img]",
-      '<img src="http://eviltrout.com/eviltrout.png" alt>',
+      '<img src="http://eviltrout.com/eviltrout.png" alt role="presentation">',
       "links images"
     );
     assert.cookedPara(
@@ -1210,7 +1215,7 @@ eviltrout</p>
     );
     assert.cookedPara(
       "[url=http://www.example.com][img]http://example.com/logo.png[/img][/url]",
-      '<a href="http://www.example.com" data-bbcode="true"><img src="http://example.com/logo.png" alt></a>',
+      '<a href="http://www.example.com" data-bbcode="true"><img src="http://example.com/logo.png" alt role="presentation"></a>',
       "supports [url] with an embedded [img]"
     );
   });

app/assets/javascripts/pretty-text/addon/allow-lister.js

@@ -173,6 +173,7 @@ export const DEFAULT_LIST = [
   "iframe[allowfullscreen]",
   "iframe[allow]",
   "img[alt]",
+  "img[role]",
   "img[height]",
   "img[title]",
   "img[width]",

app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js

@@ -253,7 +253,13 @@ function renderImageOrPlayableMedia(tokens, idx, options, env, slf) {
     }
   }
 
-  token.attrs[token.attrIndex("alt")][1] = altSplit.join("|");
+  const altValue = altSplit.join("|").trim();
+  if (altValue === "") {
+    token.attrSet("role", "presentation");
+  } else {
+    token.attrSet("alt", altValue);
+  }
+
   return slf.renderToken(tokens, idx, options);
 }
 

spec/fixtures/md/spec.txt

@@ -8564,7 +8564,7 @@ My ![foo bar](/path/to/train.jpg  "title"   )
 ```````````````````````````````` example
 ![](/url)
 .
-<p><img src="/url" alt="" /></p>
+<p><img src="/url" alt="" role="presentation" /></p>
 ````````````````````````````````
 
 

spec/lib/pretty_text_spec.rb

@@ -1771,13 +1771,13 @@ HTML
 
   it "supports img bbcode" do
     cooked = PrettyText.cook "[img]http://www.image/test.png[/img]"
-    html = "<p><img src=\"http://www.image/test.png\" alt=\"\"></p>"
+    html = "<p><img src=\"http://www.image/test.png\" alt=\"\" role=\"presentation\"></p>"
     expect(cooked).to eq(html)
   end
 
   it "provides safety for img bbcode" do
     cooked = PrettyText.cook "[img]http://aaa.com<script>alert(1);</script>[/img]"
-    html = '<p><img src="http://aaa.com&lt;script&gt;alert(1);&lt;/script&gt;" alt=""></p>'
+    html = '<p><img src="http://aaa.com&lt;script&gt;alert(1);&lt;/script&gt;" alt="" role="presentation"></p>'
     expect(cooked).to eq(html)
   end
 
@@ -1862,10 +1862,10 @@ HTML
 
       html = <<~HTML
         <p><img src="http://png.com/my.png" alt="title with | title" width="220" height="100"><br>
-        <img src="http://png.com/my.png" alt=""><br>
+        <img src="http://png.com/my.png" alt="" role="presentation"><br>
-        <img src="http://png.com/my.png" alt="" width="220" height="100"><br>
+        <img src="http://png.com/my.png" alt="" width="220" height="100" role="presentation"><br>
         <img src="http://png.com/my.png" alt="stuff"><br>
-        <img src="http://png.com/my.png" alt="" title="some title" width="110" height="50"></p>
+        <img src="http://png.com/my.png" alt="" title="some title" width="110" height="50" role="presentation"></p>
       HTML
 
       expect(cooked).to eq(html.strip)
@@ -1881,11 +1881,11 @@ HTML
       MD
 
       html = <<~HTML
-        <p><img src="http://png.com/my.png" alt="" width="110" height="50"><br>
+        <p><img src="http://png.com/my.png" alt="" width="110" height="50" role="presentation"><br>
-        <img src="http://png.com/my.png" alt="" width="110" height="50"><br>
+        <img src="http://png.com/my.png" alt="" width="110" height="50" role="presentation"><br>
-        <img src="http://png.com/my.png" alt="" width="110" height="50"><br>
+        <img src="http://png.com/my.png" alt="" width="110" height="50" role="presentation"><br>
-        <img src="http://png.com/my.png" alt="" width="150" height="68"><br>
+        <img src="http://png.com/my.png" alt="" width="150" height="68" role="presentation"><br>
-        <img src="http://png.com/my.png" alt="" width="110" height="50"></p>
+        <img src="http://png.com/my.png" alt="" width="110" height="50" role="presentation"></p>
       HTML
 
       expect(cooked).to eq(html.strip)