Declare icon <svg> as either decorative OR non-decorative icons with text alternatives

[williamjstanton]

🚀 Feature Proposal

• AS A product designer or engineer,
• I WANT TO declare that the use of icons is either used for decorative purposes only, or needs to have a text alternative,
• SO THAT I can build a more accessible product for users who cannot see the icons used in the design.

Motivation

Today, icons are presumed always decorative, with an ARIA presentation role on the

Example

In the "add pill", the '+' icon communicates something visually that is not represented in text. A wrapper needed to be applied to the <svg> where we added a fake ARIA img role, and an aria-label string "add" to communicate a text alternative.

Proposal

Icon graphics need a boolean "isDecorative"

• true: maintain existing behavior with ARIA presentation role
• false: remove ARIA presentation role, set aria-label string to the <svg>

Questions:

• Can we require an aria-label string somehow?
• Where should the string come from? Authors? Can we include enumerated suggestions...?

AC

Updated storybook example where the role is passed to the icon img