扩展面板标题内的角度材质复选框：如何允许使用键盘激活复选框？

Question

我在扩展面板标题中有一个复选框，出于可访问性的原因，该复选框需要对仅使用键盘的用户起作用。但是，如果您使用 Tab 键将焦点放在复选框上，按空格键或 Enter 键不会选中/取消选中复选框，而是会展开面板。我正在努力解决这个问题，因为这些是有角度的材料组件，我不确定它们在引擎盖下是如何工作的。

如何允许使用键盘选中/取消选中复选框？

这里有一些 html 展示了渲染时的问题：

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

这是一个演示，如果您按空格键选择复选框或输入不会选中/取消选中它。

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

Answer 1

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

<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。