fix#1471: every element is focusable on web (#1585)

As described in #1471, each SVG element is focusable/tabable on web by default. This can create issues in keyboard navigation.
As explained by @jondkoon #1471 (comment), the TouchableMixin attaches blur handler which makes SVG elements focusable.

So, to solve this, we only attach touchable mixin handlers if the element has any touchable props.

Author: intergalacticspacehighway

src/ReactNativeSVG.web.ts

@@ -10,6 +10,7 @@ import {
 import { NumberArray, NumberProp } from './lib/extract/types';
 import SvgTouchableMixin from './lib/SvgTouchableMixin';
 import { resolve } from './lib/resolve';
+import { getHasTouchableProperty } from './lib/util';
 
 const createElement = cE || ucE;
 
@@ -87,15 +88,10 @@ const prepare = <T extends BaseProps>(
     fontStyle,
     style,
     forwardedRef,
-    onPress,
-    onPressIn,
-    onPressOut,
-    onLongPress,
     // @ts-ignore
     ...rest
   } = props;
-  const hasTouchableProperty =
-    onPress || onPressIn || onPressOut || onLongPress;
+  const hasTouchableProperty = getHasTouchableProperty(props);
   const clean: {
     onStartShouldSetResponder?: (e: GestureResponderEvent) => boolean;
     onResponderMove?: (e: GestureResponderEvent) => void;
@@ -245,7 +241,11 @@ export class WebShape<
   ) => boolean;
   constructor(props: P, context: C) {
     super(props, context);
-    SvgTouchableMixin(this);
+    const hasTouchableProperty = getHasTouchableProperty(props);
+  
+    // Do not attach touchable mixin handlers if SVG element doesn't have a touchable prop
+    if (hasTouchableProperty) SvgTouchableMixin(this);
+    
     this._remeasureMetricsOnActivation = remeasure.bind(this);
   }
 }

src/lib/util.ts

@@ -11,4 +11,10 @@ export function pickNotNil(object: { [prop: string]: unknown }) {
   return result;
 }
 
+export const getHasTouchableProperty = (props: any) => {
+  return (
+    props.onPress || props.onPressIn || props.onPressOut || props.onLongPress
+  );
+};
+
 export const idPattern = /#([^)]+)\)?$/;