freenowtech
Icons (SVGs) are not accessible
Describe the feature you'd like
Currently Wave exposes a lot of icons which should accept a title for accessibility purposes, but the IconProps are not expecting this title.
The issue resides in the types since the props passed to the icons are actually being forwarded to the inner <svg>.
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" fill="none">
<path
d="M11.71 2l10.71 19.04H1L11.71 2zm0 13.64a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4zm1-5.8h-2v4.8h2v-4.8z"
fill="currentColor"
/>
</svg>
If we allow to pass the title we will be improving our accessibility, and as a positive side effect now it will be possible to query the icons when testing using ByTitle.
Related to #164
I am not sure how accessible they should be because if they are used for decorative purposes they must be marked in such a way to avoid screen readers focusing on them.
What do you think about the optional title prop which user can provide, and if not, we mark the whole icon as decoration?
Another thing to highlight in the documentation is that the accessibility props should not be used only for testing purposes. It is a wrong approach which can lead to confusion in the application. If something is needed only for testing, not for accessibility, the data-testid must be used
For purely decorative icon variant, I think aria-hidden='true' attribute can be used to not expose it to the Accessibility API (hide from screen readers) :)
Then with an optional title prop as Nik said, we could have something like this..
..but, I have also put <desc> in the example, as I wanted to suggest, wouldn't it be useful to also add optional desc prop, if we're improving accessibility of SVG's now? As it can be very helpful for users with assistive technology in adding additional context / description, when title isn't enough.. For example, with icons like Mobility icons or Brand, or Trip category icons?
For example, SurgeCircleOutlineIcon if this is used even in context, Surge Circle will not say much to the user using screen reader unless there is some longer description, containing its purpose or design :)
@JanHamara for description there is atia-decribedby, but as i recall icons are pure svgs so aria-props aren't applicable to them
Aria attributes were added in SVG 2.0 :) Also, in the example both title and description are included in aria-labelledby because it has better screen-reader support than aria-describedby (check Tip #4 here
@nlopin as I understand it ideally we should be using aria-decribedby for the description, but since there is not a lot of support then I'd go for using the tip that @JanHamara mentioned
