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