如何在辅助功能中覆盖从父元素继承的子元素中的角色链接

问题描述

有一个工具提示，其中工具提示内容 div 是动态添加的，并且根据要求需要角色链接才能附加到 aria 标签。 工具提示展开前的初始 html 为

<div class="tooltip" tabindex="0" aria-expanded="false" role="link" aria-label="click here">
      <span>
        <i class="icon-tooltip"></i>
      </span>
</div>

用户点击下面的工具提示图标后将是 html

  <div class="tooltip" tabindex="0" aria-expanded="true" role="link" aria-label="click here">
      <span>
        <i class="icon-tooltip"></i>
      </span>
    <div class="tooltip content">   
        <p class="title">This is title</p>
        <div class="description">
            <p>this is line 1</p>
            <p>this is line 2</p>
        </div>
    </div>
   </div>

在语音查看器中验证时，工具提示内容被读取为 展开的链接这是标题， 展开的链接这是第 1 行， 展开的链接 这是第 2 行 而不是预期 这是标题， 这是第 1 行， 这是第 2 行。 我尝试为工具提示内容添加 role=none/presentation 以删除 expanded link 以防止父角色指向子元素，但仍然没有解决问题。有没有办法防止父角色和 aria-expanded 继承到子元素？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）