github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-24 16:57:24 +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));
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'";
} else if (params["aria-label"]) {
html += ` aria-hidden='false' aria-label='${escape(
params["aria-label"]
)}'`;
}
html += ` xmlns="${SVG_NAMESPACE}"><use href="#${id}" /></svg>`;
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
.dom(".test")
.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
.dom(".test")
.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,
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",
},
],
@ -499,7 +499,7 @@ module("Unit | Library | local-date-builder", function () {
{
current: true,
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",
},
],
@ -555,22 +555,22 @@ module("Unit | Library | local-date-builder", function () {
{
current: true,
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",
},
{
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",
},
{
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",
},
{
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",
},
],
@ -590,12 +590,12 @@ module("Unit | Library | local-date-builder", function () {
{
current: true,
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",
},
{
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",
},
],