Android TalkBack: Focus is shifted back to editor after selecting BottomSheet headings

[SiobhyB]

Description

When attempting to navigate BottomSheets in the Android app using TalkBack, TalkBack does not work as expected when focused on section headings. Instead of reading headings and then keeping focus on the BottomSheet, focus is shifted away from the BottomSheet and to the wider editor, making for a confusing experience.

Note, this has not yet been tested using iOS' VoiceOver.

Step-by-step reproduction instructions

1. In the Android app, navigate to the post editor and add an image block.
2. Upload an image to the block and open its settings (by tapping the cog/gear icon).
3. Activate TalkBack.
4. Double-tap the Link Settings header in the BottomSheet.
5. TalkBack should read something similar to: Link Settings. Double-tap to activate.
6. Notice that the focus is taken away from the BottomSheet, to the wider post. Double tapping causes the BottomSheet to close completely.

Expected behaviour

TalkBack should read the headings as expected and keep the focus on the BottomSheet.

Actual behaviour

TalkBack reads a heading, but focus is then immediately shifted to the wider post. If users then follow the prompt to double-tap, the BottomSheet is closed. @thehenrybyrd (who originally discovered this issue) also reported that TalkBack began reading from the beginning of the post in her testing.

WordPress information

• WordPress version: Tested on a WordPress.com site.
• Gutenberg version: 13.1.
• Are all plugins except Gutenberg deactivated? Yes.
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes.

Device information

• Device: Pixel 6
• Operating system: Android 12
• WordPress app version: 19.8

[hypest]

Added the [Priority] High label since this is fairly broken experience for a basic flow (navigating the bottom-sheet).

[dcalhoun]

Removing the high priority label as there is a workaround for this issue in two forms:

1. Moving focus between elements by swiping.
2. Dragging your finger across the screen to read elements aloud.

Admittedly, I cannot say definitely that these two methods are more common for screen readers users, but my perception is that is the case. This perception comes from videos I have watched of screen reader users sharing their experiences for navigating on mobile devices in general.

Additionally, this appears to be an issue with the react-native-modal package, not our usage of it. As showcased by my reproduction, one can reproduce the issue if a text element has an absolutely positioned, accessible sibling—which react-native-modal relies upon for its backdrop.

Inlined Reproduction Code

import {
  Dimensions,
  Text,
  SafeAreaView,
  StyleSheet,
  Pressable,
  View,
  TouchableWithoutFeedback,
} from 'react-native';
import { useState } from 'react';
import Modal from 'react-native-modal';

export default function App() {
  const [showModal, setShowModal] = useState();
  return (
    <SafeAreaView style={styles.container}>
      <Pressable onPress={() => setShowModal(true)} style={styles.button}>
        <Text style={styles.buttonText}>Show Modal</Text>
      </Pressable>

      <View>
        <TouchableWithoutFeedback
          accessibilityLabel="Display alert"
          onPress={() => {
            alert('Backdrop pressed');
          }}>
          <View style={styles.box}>
            <Text>Backdrop (relative positioning</Text>
          </View>
        </TouchableWithoutFeedback>
        <View style={styles.nestedContent}>
          <Text style={styles.text}>
            TalkBack can select this text by tapping it as its sibling is not
            absolutely positioned.
          </Text>
        </View>
      </View>

      <View>
        <TouchableWithoutFeedback
          accessibilityLabel="Display alert"
          onPress={() => {
            alert('Touchable pressed');
          }}>
          <View style={[styles.box, styles.backdrop]}>
            <Text>Backdrop (absolute positioning)</Text>
          </View>
        </TouchableWithoutFeedback>
        <View style={styles.nestedContent}>
          <Text style={styles.text}>
            TalkBack cannot select this text by tapping it, only by swiping or
            dragging a finger atop it.
          </Text>
        </View>
      </View>

      <Modal isVisible={showModal}>
        <View style={styles.modalContent}>
          <Text style={styles.text}>
            TalkBack cannot select this text by tapping it, only by swiping or
            dragging a finger atop it.
          </Text>
          <Pressable onPress={() => setShowModal(false)} style={styles.button}>
            <Text style={styles.buttonText}>Hide Modal</Text>
          </Pressable>
        </View>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  button: {
    backgroundColor: 'black',
    marginVertical: 16,
    padding: 16,
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 16,
  },
  text: {
    fontSize: 20,
    marginVertical: 16,
  },
  box: {
    minHeight: 100,
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: 'red',
  },
  backdrop: {
    position: 'absolute',
  },
  nestedContent: {
    backgroundColor: 'orange',
    marginVertical: 16,
    padding: 16,
    zIndex: 2,
  },
});

Ultimately, this issue may relate to facebook/react-native#30851 or facebook/react-native#32004 at its core. It appears React Native suffers from unexpected behaviors for nested, accessible content on Android.

Of course, please feel free to reinstate the high priority if deemed appropriate.