title: Angular Material Checkbox inside expansion panel header: how to allow the checkbox to be activated with the keyboard?
body: <p>I have a checkbox inside the expansion panel header and for accessibility reasons the checkbox needs to be functional for keyboard-only users. However, if you tab to focus on the checkbox, pressing space or enter doesn't check/uncheck the checkbox, but expands the panel instead. I am struggling to fix this issue since these are angular material components and I am not sure how they work under the hood. </p>
  
  <p>How can I allow the checkbox to be checked/unchecked with the keyboard?</p>
  
  <p>Here is some html that demonstrates the problem when rendered:</p>
  
  <pre><code>&lt;mat-expansion-panel&gt;
    &lt;mat-expansion-panel-header&gt;
      &lt;mat-checkbox color="primary"&gt;Label&lt;/mat-checkbox&gt;
    &lt;/mat-expansion-panel-header&gt;
    Content
  &lt;/mat-expansion-panel&gt;
  </code></pre>
  
  <p>And here is a demo, if you tab to the checkbox pressing space or enter does not check/uncheck it.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-4rmq9v" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-4rmq9v</a></p>