React JSX中aria-hidden属性不生效问题解决方案

期望屏幕阅读器仅朗读SOME_TEXT文本内容，实际在Mac端Safari浏览器测试时，设置了aria-hidden="true"属性的星号（*）仍会被屏幕阅读器连带读出。
原有实现代码：

<script src="react.production.min.js"></script>
<script src="react-dom.production.min.js"></script>

<div>
  <h6> {SOME_TEXT} <span aria-hidden="true">*</span> </h6>
</div>

这是Mac端Safari搭配VoiceOver屏幕阅读器的已知兼容问题：当带aria-hidden="true"标记的元素和普通文本节点同属一个父级语义元素（如h1-h6标题标签），且没有额外语义标记时，VoiceOver拼接父元素朗读文本的逻辑会偶尔忽略子元素的aria-hidden属性，将内部符号一并读出。

• 双重标记忽略属性：给星号所在span额外添加role="presentation"属性，强化辅助技术忽略该元素的语义标记，核心代码修改如下：

<h6> {SOME_TEXT} <span aria-hidden="true" role="presentation">*</span> </h6>

• CSS伪元素实现星号：将星号文本节点从DOM中移除，通过CSS伪元素渲染视觉上的星号效果，从根源避免文本被拾取朗读，这也是表单必填标记的通用无障碍最佳实践：

.required-star::after {
  content: "*";
  color: #f00;
  margin-left: 2px;
}

<h6> {SOME_TEXT} <span class="required-star" aria-hidden="true"></span> </h6>

• 显式声明朗读内容：给需要朗读的SOME_TEXT单独加一层容器，通过aria-label明确指定屏幕阅读器的朗读内容，绕开父节点文本拼接逻辑的兼容问题：

<h6> <span aria-label="{SOME_TEXT}">{SOME_TEXT}</span> <span aria-hidden="true">*</span> </h6>

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