<div class="root flex-column">
<div class="d-flex">
- <label class="form-group-checkbox">
+ <label>
<input
type="checkbox"
[(ngModel)]="checked"
[id]="inputName"
[disabled]="disabled"
/>
- <span role="checkbox" [attr.aria-checked]="checked"></span>
+ <span role="checkbox" [attr.aria-checked]="checked" [attr.aria-label]="labelText || labelInnerHTML"></span>
<span *ngIf="labelText">{{ labelText }}</span>
<span
*ngIf="!labelText && labelInnerHTML"
<div *ngIf="recommended" class="recommended" i18n>Recommended</div>
</div>
- <div class="ml-4 d-flex flex-column">
- <small class="wrapper mt-2 text-muted">
+ <div class="ms-4 d-flex flex-column">
+ <div class="wrapper form-group-description">
<ng-content select="description"></ng-content>
- </small>
+ </div>
<span class="wrapper mt-3">
<ng-content select="extra"></ng-content>