[v4] | Accessibility issue with android and nested labels

[jaaywags]

Bug

This bug is a specific issue with Android only. iOS is working fine. It is specifically an issue with Androids TalkBack screen reader trying to read elements.

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.3
react-native	0.74.1
react-native-reanimated	3.11.0
react-native-gesture-handler	2.16.2

Steps To Reproduce

1. Create a simple app. Can be one screen.
2. Setup a bottom sheet
3. Add a few elements in the bottom drawer. I suggest a element followed by a followed by another followed by .
4. Install the app into Android and turn on the TalkBack screen reader.
5. Try to highlight the elements

Describe what you expected to happen:

Expected: You should be able to highlight the elements individually and have it be read.
Actual: You can't highlight the elements. Instead, they are all read at once when you highlight the parent bottom sheet element. This is confusing if you have several headers or sections that should be read as you navigate though the bottom sheet.

Reproducible sample code

You can use this snack to reproduce the issue.

import { useState, useMemo, useRef, useCallback } from 'react';
import { Text, View, SafeAreaView, StyleSheet, TouchableOpacity } from 'react-native';
import { SegmentedButtons } from 'react-native-paper';
import BottomSheet from '@gorhom/bottom-sheet';
import { useReducedMotion } from 'react-native-reanimated';
import { TextInput } from 'react-native';

const App = () => {
  const reducedMotion = useReducedMotion();
  const [someInput, setSomeInput] = useState('');
  const [showBottomSheet, setShowBottomSheet] = useState(false);
  const [isItemOneSelected, setIsItemOneSelected] = useState(false);
  const bottomSheetRef = useRef<BottomSheet>(null);
  const snapPoints = useMemo(() => ['40%', '80%'], []);

  const handleSheetChanges = useCallback((index: number) => {
    if (index === 0 && bottomSheetRef?.current) {
      setShowBottomSheet(false);
    }
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      {showBottomSheet && (
        <TouchableOpacity
          style={styles.backdrop}
          activeOpacity={0.7}
          onPress={() => setShowBottomSheet(false)}
          accessibilityLabel='Hide bottom sheet'>
        </TouchableOpacity>
      )}

      <Text style={styles.paragraph}>
        Accessibility issue for Android
      </Text>

      <BottomSheet
        index={1}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}
        containerStyle={{ zIndex: 2 }}
        animateOnMount={!reducedMotion}
        accessible={false}
      >
        <View
          style={styles.bottomSheetContainer}
          accessible
        >
          <Text accessible style={{}}>Section one (The android screen reader cannot focus on this).</Text>
          <SegmentedButtons
            value={isItemOneSelected.toString()}
            onValueChange={v => setIsItemOneSelected(!isItemOneSelected)}
            density='small'
            buttons={[
              {
                value: 'true',
                label: 'One',
                uncheckedColor: '#000',
                checkedColor: '#000',
                accessibilityLabel: 'An accessibility label 1',
              },
              {
                value: 'false',
                label: 'Two',
                uncheckedColor: '#000',
                checkedColor: '#000',
                accessibilityLabel: 'An accessibility label 2',
              },
            ]}
          />
          <Text accessible style={{}}>Section Two(The android screen reader cannot focus on this either).</Text>
          <TextInput value={someInput} onChangeText={setSomeInput} />
        </View>
      </BottomSheet>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  bottomSheetContainer: {
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  backdrop: {
    position: 'absolute',
    zIndex: 1,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
  },
});

export default App;

Here is me demoing the issue.

AndroidBottomSheetIssue.mp4

[jaaywags]

Okay I figured it out. If you wrap the contents of the bottom sheet inside a it works just fine. I updated my snack to have both the original "broken" example and an updated working example. Hope this helps future people.