What needs to be done? Why does it need to be done?
When creating an "icon button" by using the icon prop on a button, there is currently no way to add a text alternative to the icon image for screen readers and other assistive devices. To remedy this we should:
- require a non-empty alt text prop when the
icon prop is used (it can be applied to the svg as an aria-label attribute)
- include a
role="img" attribute on the SVG to ensure it is recognized by screen readers as "meaningful" rather than "decorative"
Additional context
We worked around this for https://github.com/Recidiviz/recidiviz-dashboards/issues/6119 by putting an Icon inside Button and DropdownTrigger elements instead of passing the icon-related props, and applying these attributes manually
What needs to be done? Why does it need to be done?
When creating an "icon button" by using the
iconprop on a button, there is currently no way to add a text alternative to the icon image for screen readers and other assistive devices. To remedy this we should:iconprop is used (it can be applied to the svg as anaria-labelattribute)role="img"attribute on the SVG to ensure it is recognized by screen readers as "meaningful" rather than "decorative"Additional context
We worked around this for https://github.com/Recidiviz/recidiviz-dashboards/issues/6119 by putting an
IconinsideButtonandDropdownTriggerelements instead of passing the icon-related props, and applying these attributes manually