search

maxeth / react-type-animation

A React typewriter animation based on typical with extended functionality and customization.
https://react-type-animation.netlify.app/
MIT License
427 stars 24 forks source link

Forward role attribute #35

Closed openscript closed 1 year ago

openscript commented 1 year ago

Thank you for your work on this package!

I've followed your accessibility guide and added a aria-label. If we add an aria-label also a role should be added:

image

So I suggest to also accept a role prop and forward it to the created wrapping element.

maxeth commented 1 year ago

Hey,

I don't think setting an aria-label is the optimal solution, because – as your error message suggests — it's intended to be used on interactive elements that are supposed to be accessible via assistive technologies.

Since such an animation is for decorative purposes and has 0 interaction, I think the only proper role for it would be "presentation", and in that case, all ARIA semantics will be automatically removed from the element, including aria-label, similarly to just setting a css display none.

So if you set an aria-label, it would contradict with setting the component's true role "presentation", since this role erases the meaning of the aria-label.

At this point I'd just go with the visually-hidden class if you want to get rid of the lighthouse warnings.

Regarding your feature request: Which role do you think would be meaningful for this component? If it's presentation or none, then passing the role prop would do nothing as described above.

maxeth commented 1 year ago

Added in react-type-animation@3.2.0.