Allow overriding the internal screenReaerEnabled value (#148)

* Web setting screenReaderEnabled value to true in normal web app running mode. Until we figure out the root cause, to unblock the usage of component in web apps, removing the condition to disable gesture move. * Allow overriding internal screenReaderEnabled * Updated readme
UdaySravanK · Feb 2, 2025 · 509c902 · 509c902
1 parent a4d5626
commit 509c902
Show file tree

Hide file tree

Showing 7 changed files with 405 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,18 @@
 
 <hr>
 
+
+## Description
+- Highly customizable "swipe to submit" category button. 
+- Generally used in exchange of regular buttons to avoid accidental taps.
+- This component works for Android, iOS and Web application.
+- Supports RTL out of the box.
+- Provides accessiblity support.
+- Component has more than 85% test coverge.
+- 100% TypeScript
+- MIT License
+
+
 ## Installation 
 
 ```bash
@@ -65,6 +77,12 @@ import SwipeButton from 'rn-swipe-button';
 </div>
 <hr>
 
+<h2 style="color:darkgreen;">Web Demo</h2>
+<p align="center">
+  <img src="https://github.com/UdaySravanK/RNSwipeButtonDemo/blob/main/assets/images/rn-swipe-button-web.gif" width="400"/>
+</p>
+
+
 <h2 style="color:darkgreen;">Component properties</h2>
 <pre style="font-size: 15px; color: brown;">
     <b>containerStyles</b>: PropTypes.object,
@@ -90,7 +108,7 @@ import SwipeButton from 'rn-swipe-button';
     <b>railFillBorderColor</b>: PropTypes.string,
     <b>railStyles</b>: PropTypes.object,
     <b>resetAfterSuccessAnimDelay</b>: PropTypes.number, <span style="color: blueviolet">// This is delay before resetting the button after successful swipe When shouldResetAfterSuccess = true </span>
-    <b>screenReaderEnabled</b>: PropTypes.bool,
+    <b>screenReaderEnabled</b>: PropTypes.bool, <span style="color: blueviolet">// Overrides the internal value </span>
     <b>shouldResetAfterSuccess</b>: PropTypes.bool, <span style="color: blueviolet">// If set to true, buttun resets automatically after swipe success with default delay of 1000ms</span>
     <b>swipeSuccessThreshold</b>: PropTypes.number, <span style="color: blueviolet">// Ex: 70. Swipping 70% will be considered as successful swipe</span>
     <b>thumbIconBackgroundColor</b>: PropTypes.string,

diff --git a/src/components/SwipeButton/__tests__/SwipeButton.test.tsx b/src/components/SwipeButton/__tests__/SwipeButton.test.tsx
@@ -163,4 +163,24 @@ describe("Component: SwipeButton UI Rendering Tree & Props", () => {
     // Assert
     expect(screen.toJSON()).toMatchSnapshot();
   });
+
+  it("should render correctly with screen reader enabled", async () => {
+    // Setup
+    render(<SwipeButton screenReaderEnabled />);
+    const button = screen.getAllByTestId("SwipeButton")[0];
+    fireEvent(button, "onLayout", { nativeEvent: { layout: { width: 100 } } });
+
+    // Assert
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it("should render correctly with screen reader disabled", async () => {
+    // Setup
+    render(<SwipeButton screenReaderEnabled={false} />);
+    const button = screen.getAllByTestId("SwipeButton")[0];
+    fireEvent(button, "onLayout", { nativeEvent: { layout: { width: 100 } } });
+
+    // Assert
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/SwipeButton/__tests__/__snapshots__/SwipeButton.test.tsx.snap b/src/components/SwipeButton/__tests__/__snapshots__/SwipeButton.test.tsx.snap
@@ -1194,6 +1194,244 @@ exports[`Component: SwipeButton UI Rendering Tree & Props should render correctl
 </View>
 `;
 
+exports[`Component: SwipeButton UI Rendering Tree & Props should render correctly with screen reader disabled 1`] = `
+<View
+  accessibilityHint="Swipe to submit"
+  accessibilityLabel="Swipe to submit"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onLayout={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "backgroundColor": "#7CF3F9",
+      "borderColor": "#073436",
+      "borderRadius": 50,
+      "borderWidth": 1,
+      "justifyContent": "center",
+      "margin": 5,
+      "opacity": 1,
+    }
+  }
+  testID="SwipeButton"
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={1}
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "position": "absolute",
+        },
+        {
+          "color": "#083133",
+          "fontSize": 20,
+        },
+      ]
+    }
+  >
+    Swipe to submit
+  </Text>
+  <View
+    collapsable={false}
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    pointerEvents="auto"
+    style={
+      {
+        "alignItems": "flex-end",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#00000000",
+        "borderColor": "#00000000",
+        "borderRadius": 50,
+        "borderRightWidth": 0,
+        "borderWidth": 3,
+        "margin": 1,
+        "width": 50,
+      }
+    }
+    testID="SwipeThumb"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderRadius": 50,
+            "borderWidth": 2,
+            "justifyContent": "center",
+            "marginVertical": -3,
+          },
+          {
+            "backgroundColor": "#D27030",
+            "borderColor": "#3D797C",
+            "height": 50,
+            "overflow": "hidden",
+            "width": 50,
+          },
+        ]
+      }
+      testID="DefaultThumbIcon"
+    />
+  </View>
+</View>
+`;
+
+exports[`Component: SwipeButton UI Rendering Tree & Props should render correctly with screen reader enabled 1`] = `
+<View
+  accessibilityHint="Double tap to activate"
+  accessibilityLabel="Swipe to submit"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onLayout={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "backgroundColor": "#7CF3F9",
+      "borderColor": "#073436",
+      "borderRadius": 50,
+      "borderWidth": 1,
+      "justifyContent": "center",
+      "margin": 5,
+      "opacity": 1,
+    }
+  }
+  testID="SwipeButton"
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={1}
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "position": "absolute",
+        },
+        {
+          "color": "#083133",
+          "fontSize": 20,
+        },
+      ]
+    }
+  >
+    Swipe to submit
+  </Text>
+  <View
+    collapsable={false}
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    pointerEvents="auto"
+    style={
+      {
+        "alignItems": "flex-end",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#00000000",
+        "borderColor": "#00000000",
+        "borderRadius": 50,
+        "borderRightWidth": 0,
+        "borderWidth": 3,
+        "margin": 1,
+        "width": 50,
+      }
+    }
+    testID="SwipeThumb"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderRadius": 50,
+            "borderWidth": 2,
+            "justifyContent": "center",
+            "marginVertical": -3,
+          },
+          {
+            "backgroundColor": "#D27030",
+            "borderColor": "#3D797C",
+            "height": 50,
+            "overflow": "hidden",
+            "width": 50,
+          },
+        ]
+      }
+      testID="DefaultThumbIcon"
+    />
+  </View>
+</View>
+`;
+
 exports[`Component: SwipeButton UI Rendering Tree & Props should render with correct styles when disable 1`] = `
 <View
   accessibilityHint="Button disabled"