details/summary自定义展开折叠按钮的ARIA属性使用问题

这个自定义SVG图标不需要添加额外ARIA标签，直接对屏幕阅读器隐藏即可，完全可以依赖<details>/<summary>的原生语义实现状态播报。
理由如下：

• <summary>是HTML原生的可交互控件，浏览器会自动识别父级<details>的open属性，为屏幕阅读器播报对应的展开/折叠状态，不需要通过图标额外传递状态信息。
• 这个图标仅作为视觉装饰存在，没有携带任何辅助阅读需要的额外信息，多余的ARIA标注反而可能造成播报冗余，甚至和原生控件的语义产生冲突。

你只需要给SVG加上aria-hidden="true"属性即可，参考修改后的代码：

<details>
  <summary>
    <svg aria-hidden="true">
      <use href="#chevron"/>
    </svg>
    <h1>Heading</h1>
  </summary>
  <!-- 内部折叠内容 -->
</details>

额外注意：不要给该SVG设置role="img"、aria-label这类属性，避免干扰<summary>本身的语义播报，绝大多数场景下原生控件的语义兼容性已经足够覆盖需求。

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