Closed boaticus closed 5 years ago
This has been on my todo list in my head for a while.
<Icon/>Hello
By the way due to my backlog right now I won't be able to get to this for a bit unfortunately, but lets figure out what this needs to look like.
We can generate aria-labelledby="myUniqueTitleID myUniqueDescID"
id's dynamically if the attributes for title
and description
are set.
title
is set assign generated id and insert element.description
is set, but not title
throw exception.title
&& description
are assigned = awesome.title
&& description
are assigned = lets set role="presentation"
Am I missing any edge cases?
Started updating the unit tests for this feature to match the props
above. Hopefully have some time tomorrow to work on this and get it pushed.
<button><Icon /> User Profile</button>
<button><Icon title="User Profile" /></button>
<button aria-label="User Profile"><Icon /></button> <!-- More correct? -->
<button><Icon title="User Profile" description="User Profile Icon" /></button>
The last example probably shouldn't be used in 99% of cases, but we'll support it.
master
. View them hereNeed to update <Stack>
next.
master
.Will publish it later this week. Might need a few more tests before I feel comfortable releasing.
Docs and a few more unit tests are in.
@boaticus Anything missing before we release it? Docs etc?
Excellent work @Templarian! Also, I took a look at the unit tests and they look great.
It looks like the only thing left to update for this issue are the docs.
Published!
There seems to be no way to add
title
ordesc
child elements, or their related ARIA attributes. Both are necessities for basic accessibility (a11y) affordances[1].Two goals here:
Be understood by accessible browsing technology like screen readers
Ability to have a description of the item appear when a user hovers their mouse over the SVG icon.
Both goals can be accomplished by accommodating ARIA attributes and the
title
and/ordesc
child elements.Remember: title and alt attributes added to the
svg
element are not valid, not supported by browsers, aren't read by screen readers, and don't display the tooltip on hover, and thus are insufficient for a11y concerns. To work reliably, it has to be the child element ofsvg
, not an attribute.With this change, I'd expect to have a title parameter on the
Icon
component, thusly:Which you'd expect to yield something akin to this:
Specifically, using the mdi icon from my example:
Here's an example using the desc attribute as well, which adds a description that will be read aloud by screen reader technology to give much-needed context to the SVG (here, an mdi icon):
Specifically, using the mdi icon from my example (line breaks added to aid in readability here):
All that said... has anyone else run into this issue when trying to make the icons accessible?
[1] https://css-tricks.com/accessible-svgs/