fix(feedback): Fixes accessibility issue on iOS (#4739)

* Update the client implementation to use the new capture feedback js api

* Updates SDK API

* Adds new feedback button in the sample

* Adds changelog

* Removes unused mock

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Directly use captureFeedback from sentry/core

* Use import from core

* Fixes imports order lint issue

* Fixes build issue

* Adds captureFeedback tests from sentry-javascript

* Update CHANGELOG.md

* Only deprecate client captureUserFeedback

* Add simple form UI

* Adds basic form functionality

* Update imports

* Update imports

* Remove useState hook to avoid multiple react instances issues

* Move types and styles in different files

* Removes attachment button to be added back separately along with the implementation

* Add basic field validation

* Adds changelog

* Updates changelog

* Updates changelog

* Trim whitespaces from the submitted feedback

* Adds tests

* Renames FeedbackFormScreen to FeedbackForm

* Add beta label

* Extract default text to constants

* Moves constant to a separate file and aligns naming with JS

* Adds input text labels

* Close screen before sending the feedback to minimise wait time

Co-authored-by: LucasZF <[email protected]>

* Rename file for consistency

* Flatten configuration hierarchy and clean up

* Align required values with JS

* Use Sentry user email and name when set

* Simplifies email validation

* Show success alert message

* Aligns naming with JS and unmounts the form by default

* Use the minimum config without props in the changelog

* Adds development not for unimplemented function

* Show email and name conditionally

* Adds sentry branding (png logo)

* Adds sentry logo resource

* Add assets in module exports

* Revert "Add assets in module exports"

This reverts commit 5292475.

* Revert "Adds sentry logo resource"

This reverts commit d6e9229.

* Revert "Adds sentry branding (png logo)"

This reverts commit 8c56753.

* Add last event id

* Mock lastEventId

* Adds beta note in the changelog

* Autoinject feedback form

* Updates changelog

* Align colors with JS

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <[email protected]>

* Use regular fonts for both buttons

* Handle keyboard properly

* Adds an option on whether the email should be validated

* Merge properties only once

* Loads current user data on form construction

* Remove unneeded extra padding

* Fix background color issue

* Adds feedback button

* Updates the changelog

* Fixes changelog typo

* Updates styles background color

Co-authored-by: Krystof Woldrich <[email protected]>

* Use defaultProps

* Correct defaultProps

* Adds test to verify when getUser is called

* Use smaller image

Co-authored-by: LucasZF <[email protected]>

* Add margin next to the icon

* Adds bottom spacing in the ErrorScreen so that the feedback button does not hide the scrollview buttons

* (2.2) feat: Add Feedback Form UI Branding logo (#4357)

* Adds sentry branding logo as a base64 encoded png

---------

Co-authored-by: LucasZF <[email protected]>

* Autoinject feedback form (#4370)

* Align changelog entry

* Update changelog

* Disable bouncing

* Add modal ui appearance

* Update snapshot tests

* Fix bottom margin

* Fix sheet height

* Remove extra modal border

* Do not expose modal styles

* Animate background color

* Avoid keyboard in modal

* Update changelog

* Fix changelog

* Updates comment

* Extract FeedbackButtonProps

* Add public function description to satisfy lint check

* Adds tests

* Fix tests

* Add hardcoded dark and light color themes

* Rename theme options

* Update snapshot tests

* Include in the feedback integration

* Fix circular dependency

* Add theme integration options

* Adds changelog

* Add comment note

* Align with JS api

* Remove unneeded line

Co-authored-by: Krystof Woldrich <[email protected]>

* Place widget button below the feedback widget shadow

* Expose showFeedbackButton/hideFeedbackButton methods

* Add dummy integration for tracking usage

* Adds button border

* Fixes tests

* Add accentBackground and accentForeground colors

* Extract integration getter in a helper function

* Adds dynamic theming support

* Add snapshot tests

* Show screenshot button UI

* Add screenshot button integration

* Add screenshot icon

* Adds Take a screenshot button in FeedbackWidget

* Updates snapshot tests

* Fix circularDepCheck

* Fix circularDepCheck

* Attache captured screenshot

* Hide the take screenshot button when there is a screenshot

* Convert uint8Array to Base64 on the native side

* ref(feedback): Extracts FeedbackWidgetProvider in a separate file

* Updates exposed comments

* Adds snapshot tests

* Disable functionality on the Web

* Add screenshot button in the sample expo app

* Adds system theme tests

* Test dynamically changed theme

* Remove showScreenshotButton and hideScreenshotButton from the exposed api

* Fix function name typo

* Adds enableTakeScreenshot option

* Adds happy flow test

* Make flow tests more granular

* Increate wait time out to fix flakiness on ci

* Reset widget state after each test

* Fix CI flakiness

* Remove flaky test

* fix(feedback): Fixes accessibility issue on iOS

* Add changelog

---------

Co-authored-by: Krystof Woldrich <[email protected]>
Co-authored-by: LucasZF <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -17,6 +17,7 @@
 ### Fixes
 
 - Avoid silent failure when JS bundle was not created due to Sentry Xcode scripts failure ([#4690](https://github.com/getsentry/sentry-react-native/pull/4690))
+- Fixes Feedback Widget accessibility issue on iOS ([#4739](https://github.com/getsentry/sentry-react-native/pull/4739))
 
 ### Dependencies
 

packages/core/src/js/feedback/FeedbackWidget.tsx

@@ -262,7 +262,11 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     }
 
     return (
-      <TouchableWithoutFeedback onPress={notWeb() ? Keyboard.dismiss: undefined}>
+      <TouchableWithoutFeedback
+        onPress={notWeb() ? Keyboard.dismiss : undefined}
+        accessible={false}
+        accessibilityElementsHidden={false}
+        >
         <View style={styles.container}>
           <View style={styles.titleContainer}>
             <Text style={styles.title}>{text.formTitle}</Text>

packages/core/test/feedback/ScreenshotButton.test.tsx

@@ -181,7 +181,7 @@ describe('ScreenshotButton', () => {
       const takeScreenshotButtonAfterCapture = queryByText('Take a screenshot');
       expect(takeScreenshotButtonAfterCapture).toBeNull();
     });
-
+    
     await waitFor(() => {
       const removeScreenshotButtonAfterCapture = queryByText('Remove screenshot');
       expect(removeScreenshotButtonAfterCapture).toBeTruthy();

packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
 <View
+  accessibilityElementsHidden={false}
   accessibilityState={
     {
       "busy": undefined,
@@ -11,7 +12,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
       "selected": undefined,
     }
   }
-  accessible={true}
+  accessible={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -235,6 +236,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
 
 exports[`FeedbackWidget matches the snapshot with custom styles and screenshot button 1`] = `
 <View
+  accessibilityElementsHidden={false}
   accessibilityState={
     {
       "busy": undefined,
@@ -244,7 +246,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
       "selected": undefined,
     }
   }
-  accessible={true}
+  accessible={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -525,6 +527,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
 
 exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
 <View
+  accessibilityElementsHidden={false}
   accessibilityState={
     {
       "busy": undefined,
@@ -534,7 +537,7 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
       "selected": undefined,
     }
   }
-  accessible={true}
+  accessible={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -789,6 +792,7 @@ exports[`FeedbackWidget matches the snapshot with custom texts 1`] = `
 
 exports[`FeedbackWidget matches the snapshot with custom texts and screenshot button 1`] = `
 <View
+  accessibilityElementsHidden={false}
   accessibilityState={
     {
       "busy": undefined,
@@ -798,7 +802,7 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
       "selected": undefined,
     }
   }
-  accessible={true}
+  accessible={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -1116,6 +1120,7 @@ exports[`FeedbackWidget matches the snapshot with custom texts and screenshot bu
 
 exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
 <View
+  accessibilityElementsHidden={false}
   accessibilityState={
     {
       "busy": undefined,
@@ -1125,7 +1130,7 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
       "selected": undefined,
     }
   }
-  accessible={true}
+  accessible={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -1380,6 +1385,7 @@ exports[`FeedbackWidget matches the snapshot with default configuration 1`] = `
 
 exports[`FeedbackWidget matches the snapshot with default configuration and screenshot button 1`] = `
 <View
+  accessibilityElementsHidden={false}
   accessibilityState={
     {
       "busy": undefined,
@@ -1389,7 +1395,7 @@ exports[`FeedbackWidget matches the snapshot with default configuration and scre
       "selected": undefined,
     }
   }
-  accessible={true}
+  accessible={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}

packages/core/test/feedback/__snapshots__/FeedbackWidgetManager.test.tsx.snap

@@ -702,6 +702,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with cus
         >
           <View>
             <View
+              accessibilityElementsHidden={false}
               accessibilityState={
                 {
                   "busy": undefined,
@@ -711,7 +712,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with cus
                   "selected": undefined,
                 }
               }
-              accessible={true}
+              accessible={false}
               focusable={true}
               onClick={[Function]}
               onResponderGrant={[Function]}
@@ -1049,6 +1050,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with cus
         >
           <View>
             <View
+              accessibilityElementsHidden={false}
               accessibilityState={
                 {
                   "busy": undefined,
@@ -1058,7 +1060,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with cus
                   "selected": undefined,
                 }
               }
-              accessible={true}
+              accessible={false}
               focusable={true}
               onClick={[Function]}
               onResponderGrant={[Function]}
@@ -1396,6 +1398,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with def
         >
           <View>
             <View
+              accessibilityElementsHidden={false}
               accessibilityState={
                 {
                   "busy": undefined,
@@ -1405,7 +1408,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with def
                   "selected": undefined,
                 }
               }
-              accessible={true}
+              accessible={false}
               focusable={true}
               onClick={[Function]}
               onResponderGrant={[Function]}
@@ -1743,6 +1746,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with def
         >
           <View>
             <View
+              accessibilityElementsHidden={false}
               accessibilityState={
                 {
                   "busy": undefined,
@@ -1752,7 +1756,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with def
                   "selected": undefined,
                 }
               }
-              accessible={true}
+              accessible={false}
               focusable={true}
               onClick={[Function]}
               onResponderGrant={[Function]}
@@ -2090,6 +2094,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with def
         >
           <View>
             <View
+              accessibilityElementsHidden={false}
               accessibilityState={
                 {
                   "busy": undefined,
@@ -2099,7 +2104,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with def
                   "selected": undefined,
                 }
               }
-              accessible={true}
+              accessible={false}
               focusable={true}
               onClick={[Function]}
               onResponderGrant={[Function]}
@@ -2437,6 +2442,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with sys
         >
           <View>
             <View
+              accessibilityElementsHidden={false}
               accessibilityState={
                 {
                   "busy": undefined,
@@ -2446,7 +2452,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with sys
                   "selected": undefined,
                 }
               }
-              accessible={true}
+              accessible={false}
               focusable={true}
               onClick={[Function]}
               onResponderGrant={[Function]}
@@ -2784,6 +2790,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with sys
         >
           <View>
             <View
+              accessibilityElementsHidden={false}
               accessibilityState={
                 {
                   "busy": undefined,
@@ -2793,7 +2800,7 @@ exports[`FeedbackButtonManager the Feedback Widget matches the snapshot with sys
                   "selected": undefined,
                 }
               }
-              accessible={true}
+              accessible={false}
               focusable={true}
               onClick={[Function]}
               onResponderGrant={[Function]}