search

phosphor-icons / webcomponents

A flexible icon family for the web
Other
12 stars 2 forks source link

[A11y] Adding labels for screen readers #9

Closed aarongerig closed 1 month ago

aarongerig commented 1 month ago

As mentioned in this issue, phosphor allows the user/dev to add arbitrary attributes such as aria-label to the icons. Unfortunately, I cannot find any documented option to do that with the web components library.

Would it be possible to add that feature or is it intended to restrict web components to not have that flexibility?

rektdeckard commented 1 month ago

The web components in this library are real elements, so you can already add whatever attributes are necessary to the custom element itself:

<ph-link role="img" aria-label="Link icon"></ph-link>

As far as I know, there's no reason to apply accessible labels to anything inside the Shadow DOM; labeling the wrapping custom element should be sufficient!