feat: add role attribute

[openscript]

As mentioned in #35 a role should be provided alongside the aria-label attribute.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-type-animation	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 8, 2023 3:04pm

[netlify[bot]]

✅ Deploy Preview for react-type-animation ready!

Name	Link
🔨 Latest commit	2e4f53f7608245556c6e21a47af221751a34adf9
🔍 Latest deploy log	https://app.netlify.com/sites/react-type-animation/deploys/64d2594c352cca000842bc5a
😎 Deploy Preview	https://deploy-preview-36--react-type-animation.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for voluble-paletas-a3dba8 ready!

Name	Link
🔨 Latest commit	2e4f53f7608245556c6e21a47af221751a34adf9
🔍 Latest deploy log	https://app.netlify.com/sites/voluble-paletas-a3dba8/deploys/64d2594c82541a000881f9ac
😎 Deploy Preview	https://deploy-preview-36--voluble-paletas-a3dba8.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[maxeth]

Hey,

thanks for suggesting the marquee role, haven't seen that yet, and it seems appropriate for this component.

Setting role="figure" would be another idea that would also make it worth passing the role as a prop.

The major issue is that we're misusing aria-label as I previously commented.

As a workaround for now, before i merge and publish the new version with your PR, I think you can just wrap the type animation in a <figure> together with a <figcaption> which contains the contents of the aria-label and does not risk being ignored by screen readers as with the aria-label.

So something like this:

<figure>
  <TypeAnimation aria-hidden="true" [...] />
  <figcaption> Main contents of the animation text here </figcaption>
</figure>

I think this approach is actually the best, without any aria-labels or roles. I'll update the docs and component accordingly and probably remove the aria-label section.

[openscript]

I've been testing <figure> with Talkback on my Android phone and it will mention a graphic. On Apple devices it will talk about an image. After some more digging I found this: https://www.hassellinclusion.com/blog/figure-figcaption-extended-alternate-text-screen-readers/

So I came to the conclusion that role="marquee" and an aria-label is more precise for a screen reader.