Проблема доступности: Неверный порядок зачитывания для плоского списка - PullRequest
Новая
       40

Проблема доступности: Неверный порядок зачитывания для плоского списка

0 голосов
/ 13 марта 2020

Считывание закадрового текста для элементов, отображаемых с использованием плоского списка, не в правильном порядке. проблема может быть воспроизведена только в IOS, а в android работает нормально. У меня есть несколько интерактивных элементов в столбце. представьте столбцы, содержащие любимую иконку, изображение, многострочный текст и кнопку добавления. Ожидаемое поведение : сначала следует прочитать значок отката, изображение, многострочный текст и кнопку добавления из столбца 1, а затем то же из 2-го столбца. Фактическое поведение: в настоящее время он читает значок отката следующего порядка (столбец 1) -> значок отката (столбец 2) -> изображение (столбец 1) -> изображение (столбец 2) ---> многострочный текст (столбец 1) -> многострочный текст (столбец 2) -> кнопка добавления (столбец 1) -> кнопка добавления (столбец 2) 

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
    Image,
    TouchableOpacity,
    SafeAreaView,
    FlatList,
    Dimensions,
} from 'react-native';

    const data = [
        { key: 'Apple', price:'$1.91 each' },
        { key: 'Organic Bananas, bunch', price:'$2.91/LB' },
        { key: 'Banana Babies', price:'$2.91 avg price' },
        { key: 'meat',price:'$20.91' },
        { key: 'Eggs' , price:'$12.91 avg price'},
        { key: 'Fish' , price:'$7.91 avg price'},
        { key: 'Green Apples', price:'$9.91 avg price' },
        { key: 'fresh fruits', price:'$6.91 avg price'},
        { key: 'Ice cream', price:'$2.91 avg price' }
    ];

    const numColumns=2;
class App extends React.Component{
    renderItem=({item,index})=>{
        return(
            <View style={styles.item}>
                <TouchableOpacity
                    style={styles.button}
                    onPress={this.onPress}
                     accessible={false}
                >
                    <Text style={styles.itemText1}>Rollback</Text>
                </TouchableOpacity>
                <View accessible={true}
                      accessibilityLabel="This is Demo Image">
                    <Image
                        style={{width: 75, height: 75}}
                        source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>
                </View>

                <Text  style={styles.itemText}>{item.key}</Text>
                <TouchableOpacity>
                    <Text style = {styles.button}>
                        ADD
                    </Text>
                </TouchableOpacity>
                <Text style={styles.itemText}>{item.price}</Text>
            </View>
        )
    };
    render(){
        return(
            <SafeAreaView style={styles.container1}>
            <FlatList
                data={data}
                style={styles.container}
                renderItem={this.renderItem}
                numColumns={numColumns}
            />
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
  container: {
      flex:1,
      marginVertical:20,
  },
    container1: {
        flex: 1,
    },
  item: {
      backgroundColor:"grey",
      alignItems:'center',
      justifyContent:'center',
      flex:1,
      margin:1,
      height:Dimensions.get('window').width/numColumns,
  },
  itemText: {
    color:'#fff',
      paddingTop:5,
  },
    itemText1: {
       flexDirection:'row',
        color:'red',
        paddingBottom:4,
        justifyContent:'flex-end'
    },
    imageThumbnail: {
        justifyContent: 'center',
        alignItems: 'center',
        height: 100,
    },
    button: {
        backgroundColor: '#DDDDDD',
        margin:4
    },
});

export default App;
...