如何让屏幕阅读器按指定顺序朗读React文本与组件混合内容

现有React渲染逻辑如下：

const row = ['I agree to the', {}, 'and', {}];
// 数组中两个对象实际为渲染为链接的React组件
<WrapperComponent>
    {row}
</WrapperComponent>

页面最终渲染出的句子为：

I agree to the Terms of Service and Privacy Policy

当前无障碍适配存在问题：开启屏幕阅读器时，整段句子会被整体聚焦并一次性朗读，无法逐个聚焦内部的两个链接。
需要实现的目标效果：

• 屏幕阅读器首先完整朗读整句内容
• 用户右滑1次时聚焦第一个链接元素「Terms of Service」
• 用户右滑2次时聚焦第二个链接元素「Privacy Policy」

按以下步骤修改即可达到要求的屏幕阅读器交互效果：

• 给外层WrapperComponent加上role="group"属性，这个属性会告知屏幕阅读器当前是一个独立内容分组，焦点首次进入分组范围时，会自动完整朗读分组内的全部文本内容。注意不要给外层容器加tabindex属性，否则容器本身会变成可聚焦项，平白多占一个滑动焦点位，打乱导航顺序。
• 确认两个渲染链接的React组件最终输出原生<a>标签，如果是自定义非语义标签，必须补上role="link"和tabindex="0"属性，保证两个链接能被屏幕阅读器识别为可交互聚焦项，不会被当成普通静态文本跳过。链接本身不要额外加aria-label属性，直接保留内置的「Terms of Service」「Privacy Policy」文本即可，避免出现重复朗读问题。
• 保证数组里的文本片段和链接组件渲染后是连续的行内DOM结构，不要被块级标签打断，这样屏幕阅读器才能把分散的文本片段和链接文本拼接成完整句子朗读。

可直接参考的代码样例：

// 外层包裹组件
const WrapperComponent = ({ children }) => {
  return (
    <p role="group" className="agreement-text">
      {children}
    </p>
  )
}

// 两个链接组件
const TermsLink = () => <a href="/terms-of-service">Terms of Service</a>
const PrivacyLink = () => <a href="/privacy-policy">Privacy Policy</a>

// 渲染用的数组
const row = ['I agree to the', <TermsLink key="terms" />, 'and', <PrivacyLink key="privacy" />];

// 最终渲染
<WrapperComponent>
  {row}
</WrapperComponent>

修改完成后的交互逻辑完全匹配需求：

1. 屏幕阅读器首次定位到这段协议内容时，会一次性完整朗读整句 I agree to the Terms of Service and Privacy Policy
2. 用户右滑1次，焦点落到第一个链接，朗读「Terms of Service，链接」
3. 用户右滑2次，焦点落到第二个链接，朗读「Privacy Policy，链接」

避坑提醒：不要给外层容器加aria-label属性，该属性会覆盖容器内所有子元素的朗读内容，导致后续滑动聚焦链接时无法读取正确的链接文本。

内容的提问来源于stack exchange，提问作者Onyx