如何在mat-expansion-panel-header内放置锚标签以避免无障碍问题

我用了如下Angular Material的折叠面板结构，把锚标签放在了<mat-expansion-panel-header>内部：

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        ...
         <a href="url"/>
      </mat-panel-description>
    </mat-expansion-panel-header>
   </mat-expansion-panel>
</mat-accordion>

渲染后Angular会给<mat-expansion-panel-header>自动加上role="button"属性，这触发了无障碍（a11y）规则冲突：

交互式控件不得嵌套

原因是锚标签（<a>）作为交互式控件，不能放在带有role="button"的元素内部，请问该怎么解决？

方法一：将锚标签移至折叠面板内容区 #

直接把<a>从header里挪到<mat-expansion-panel>的主体内容部分，彻底避免交互式控件嵌套：

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        ...
      </mat-panel-description>
    </mat-expansion-panel-header>
    <!-- 把链接移到面板内容区域 -->
    <p><a href="url">查看详情</a></p>
   </mat-expansion-panel>
</mat-accordion>

方法二：禁用header默认按钮行为，手动控制折叠 #

如果必须把链接放在header里，可通过disableToggle关闭header自带的折叠触发逻辑，自己添加按钮控制面板展开/收起，这样header就不会被赋予role="button"属性：

<mat-accordion>
  <mat-expansion-panel #panel>
    <mat-expansion-panel-header disableToggle>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        ...
        <a href="url">相关链接</a>
        <!-- 手动添加折叠控制按钮 -->
        <button mat-icon-button (click)="panel.toggle()" aria-label="展开/收起面板">
          <mat-icon>{{panel.expanded ? 'expand_less' : 'expand_more'}}</mat-icon>
        </button>
      </mat-panel-description>
    </mat-expansion-panel-header>
    <!-- 面板内容 -->
    <p>面板内容...</p>
   </mat-expansion-panel>
</mat-accordion>

注意：需给手动添加的按钮加上aria-label，确保屏幕阅读器能识别其功能，维持无障碍性。

方法三：用非交互式元素模拟链接，手动处理跳转 #

如果只需要链接的视觉样式，可改用普通元素（如<span>）模拟链接外观，通过点击事件手动触发跳转，避免原生<a>标签带来的嵌套问题：

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        ...
        <span 
          style="color: #1976d2; text-decoration: underline; cursor: pointer;"
          (click)="window.open('url', '_blank')"
          role="link"
          tabindex="0"
          (keydown.enter)="window.open('url', '_blank')"
        >
          相关链接
        </span>
      </mat-panel-description>
    </mat-expansion-panel-header>
    <!-- 面板内容 -->
    <p>面板内容...</p>
   </mat-expansion-panel>
</mat-accordion>

这里要加上role="link"和tabindex="0"，同时处理回车按键事件，确保键盘用户也能触发跳转，保证无障碍体验。

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