matTooltip用于非<button>元素时aria-describedby失效问题求助

问题描述 #

当matTooltip用于<button>元素时，屏幕阅读器会在读取按钮文本后正常读取提示文本，功能符合预期。但将其用于<span>元素时，尽管渲染代码显示已正确设置aria-describedby属性且文档中存在对应id的div，NVDA屏幕阅读器仍无法读取提示文本（书签工具ANDI检测显示输出正常）。

代码示例 #

<span [matTooltip]="tooltipText" tabindex="0" class="completee">Complétée </span>

渲染后的DOM结构 #

<span 
  _ngcontent-gox-c251="" 
  tabindex="0" 
  class="mat-tooltip-trigger completee" 
  ng-reflect-message="tooltipText" 
  aria-describedby="cdk-describedby-message-gox-1-3" 
  cdk-describedby-host="gox-1">
  Complétée 
</span>

...

<div class="cdk-describedby-message-container cdk-visually-hidden" style="visibility: hidden;">
    <div id="cdk-describedby-message-gox-1-2" role="tooltip">asdfasdfasdfasdfasdfadf</div>
    <div id="cdk-describedby-message-gox-1-3" role="tooltip">tooltipText</div>
    <div id="cdk-describedby-message-gox-1-4">Sort</div>
</div>

临时解决方案 #

目前通过内置屏幕阅读器专用文本节点实现兼容，但需更优方案：

<span [matTooltip]="tooltipText" tabindex="0" class="completee">
    Complétée 
    <span class="screen-reader-only">{{ tooltipText }}</span>
</span>

补充说明 #

• Angular Material文档未明确标注matTooltip仅支持<button>元素，但官方所有示例均基于<button>实现。

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