feat(babel-preset): fix 'role' attribute on svg element for react nat…

…ive (#787)
gregberge · Oct 14, 2022 · 35d85e0 · 35d85e0
1 parent db35837
commit 35d85e0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/babel-preset/src/index.test.ts b/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;"
     `)

diff --git a/packages/babel-preset/src/index.ts b/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) {