feat(babel-preset): fix 'role' attribute on svg element for react native (#787)

Author: slavikdenis

packages/babel-preset/src/index.test.ts

@@ -213,7 +213,7 @@ describe('preset', () => {
       "import * as React from \\"react\\";
       import Svg from \\"react-native-svg\\";
 
-      const SvgComponent = props => <Svg a=\\"#000\\" b=\\"#fff\\" width={24} height={24} role=\\"img\\" {...props} />;
+      const SvgComponent = props => <Svg a=\\"#000\\" b=\\"#fff\\" width={24} height={24} accessibilityRole=\\"image\\" {...props} />;
 
       export default SvgComponent;"
     `)

packages/babel-preset/src/index.ts

@@ -50,10 +50,15 @@ function replaceMapToValues(replaceMap: { [key: string]: string }): Value[] {
 const plugin = (_: ConfigAPI, opts: Options) => {
   let toRemoveAttributes = ['version']
   let toAddAttributes: Attribute[] = [
-    {
-      name: 'role',
-      value: 'img',
-    },
+    opts?.native === true
+      ? {
+          name: 'accessibilityRole',
+          value: 'image',
+        }
+      : {
+          name: 'role',
+          value: 'img',
+        },
   ]
 
   if (opts.svgProps) {