Merge pull request #36 from openscript/master

feat: add role attribute

Author: maxeth

example/pages/accessibility.mdx

@@ -54,6 +54,7 @@ You can also add an `aria-label` directly on the `<TypeAnimation />` component t
 ```tsx {2}
 <TypeAnimation
   aria-label="We produce food for Mice, Hamsters, Guinea Pigs and Chinchillas"
+  role="marquee"
   sequence={[
     // Same String at the start will only be typed once, initially
     'We produce food for Mice',
@@ -70,6 +71,8 @@ You can also add an `aria-label` directly on the `<TypeAnimation />` component t
 />
 ```
 
+Setting an `aria-label` requires setting a `role` as well. The role [`marquee`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role) is probably the most suitable for this situation.
+
 By applying an `aria-label`, the dynamically typed contents of your sequence will automatically be wrapped in a `<span/>` with `aria-hidden="true"` and removed from the accessibility tree:
 
 ```html {aria-hidden="true"}

src/components/TypeAnimation/index.tsx

@@ -26,7 +26,7 @@ const TypeAnimation = forwardRef<
     },
     ref: React.ForwardedRef<HTMLElementTagNameMap[Wrapper]>
   ) => {
-    const { 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = rest;
+    const { 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, role } = rest;
 
     if (!deletionSpeed) {
       deletionSpeed = speed;
@@ -108,6 +108,7 @@ const TypeAnimation = forwardRef<
       <WrapperEl
         aria-hidden={ariaHidden}
         aria-label={ariaLabel}
+        role={role}
         style={style}
         className={finalClassName}
         children={