ChromeVox无法正确读取包裹元素的按钮的aria-expanded属性

当使用<button>或<a>标签包裹其他元素（如<svg>、<img>）时，会出现以下异常表现：

• 鼠标点击按钮触发JavaScript事件更新aria-expanded属性后，ChromeVox无法正确读取该属性的当前值（尽管属性已被代码正确修改）
• 若通过光标导航定位到按钮后再点击，ChromeVox则能正常读取aria-expanded的最新值

该问题仅在ChromeVox（测试版本：53.0.2784.14）中出现，Safari搭配Apple VoiceOver可正常运行。

示例代码 #

HTML代码 #

<button id="btn" aria-expanded="false" aria-controls="details">
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
  </svg>
</button>

JavaScript代码 #

document.getElementById('btn').addEventListener("click", function(event) {
  const expanded = this.getAttribute('aria-expanded') === 'true';           
  this.setAttribute('aria-expanded', expanded ? 'false' : 'true');
});

问题原因推测 #

ChromeVox的相关事件绑定在了按钮内部的子元素（如图形元素）上，而非按钮本身，导致属性更新的事件未冒泡到按钮节点，进而无法触发屏幕阅读器对属性变更的播报逻辑。

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