diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.html b/src/app/shared/components/checkbox-form/checkbox-form.component.html index 784e822f616468f01899def2081e9e01dcfc629d..9a5c736eb3fc75703677789371def014ec7e3c0e 100644 --- a/src/app/shared/components/checkbox-form/checkbox-form.component.html +++ b/src/app/shared/components/checkbox-form/checkbox-form.component.html @@ -1,9 +1,9 @@ -<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> diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.scss b/src/app/shared/components/checkbox-form/checkbox-form.component.scss index 167a1bc2c0ea5ba14609f0d34a530549376d4ca8..0078cd1529fb42cf59d66dd5317befe9624d01ea 100644 --- a/src/app/shared/components/checkbox-form/checkbox-form.component.scss +++ b/src/app/shared/components/checkbox-form/checkbox-form.component.scss @@ -1,7 +1,7 @@ @import 'color'; @import 'typography'; -button { +div.checkbox { width: 100%; height: 80px; padding: 1rem; diff --git a/src/app/shared/components/checkbox/checkbox.component.html b/src/app/shared/components/checkbox/checkbox.component.html index 17d7e6d70e490579f76c744f3ac2a179a37e0584..c2185f1c7cd973795887d9cb04675a0cfccb2019 100644 --- a/src/app/shared/components/checkbox/checkbox.component.html +++ b/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)" />