[core] fix(Icon): reference a11y name via aria-labelledby #5365
Conversation
| width={size} | ||
| height={size} | ||
| viewBox={viewBox} | ||
| aria-labelledby={title ? titleId : undefined} |
There was a problem hiding this comment.
why not just use aria-label? the <title> is not visible on the page anyway, so I'm not sure that aria-labelledby is the best approach here.
There was a problem hiding this comment.
an item does not necessarily have to be visible for aria-labelledby to reference it and its text contents. In this case, I am following the most common examples of how labelling an SVG is done.
Example 1:
https://www.tpgi.com/using-aria-enhance-svg-accessibility/
Example 2:
https://www.unimelb.edu.au/accessibility/techniques/accessible-svgs
There was a problem hiding this comment.
alright, that 1st example seems quite outdated but the 2nd seems alright. still I prefer to go by what MDN says. I've verified that this is legit, according to item 5 here:
The
aria-labelledbyproperty value can include content from elements that aren't even visible.
| width={size} | ||
| height={size} | ||
| viewBox={viewBox} | ||
| aria-labelledby={title ? titleId : undefined} |
There was a problem hiding this comment.
why not just use aria-label? the <title> is not visible on the page anyway, so I'm not sure that aria-labelledby is the best approach here.
| width={size} | ||
| height={size} | ||
| viewBox={viewBox} | ||
| aria-labelledby={title ? titleId : undefined} |
There was a problem hiding this comment.
alright, that 1st example seems quite outdated but the 2nd seems alright. still I prefer to go by what MDN says. I've verified that this is legit, according to item 5 here:
The
aria-labelledbyproperty value can include content from elements that aren't even visible.
adidahiya
changed the title
Fixes #0000
Checklist
Changes proposed in this pull request:
Improve a11y for
Iconelements (when has title, label thesvgso screen readers can read the title)Reviewers should focus on:
Examples outlined here: https://www.tpgi.com/using-aria-enhance-svg-accessibility/ and here: https://www.unimelb.edu.au/accessibility/techniques/accessible-svgs