github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-23 00:21:36 +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

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",
},
],