fix(accessibility): checkboxes must have labels and should not be nested in...

fix(accessibility): checkboxes must have labels and should not be nested in another interactive element (button)

src/app/shared/components/checkbox-form/checkbox-form.component.html

-<button type="button" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()">
+<div class="checkbox" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()" (keydown.enter)="clicked()">
   <app-checkbox [checked]="isChecked" />
 
   <svg *ngIf="iconSvg" aria-hidden="true" class="icon" [ngClass]="iconType">
     <use [attr.xlink:href]="'assets/form/sprite.svg#' + iconSvg" />
   </svg>
 
-  <p>{{ text }}</p>
-</button>
+  <p id="checkboxLabel">{{ text }}</p>
+</div>

src/app/shared/components/checkbox-form/checkbox-form.component.scss

 @import 'color';
 @import 'typography';
 
-button {
+div.checkbox {
   width: 100%;
   height: 80px;
   padding: 1rem;

src/app/shared/components/checkbox/checkbox.component.html

@@ -5,5 +5,6 @@
   [checked]="checked"
   [indeterminate]="indeterminate"
   [disabled]="disabled"
+  [attr.aria-labelledby]="'checkboxLabel'"
   (click)="action.emit($event)"
 />