github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 11:44:49 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
This applies to all images posted that do not have a user description.
This commit is contained in:
Bianca Nenciu 2022-10-12 14:07:37 +03:00 committed by GitHub
parent c707ee714d
commit 33087f0bdf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

2
spec/fixtures/md/spec.txt vendored
View File

@ -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>
````````````````````````````````

20
spec/lib/pretty_text_spec.rb
View File

@ -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="" width="220" height="100"><br>
<img src="http://png.com/my.png" alt="" role="presentation"><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>
<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"><br>
<img src="http://png.com/my.png" alt="" width="150" height="68"><br>
<img src="http://png.com/my.png" alt="" width="110" height="50"></p>
<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" role="presentation"><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" role="presentation"><br>
<img src="http://png.com/my.png" alt="" width="110" height="50" role="presentation"></p>
HTML
expect(cooked).to eq(html.strip)