Angular材料复选框内部扩展面板标头:如何允许使用键盘激活复选框

Question

我在扩展面板标题内有一个复选框，出于可访问性，复选框需要对键盘用户起作用。但是，如果标签专注于复选框，请按空格或Enter不会检查/取消选中复选框，而是扩展了面板。我正在努力解决此问题，因为这些是角度的材料组件，我不确定它们如何在引擎盖下工作。

如何允许使用键盘检查/未选中复选框？

这是一些HTML，可以在渲染时演示问题：

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-checkbox color="primary">Label</mat-checkbox>
  </mat-expansion-panel-header>
  Content
</mat-expansion-panel>

，这是一个演示，如果您选为"到复选框"或Enter不检查/取消选中的情况。

https://stackblitz.com/edit/angular-4rmq9v

Answer 1

为了防止键盘和鼠标事件到达扩展面板，您可以在复选框的keydown和click事件处理程序中调用$event.stopPropagation()：

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-checkbox color="primary" 
      (click)="$event.stopPropagation()" 
      (keydown)="$event.stopPropagation()" >
        Label
    </mat-checkbox>
  </mat-expansion-panel-header>
  Content
</mat-expansion-panel>

有关演示，请参见此stackblitz。