Angular Material 15 MDC迁移后mat-list-option缺失表单标签求助

升级Angular Material 15并完成MDC迁移后，WAVE工具检测到mat-list-option对应的复选框提示「缺失表单标签」，核心原因是：MDC版本的mat-list-option内部的复选框是独立的原生<input type="checkbox">元素，之前添加在mat-list-option上的aria-label、title等属性不会传递给这个内部复选框，导致无障碍工具无法识别复选框的标签。

以下是三种可行的解决方法：

方法一：通过组件代码关联复选框与选项文本 #

利用MatListOption的API获取内部复选框元素，将其与选项文本通过aria-labelledby关联：

模板代码 #

<mat-selection-list (selectionChange)="onChange($event)" 
                    role="listbox" 
                    #list 
                    [tabindex]="tabindex" 
                    [attr.aria-label]="getAriaLabel()">
  <mat-list-option *ngFor="let option of to.options" 
                   [value]="option.value" 
                   [selected]="option.selected" 
                   checkboxPosition="before" 
                   [disabled]="option.disabled"
                   #listOption>
    <span id="option-{{option.value}}">{{option.value}}</span>
  </mat-list-option>
</mat-selection-list>

组件类代码 #

import { ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { MatListOption } from '@angular/material/list';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChildren('listOption') listOptions!: QueryList<MatListOption>;

  ngAfterViewInit(): void {
    this.listOptions.forEach(option => {
      // 获取内部复选框元素
      const checkbox = option._getCheckboxElement();
      if (checkbox) {
        // 关联选项文本的id
        checkbox.setAttribute('aria-labelledby', `option-${option.value}`);
      }
    });
  }
}

方法二：直接给复选框设置aria-label #

如果不需要关联文本内容，可直接给复选框添加aria-label属性：

组件类代码 #

import { ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { MatListOption } from '@angular/material/list';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChildren('listOption') listOptions!: QueryList<MatListOption>;

  ngAfterViewInit(): void {
    this.listOptions.forEach(option => {
      const checkbox = option._getCheckboxElement();
      if (checkbox) {
        checkbox.setAttribute('aria-label', `选择${option.value}`);
      }
    });
  }
}

方法三：自定义复选框模板（样式需适配） #

使用matListOptionCheckbox自定义模板，直接在复选框上添加无障碍属性：

<mat-selection-list (selectionChange)="onChange($event)" 
                    role="listbox" 
                    #list 
                    [tabindex]="tabindex" 
                    [attr.aria-label]="getAriaLabel()">
  <mat-list-option *ngFor="let option of to.options" 
                   [value]="option.value" 
                   [selected]="option.selected" 
                   checkboxPosition="before" 
                   [disabled]="option.disabled">
    <ng-template matListOptionCheckbox>
      <input type="checkbox" 
             [attr.aria-label]="`选择${option.value}`"
             [checked]="option.selected"
             [disabled]="option.disabled">
    </ng-template>
    {{option.value}}
  </mat-list-option>
</mat-selection-list>

注意：此方法需要手动适配Angular Material MDC的复选框样式，避免样式错位。

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