title: How can I make a screen reader read out a mix of text and components?
body: <p>I have the following array:</p>
  <pre><code>const row = ['I agree to the', {}, 'and', {}];
  </code></pre>
  <p>Where the 2 objects are React components that make the text a link.</p>
  <p>I then render this text like this:</p>
  <pre><code>&lt;WrapperComponent&gt;
      {row}
  &lt;/WrapperComponent&gt;
  </code></pre>
  <p>I get the following sentence rendered:</p>
  <blockquote>
  <p>I agree to the Terms of Service and Privacy Policy</p>
  </blockquote>
  <p>And if I turn on the screen reader, the whole sentence gets focused and read out.</p>
  <p>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 &quot;Terms of Service&quot; focused if the user swipes right once, and &quot;Privacy Policy&quot; if he swipes right twice.</p>