Tengo la siguiente matriz:
const row = ['I agree to the', {}, 'and', {}];Donde los 2 objetos son componentes de React que hacen del texto un enlace.
Luego renderizo este texto así:
<WrapperComponent> {row} </WrapperComponent>Obtengo la siguiente oración:
Acepto los Términos de servicio y la Política de privacidad
Y si enciendo el lector de pantalla, toda la oración se enfoca y se lee.
Mi pregunta es si puedo hacer algo para que el lector de pantalla lea la oración completa primero y luego tenga el primer elemento de enlace "Términos de servicio" enfocado si el usuario desliza el dedo hacia la derecha una vez, y "Política de privacidad" si desliza el dedo hacia la derecha dos veces.
puede crear una clase para ellos si desea que se centren programáticamente, esta clase usará Refs en DOM Elements
class CustomTextInput extends React.Component { constructor(props){ super(props); this.component= React.createRef(); } render() { return <div ref={this.component} />; } focushere(){ this.component.current.focus(); } } para que pueda agregar un detector de eventos basado en el gesto de deslizamiento del usuario para que pueda acceder a la clase y llamar a la función focushere()
Lo siguiente hace que se lea primero la oración completa de la casilla de verificación, luego un deslizamiento hacia la derecha dice "términos de servicio". Sin embargo, el siguiente deslizamiento hacia la derecha dice "y" y luego el siguiente deslizamiento hacia la derecha dice "política de privacidad", al menos en iOS. No tengo un dispositivo Android para probarlo. Así que eso está cerca de lo que quieres. Si sus dos componentes son enlaces, deberían hacer que el deslizamiento se mueva hacia ellos.
<label> <input type="checkbox"> i agree to the <a href="#">terms of service</a> and <a href="#">privacy policy</a> </label>Suponemos que su <WrapperComponent> es una casilla de verificación etiquetada, por lo tanto, otro elemento interactivo que puede recibir atención.
MDN desaconseja el uso de elementos interactivos dentro de las etiquetas :
No coloque elementos interactivos como anclas o botones dentro de una etiqueta. Hacerlo dificulta que las personas activen la entrada de formulario asociada con la etiqueta.
Por lo tanto, si bien podría funcionar en algunos lectores/navegadores de pantalla, debe evitarlo.
MDN sugiere además la siguiente solución (ajustada a su texto):
<label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> I agree to the Terms of Service and Privacy Policy </label> <p> Read our <a href="terms-of-service.html">Terms of Service</a> and our <a href="privacy.html">Privacy Policy</a> </p>