I have the following array:
const row = ['I agree to the', {}, 'and', {}];
Where the 2 objects are React components that make the text a link.
I then render this text like this:
<WrapperComponent>
{row}
</WrapperComponent>
I get the following sentence rendered:
I agree to the Terms of Service and Privacy Policy
And if I turn on the screen reader, the whole sentence gets focused and read out.
My question is whether I can do something to make the screen reader read the whole sentence first, and then have the first link element "Terms of Service" focused if the user swipes right once, and "Privacy Policy" if he swipes right twice.
you can create a class for those if you want them to be programmatically focused this class will use Refs in 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();
}
}
so you can add an eventlistener based on user's swipe gesture so you can just access the class and call the focushere() function
The following causes the entire checkbox sentence to be read first, then a swipe right says "terms of service". However, the next swipe right says "and" and then the next swipe right says "privacy policy", at least on ios. I don't have an android device to test it on. So that's close to what you want. If your two components are links, they should cause the swipe to move to them.
<label>
<input type="checkbox">
i agree to the <a href="#">terms of service</a> and <a href="#">privacy policy</a>
</label>
We are assuming that your <WrapperComponent> is a labelled checkbox, hence another interactive element which can receive focus.
MDN discourages using interactive elements inside labels:
Don't place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label.
So, while it might work in some screen readers/browsers, you should avoid it.
MDN further suggests the following solution (adjusted to your text):
<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>