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

A11Y: SVG icons should be hidden unless a label is provided (#33059)

Browse Source 
This is fairly minor because usually SVGs aren't focusable, but this
adds `aria-hidden='true'` to all SVGs by default unless either an
`aria-label` or `label` is provided. This gets reported to us in
automated tests from time to time.

So now:

1. SVG: `aria-hidden="true"` (new behavior, safe default when no label
is provided)
2. SVG with `label` param: `aria-hidden="true"` and `sr-only` label is
provided
3. SVG with `aria-label` param: `aria-hidden="false"` and `aria-label`
is provided
This commit is contained in:
Kris
2025-06-04 08:21:36 -04:00
committed by GitHub
parent 1633d7788a
commit f66339338e
3 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/app/lib/icon-library.js
View File

@ -156,12 +156,10 @@ registerIconRenderer({
const id = escape(handleIconId(icon)); const id = escape(handleIconId(icon));
let html = `<svg class='${escape(iconClasses(icon, params))} svg-string'`; let html = `<svg class='${escape(iconClasses(icon, params))} svg-string'`;
if (params.label) { if (params["aria-label"]) {
html += ` aria-hidden='false' aria-label='${escape(params["aria-label"])}'`;
} else {
html += " aria-hidden='true'"; html += " aria-hidden='true'";
} else if (params["aria-label"]) {
html += ` aria-hidden='false' aria-label='${escape(
params["aria-label"]
)}'`;
} }
html += ` xmlns="${SVG_NAMESPACE}"><use href="#${id}" /></svg>`; html += ` xmlns="${SVG_NAMESPACE}"><use href="#${id}" /></svg>`;
if (params.label) { if (params.label) {

4
app/assets/javascripts/discourse/tests/integration/helpers/d-icon-test.gjs
View File

@ -16,7 +16,7 @@ module("Integration | Helper | d-icon", function (hooks) {
assert assert
.dom(".test") .dom(".test")
.hasHtml( .hasHtml(
'<svg class="fa d-icon d-icon-bars svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#bars"></use></svg>' '<svg class="fa d-icon d-icon-bars svg-icon svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#bars"></use></svg>'
); );
}); });
@ -30,7 +30,7 @@ module("Integration | Helper | d-icon", function (hooks) {
assert assert
.dom(".test") .dom(".test")
.hasHtml( .hasHtml(
'<svg class="fa d-icon d-icon-d-watching svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#discourse-bell-exclamation"></use></svg>' '<svg class="fa d-icon d-icon-d-watching svg-icon svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#discourse-bell-exclamation"></use></svg>'
); );
}); });
}); });

16
plugins/discourse-local-dates/test/javascripts/unit/local-date-builder-test.js
View File

