Accessibility concerns regarding components with only icons as content

[aweell]

For some components (toggle group, button, etc...) that can be rendered only with icons, there's no possibility to add an associate label to indicate the context o purpose of the action. This is an accessibility problem and should be fixed.

Since it's impossible to determine the content, is the component user's (developer) responsibility to add a meaningful title to the visual content, in order to provide information about the context/action to the assistive technologies.

Fig. 1 - Toggle group with only icons as content

The components that can render icons or images without an associated label should be identified.

Proposed solutions

• Use a visually-hidden <label> element
• Use aria-label

Both solutions would require a prop where the user can provide the content that would be passed to these elements.

References

• Nont-text content - Understanding SC 1.1.1
• Sara Soueidan - Accesible icon buttons

[GomezIvann]

I'm fully agree with this discussion. We need to review only-icon components.

[GomezIvann]

An issue (#1490) has been created to explore this!

[Mil4n0r]

This has been fixed since the accessibility test PR. We can close this discussion