Skip to content

[design-system] icon button accessibility #188

@macfarlandian

Description

@macfarlandian

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions