How can I make a screen reader read out a mix of text and components?-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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>