@ -467,7 +467,7 @@ module("Unit | Library | local-date-builder", function () {
{ {
current: true, current: true,
formatted: formatted:
'Sunday, March 22, 2020 <br /><svg class=\'fa d-icon d-icon-clock svg-icon svg-string\' xmlns="http://www.w3.org/2000/svg"><use href="#clock" /></svg> 12:00 AM → 1:30 AM', "Sunday, March 22, 2020 <br /><svg class='fa d-icon d-icon-clock svg-icon svg-string' aria-hidden='true' xmlns=\"http://www.w3.org/2000/svg\"><use href=\"#clock\" /></svg> 12:00 AM → 1:30 AM",
timezone: "Paris", timezone: "Paris",
}, },
], ],
@ -499,7 +499,7 @@ module("Unit | Library | local-date-builder", function () {
{ {
current: true, current: true,
formatted: formatted:
'Sunday, March 22, 2020 <br /><svg class=\'fa d-icon d-icon-clock svg-icon svg-string\' xmlns="http://www.w3.org/2000/svg"><use href="#clock" /></svg> 11:34 AM', "Sunday, March 22, 2020 <br /><svg class='fa d-icon d-icon-clock svg-icon svg-string' aria-hidden='true' xmlns=\"http://www.w3.org/2000/svg\"><use href=\"#clock\" /></svg> 11:34 AM",
timezone: "Paris", timezone: "Paris",
}, },
], ],
@ -555,22 +555,22 @@ module("Unit | Library | local-date-builder", function () {
{ {
current: true, current: true,
formatted: formatted:
'Tuesday, April 7, 2020 <br /><svg class=\'fa d-icon d-icon-clock svg-icon svg-string\' xmlns="http://www.w3.org/2000/svg"><use href="#clock" /></svg> 2:54 PM', "Tuesday, April 7, 2020 <br /><svg class='fa d-icon d-icon-clock svg-icon svg-string' aria-hidden='true' xmlns=\"http://www.w3.org/2000/svg\"><use href=\"#clock\" /></svg> 2:54 PM",
timezone: "Paris", timezone: "Paris",
}, },
{ {
formatted: formatted:
'Tuesday, April 7, 2020 <br /><svg class=\'fa d-icon d-icon-clock svg-icon svg-string\' xmlns="http://www.w3.org/2000/svg"><use href="#clock" /></svg> 1:54 PM', "Tuesday, April 7, 2020 <br /><svg class='fa d-icon d-icon-clock svg-icon svg-string' aria-hidden='true' xmlns=\"http://www.w3.org/2000/svg\"><use href=\"#clock\" /></svg> 1:54 PM",
timezone: "London", timezone: "London",
}, },
{ {
formatted: formatted:
'Tuesday, April 7, 2020 <br /><svg class=\'fa d-icon d-icon-clock svg-icon svg-string\' xmlns="http://www.w3.org/2000/svg"><use href="#clock" /></svg> 1:54 PM', "Tuesday, April 7, 2020 <br /><svg class='fa d-icon d-icon-clock svg-icon svg-string' aria-hidden='true' xmlns=\"http://www.w3.org/2000/svg\"><use href=\"#clock\" /></svg> 1:54 PM",
timezone: "Lagos", timezone: "Lagos",
}, },
{ {
formatted: formatted:
'Tuesday, April 7, 2020 <br /><svg class=\'fa d-icon d-icon-clock svg-icon svg-string\' xmlns="http://www.w3.org/2000/svg"><use href="#clock" /></svg> 10:54 PM', "Tuesday, April 7, 2020 <br /><svg class='fa d-icon d-icon-clock svg-icon svg-string' aria-hidden='true' xmlns=\"http://www.w3.org/2000/svg\"><use href=\"#clock\" /></svg> 10:54 PM",
timezone: "Sydney", timezone: "Sydney",
}, },
], ],
@ -590,12 +590,12 @@ module("Unit | Library | local-date-builder", function () {
{ {
current: true, current: true,
formatted: formatted:
'Wednesday, May 13, 2020 <br /><svg class=\'fa d-icon d-icon-clock svg-icon svg-string\' xmlns="http://www.w3.org/2000/svg"><use href="#clock" /></svg> 11:00 AM', "Wednesday, May 13, 2020 <br /><svg class='fa d-icon d-icon-clock svg-icon svg-string' aria-hidden='true' xmlns=\"http://www.w3.org/2000/svg\"><use href=\"#clock\" /></svg> 11:00 AM",
timezone: "Los Angeles", timezone: "Los Angeles",
}, },
{ {
formatted: formatted:
'Wednesday, May 13, 2020 <br /><svg class=\'fa d-icon d-icon-clock svg-icon svg-string\' xmlns="http://www.w3.org/2000/svg"><use href="#clock" /></svg> 6:00 PM', "Wednesday, May 13, 2020 <br /><svg class='fa d-icon d-icon-clock svg-icon svg-string' aria-hidden='true' xmlns=\"http://www.w3.org/2000/svg\"><use href=\"#clock\" /></svg> 6:00 PM",
timezone: "UTC", timezone: "UTC",
}, },
], ],