fix(Aria): Option to remove it (#128)

Author: danilowoz

docs/intro.mdx

@@ -49,17 +49,17 @@ const MyFacebookLoader = () => <Facebook />
 
 | <p align="left">Name</p>|<p align="left">Type</p>|<p align="left">Default</p>| <p align="left">Description</p>                             |
 | ----------------------- | ----------- | ---------------------- | ------------------------------------------------------------------------- |
-| **animate**             | Boolean | true                 | `false` to render with no animation                                       |
-| **ariaLabel**           | String  | Loading interface... | Describe what element it is                                               |
-| **speed**               | Number  | 2                    | Animation speed in seconds                                                |
-| **className**           | String  | ''                   | Classname in the `<svg/>`                                                 |
-| **width**               | Number  | 400                  | viewBox width of `<svg/>`                                                 |
-| **height**              | Number  | 130                  | viewBox height of `<svg/>`                                                |
-| **rtl**                 | Boolean | false                | Right-to-left animation                                                   |
-| **preserveAspectRatio** | String  | xMidYMid meet        | Aspect ratio option of `<svg/>`                                           |
-| **primaryColor**        | String  | #f3f3f3              | Background                                                                |
-| **secondaryColor**      | String  | #ecebeb              | Animation color                                                           |
-| **primaryOpacity**      | Number  | 1                    | Background opacity (0 = transparent, 1 = opaque)                          |
-| **secondaryOpacity**    | Number  | 1                    | Animation opacity (0 = transparent, 1 = opaque)                           |
-| **style**               | Object  | null                 | Ex: `{ width: '100%', height: '70px' }`                                   |
-| **uniquekey**           | String  | random unique id       | Use the same value of prop key, that will solve inconsistency on the SSR. |
+| **animate**             | `Boolean`   | `true`                 | `false` to render with no animation                                       |
+| **ariaLabel**           | `String | Boolean` | `Loading interface...` | Describe what element it is                                        |
+| **speed**               | `Number`    | `2`                    | Animation speed in seconds                                                |
+| **className**           | `String`    | ` `                    | Classname in the `<svg/>`                                                 |
+| **width**               | `Number`    | `400`                  | viewBox width of `<svg/>`                                                 |
+| **height**              | `Number`    | `130`                  | viewBox height of `<svg/>`                                                |
+| **rtl**                 | `Boolean`   | `false`                | Right-to-left animation                                                   |
+| **preserveAspectRatio** | `String`    | `xMidYMid meet`        | Aspect ratio option of `<svg/>`                                           |
+| **primaryColor**        | `String`    | `#f3f3f3`              | Background                                                                |
+| **secondaryColor**      | `String`    | `#ecebeb`              | Animation color                                                           |
+| **primaryOpacity**      | `Number`    | `1`                    | Background opacity (0 = transparent, 1 = opaque)                          |
+| **secondaryOpacity**    | `Number`    | `1`                    | Animation opacity (0 = transparent, 1 = opaque)                           |
+| **style**               | `Object`    | `null`                 | Ex: `{ width: '100%', height: '70px' }`                                   |
+| **uniquekey**           | `String`    | random unique id       | Use the same value of prop key, that will solve inconsistency on the SSR. |

docs/usage.mdx

@@ -82,6 +82,16 @@ Additionally, pass viewBox props as empty string to remove viewBox.
 		<ContentLoader viewBox=""  />
 </Playground>
 
+## Custom aria label
+<Playground>
+		<ContentLoader ariaLabel="My custom loader"  />
+</Playground>
+
+### Remove aria label
+<Playground>
+		<ContentLoader ariaLabel={false}  />
+</Playground>
+
 ## BugFix in Safari
 When using `rgba` as a `primaryColor` or `secondaryColor` value, 
 [Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180),

src/Holder.js

@@ -4,7 +4,7 @@ import Svg from "./Svg"
 
 export type Props = {
   animate: boolean,
-  ariaLabel: string,
+  ariaLabel: string | boolean,
   className: string,
   height: number,
   preserveAspectRatio: string,

src/Svg.js

@@ -39,12 +39,12 @@ export default ({
       role="img"
       style={style}
       className={className}
-      aria-labelledby={ariaLabel}
+      aria-labelledby={ariaLabel ? ariaLabel : null}
       viewBox={`0 0 ${width} ${height}`}
       preserveAspectRatio={preserveAspectRatio}
       {...props}
     >
-      <title>{ariaLabel}</title>
+      {ariaLabel ? <title>{ariaLabel}</title> : null}
       <rect
         x="0"
         y="0"