Флажок Angular Material внутри заголовка панели расширения: как разрешить активацию флажка с клавиатуры?

Question

У меня есть флажок внутри заголовка панели расширения, и по причинам доступности этот флажок должен быть функциональным для пользователей, работающих только с клавиатуры.Однако, если вы переключаетесь на флажок, нажатие пробела или ввода не устанавливает / снимает флажок, а расширяет панель.Я изо всех сил пытаюсь решить эту проблему, так как это угловые материальные компоненты, и я не уверен, как они работают под капотом.

Как я могу разрешить установку / снятие флажка с помощью клавиатуры?

Вот некоторый 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>

См. этот стек для демонстрации.