扩展面板标题内的 Angular Material 复选框 : how to allow the checkbox to be activated with the keyboard?

Question

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

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

这里有一些 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>

见 this stackblitz用于演示。