Estoy trabajando en un proyecto react-native (el objetivo principal es el iPhone 6) y tuve algunos problemas al incluir nuevos elementos en la cadena de accesibilidad. Por alguna razón, Voice Over no se actualiza cuando aparece un nuevo elemento después de volver a renderizar. El botón oculto no aparece en la cadena de accesibilidad después de ejecutar el método showButton (). Se vuelve visible, pero iOS Voice Over no lo ve. El problema ocurre solo cuando la aplicación hace algo de forma asincrónica. Aquí está mi código:

export default class SmartView extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showButton: false,
    }
  }

  showButton = () => {
    setTimeout(() => {
      this.setState({ showButton: true })
    }, 500)
  }

  render() {
    const { showButton } = this.state
    return (
      <View style={style.root}>
        <Button
          onPress={this.showButton}
          accessibilityRole="button"
          accessibilityTraits="button"
          accessibilityLabel="appeared"
          accessible
          simple
        >
          <Text>Appeared</Text>
        </Button>
        {showButton && (
          <Button
            accessibilityRole="button"
            accessibilityTraits="button"
            accessibilityLabel="appeared"
            accessible
            simple
          >
            <Text>Hidden</Text>
          </Button>
        )}
      </View>
    )
  }
}

Entonces, si elimino setTimeout y actualizo el estado en la corriente js actual, todo funcionará bien. ¿Hay alguna posibilidad de hacer algo como VoiceOverReload()?

Yo uso: react-native v0.59.9 y iPhone 6, versión de software 12.4

Gracias.

1
lutaev 24 feb. 2020 a las 23:51

2 respuestas

La demostración a continuación funciona bien, probablemente su componente personalizado Button tenga problemas

import React, { useState } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'

export default function Screen () {
  const [showButton, setShowButton] = useState(false)
  function handleShow () {
    setTimeout(() => {
      setShowButton(true)
    }, 1000)
  }
  return (
    <View style={{ padding: 40 }}>
      <TouchableOpacity
        onPress={handleShow}
        accessibilityRole='button'
        accessibilityTraits='button'
        accessibilityLabel='This button label is long for demo'
        accessible
        >
        <Text>Appeared</Text>
      </TouchableOpacity>
      {showButton && (
        <TouchableOpacity
          accessibilityRole='button'
          accessibilityTraits='button'
          accessibilityLabel='hidden'
          accessible
        >
          <Text>Hidden</Text>
        </TouchableOpacity>
      )}
    </View>
  )
}
0
Medet Tleukabiluly 25 feb. 2020 a las 13:23

Si su vista se va a actualizar y necesita voz en off para detectar el cambio más rápido, puede agregar el siguiente rasgo a la vista principal: frequentUpdates. Esto será equivalente a configurar "Actualizaciones frecuentes" en las propiedades de accesibilidad en XCode, como se explica en la siguiente respuesta: Hacer que el contenido de actualización dinámica en un UITableView sea accesible para VoiceOver

Esto funciona para ReactNative 0.59, aunque está en desuso y no sé cómo hacerlo en versiones más nuevas de RN.

0
elyalvarado 24 feb. 2020 a las 22:10