[Mobile] - Fix Voice Over and assistive keyboards (#53895)

* AztecView - Replace usage of TouchableWithoutFeedback with Pressable - This fixes the current React Native regression with VoiceOver and assistive keyboards * Patch React Native's TextInput component to avoid passing the recently introduced accessibilityState prop which causes issues with assistive keyboards * Updates snapshots: Fule, Audio blocks and Search component after changing the AztecView component to use Pressable * Update AztecView's Pressable with changing its accessible prop to false
WordPress · Aug 25, 2023 · 58d0588 · 58d0588
1 parent 8b55dfd
commit 58d0588
Show file tree

Hide file tree

Showing 5 changed files with 702 additions and 508 deletions.
diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
@@ -133,7 +133,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           ]
         }
       >
-        <RCTAztecView
+        <View
           accessibilityState={
             {
               "busy": undefined,
@@ -143,59 +143,73 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessible={true}
-          activeFormats={[]}
-          blockType={
+          accessibilityValue={
             {
-              "tag": "p",
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
           }
-          deleteEnter={true}
-          disableEditingMenu={false}
+          accessible={false}
+          collapsable={false}
           focusable={true}
-          fontFamily="serif"
-          fontSize={14}
-          isMultiline={false}
-          maxImagesWidth={200}
-          onBackspace={[Function]}
           onBlur={[Function]}
-          onChange={[Function]}
           onClick={[Function]}
-          onContentSizeChange={[Function]}
-          onEnter={[Function]}
           onFocus={[Function]}
-          onHTMLContentWithCursor={[Function]}
-          onKeyDown={[Function]}
-          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
-          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-          placeholder="Add caption"
-          placeholderTextColor="gray"
-          selectionColor="black"
-          style={
-            {
-              "backgroundColor": undefined,
-              "maxWidth": undefined,
-              "minHeight": 0,
+        >
+          <RCTAztecView
+            activeFormats={[]}
+            blockType={
+              {
+                "tag": "p",
+              }
             }
-          }
-          text={
-            {
-              "eventCount": undefined,
-              "linkTextColor": undefined,
-              "selection": null,
-              "tag": "p",
-              "text": "",
+            deleteEnter={true}
+            disableEditingMenu={false}
+            fontFamily="serif"
+            fontSize={14}
+            isMultiline={false}
+            maxImagesWidth={200}
+            onBackspace={[Function]}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onContentSizeChange={[Function]}
+            onEnter={[Function]}
+            onFocus={[Function]}
+            onHTMLContentWithCursor={[Function]}
+            onKeyDown={[Function]}
+            onPaste={[Function]}
+            onSelectionChange={[Function]}
+            placeholder="Add caption"
+            placeholderTextColor="gray"
+            selectionColor="black"
+            style={
+              {
+                "backgroundColor": undefined,
+                "maxWidth": undefined,
+                "minHeight": 0,
+              }
             }
-          }
-          textAlign="center"
-          triggerKeyCodes={[]}
-        />
+            text={
+              {
+                "eventCount": undefined,
+                "linkTextColor": undefined,
+                "selection": null,
+                "tag": "p",
+                "text": "",
+              }
+            }
+            textAlign="center"
+            triggerKeyCodes={[]}
+          />
+        </View>
       </View>
     </View>
   </View>
@@ -359,7 +373,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
           ]
         }
       >
-        <RCTAztecView
+        <View
           accessibilityState={
             {
               "busy": undefined,
@@ -369,59 +383,73 @@ exports[`Audio block renders audio file without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessible={true}
-          activeFormats={[]}
-          blockType={
+          accessibilityValue={
             {
-              "tag": "p",
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
           }
-          deleteEnter={true}
-          disableEditingMenu={false}
+          accessible={false}
+          collapsable={false}
           focusable={true}
-          fontFamily="serif"
-          fontSize={14}
-          isMultiline={false}
-          maxImagesWidth={200}
-          onBackspace={[Function]}
           onBlur={[Function]}
-          onChange={[Function]}
           onClick={[Function]}
-          onContentSizeChange={[Function]}
-          onEnter={[Function]}
           onFocus={[Function]}
-          onHTMLContentWithCursor={[Function]}
-          onKeyDown={[Function]}
-          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
-          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-          placeholder="Add caption"
-          placeholderTextColor="gray"
-          selectionColor="black"
-          style={
-            {
-              "backgroundColor": undefined,
-              "maxWidth": undefined,
-              "minHeight": 0,
+        >
+          <RCTAztecView
+            activeFormats={[]}
+            blockType={
+              {
+                "tag": "p",
+              }
             }
-          }
-          text={
-            {
-              "eventCount": undefined,
-              "linkTextColor": undefined,
-              "selection": null,
-              "tag": "p",
-              "text": "",
+            deleteEnter={true}
+            disableEditingMenu={false}
+            fontFamily="serif"
+            fontSize={14}
+            isMultiline={false}
+            maxImagesWidth={200}
+            onBackspace={[Function]}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onContentSizeChange={[Function]}
+            onEnter={[Function]}
+            onFocus={[Function]}
+            onHTMLContentWithCursor={[Function]}
+            onKeyDown={[Function]}
+            onPaste={[Function]}
+            onSelectionChange={[Function]}
+            placeholder="Add caption"
+            placeholderTextColor="gray"
+            selectionColor="black"
+            style={
+              {
+                "backgroundColor": undefined,
+                "maxWidth": undefined,
+                "minHeight": 0,
+              }
             }
-          }
-          textAlign="center"
-          triggerKeyCodes={[]}
-        />
+            text={
+              {
+                "eventCount": undefined,
+                "linkTextColor": undefined,
+                "selection": null,
+                "tag": "p",
+                "text": "",
+              }
+            }
+            textAlign="center"
+            triggerKeyCodes={[]}
+          />
+        </View>
       </View>
     </View>
   </View>