SteffeyDev / react-native-popover-view

A well-tested, adaptable, lightweight <Popover> component for react-native
MIT License
613 stars 92 forks source link

Patch to make Popover work with Appium so the children of popover can be accessible #165

Open jenzhang2000 opened 1 year ago

jenzhang2000 commented 1 year ago

Hi! ๐Ÿ‘‹

Firstly, thanks for your work on this project! ๐Ÿ™‚

Today I used patch-package to patch react-native-popover-view@5.1.7 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-popover-view/dist/BasePopover.js b/node_modules/react-native-popover-view/dist/BasePopover.js
index d6c290c..d7855e7 100644
--- a/node_modules/react-native-popover-view/dist/BasePopover.js
+++ b/node_modules/react-native-popover-view/dist/BasePopover.js
@@ -403,14 +403,14 @@ var BasePopover = /** @class */ (function (_super) {
         var containerStyle = __assign(__assign({}, styles.container), { opacity: animatedValues.fade });
         var backgroundColor = flattenedPopoverStyle.backgroundColor ||
             styles.popoverContent.backgroundColor;
-        return (React.createElement(View, { pointerEvents: "box-none", style: [styles.container, { top: -1 * FIX_SHIFT }] },
-            React.createElement(View, { pointerEvents: "box-none", style: [styles.container, { top: FIX_SHIFT, flex: 1 }], onLayout: function (evt) { return _this.props.onDisplayAreaChanged(new Rect(evt.nativeEvent.layout.x, evt.nativeEvent.layout.y - FIX_SHIFT, evt.nativeEvent.layout.width, evt.nativeEvent.layout.height)); } }),
-            React.createElement(Animated.View, { pointerEvents: "box-none", style: containerStyle },
-                this.props.showBackground !== false && (React.createElement(TouchableWithoutFeedback, { onPress: this.props.onRequestClose },
-                    React.createElement(Animated.View, { style: backgroundStyle }))),
-                React.createElement(View, { pointerEvents: "box-none", style: __assign({ top: 0, left: 0 }, shadowStyle) },
-                    React.createElement(Animated.View, { style: transformStyle },
-                        React.createElement(View, { ref: this.popoverRef, style: contentWrapperStyle, onLayout: function (evt) {
+        return (React.createElement(View, {accessible: false, pointerEvents: "box-none", style: [styles.container, { top: -1 * FIX_SHIFT }] },
+            React.createElement(View, { accessible: false, pointerEvents: "box-none", style: [styles.container, { top: FIX_SHIFT, flex: 1 }], onLayout: function (evt) { return _this.props.onDisplayAreaChanged(new Rect(evt.nativeEvent.layout.x, evt.nativeEvent.layout.y - FIX_SHIFT, evt.nativeEvent.layout.width, evt.nativeEvent.layout.height)); } }),
+            React.createElement(Animated.View, { accessible: false, pointerEvents: "box-none", style: containerStyle },
+                this.props.showBackground !== false && (React.createElement(TouchableWithoutFeedback, { accessible: false, onPress: this.props.onRequestClose },
+                    React.createElement(Animated.View, { accessible: false, style: backgroundStyle }))),
+                React.createElement(View, { accessible: false, pointerEvents: "box-none", style: __assign({ top: 0, left: 0 }, shadowStyle, {flex:1, zIndex: 3}) },
+                    React.createElement(Animated.View, {accessible: false, style: transformStyle },
+                        React.createElement(View, { accessible: false, ref: this.popoverRef, style: contentWrapperStyle, onLayout: function (evt) {
                                 var layout = __assign({}, evt.nativeEvent.layout);
                                 setTimeout(function () { return _this._isMounted &&
                                     _this.measureContent(new Size(layout.width, layout.height)); }, 10);

This issue body was partially generated by patch-package.

aniketbiswas commented 7 months ago

hi @jenzhang2000 , what does this patch is fixing, I see that it is only adding accessible = false, shouldn't as best practices the components should be accessible ?