fix(material): fix invalid ARIA attributes in MultiCheckbox type (#3144)

fix #3004

Author: aitboudad

demo/src/app/app.component.html

@@ -1,17 +1,16 @@
 <ngx-loading-bar [color]="'#fafafa'"></ngx-loading-bar>
-
 <mat-toolbar color="primary" class="mat-elevation-z6 app-navbar" [class.navbar-small]="isSmallDevice$ | async">
   <a mat-button routerLink="" routerLinkActive="" #homeLink="routerLinkActive"
     [routerLinkActiveOptions]="{ exact: true }">
-    <img src="https://raw.githubusercontent.com/ngx-formly/ngx-formly/v5/logo.svg?sanitize=true">
+    <img alt="Home" src="https://raw.githubusercontent.com/ngx-formly/ngx-formly/v5/logo.svg?sanitize=true">
     FORMLY
   </a>
 
   <ng-container *ngIf="isSmallDevice$ | async else mainMenu">
     <span class="spacer" [style.flex]="'1 1 auto'"></span>
     <ng-container *ngTemplateOutlet="version"></ng-container>
     <a mat-button href="https://github.com/ngx-formly/ngx-formly">
-      <img src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg">
+      <img alt="GitHub" src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg">
     </a>
     <button mat-button (click)="sidenav.toggle()">
       <mat-icon>menu</mat-icon>
@@ -23,7 +22,7 @@
 
     <ng-container *ngTemplateOutlet="version"></ng-container>
     <a mat-button href="https://github.com/ngx-formly/ngx-formly">
-      <img src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg">
+      <img alt="GitHub" src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg">
       GitHub
     </a>
   </ng-template>
@@ -73,7 +72,7 @@
       [routerLinkActiveOptions]="{ exact: true }">
 
       <span class="bd-footer-logo">
-        <img width="60" src="https://raw.githubusercontent.com/ngx-formly/ngx-formly/v5/logo.svg?sanitize=true">
+        <img width="60" alt="Home" src="https://raw.githubusercontent.com/ngx-formly/ngx-formly/v5/logo.svg?sanitize=true">
         <span class="bd-footer-logo-text">
           FORMLY
         </span>

demo/src/app/shared/example-viewer/example-viewer.component.html

@@ -1,11 +1,11 @@
 <div class="docs-example-viewer-wrapper">
   <div class="docs-example-viewer-title">
     <div class="docs-example-viewer-title-spacer">{{ exampleData.title }}</div>
-    <button *ngIf="exampleData.debug && _debugFields" mat-icon-button type="button" (click)="toggleDebugView()" [matTooltip]="'Debug'">
+    <button *ngIf="exampleData.debug && _debugFields" mat-icon-button type="button" (click)="toggleDebugView()" [matTooltip]="'Debug'" aria-label="Debug example source">
       <mat-icon>bug_report</mat-icon>
     </button>
     <formly-stackblitz-button [type]="type" [example]="exampleData"></formly-stackblitz-button>
-    <button mat-icon-button type="button" (click)="toggleSourceView()" [matTooltip]="'View source'">
+    <button mat-icon-button type="button" (click)="toggleSourceView()" [matTooltip]="'View source'" aria-label="View example source">
       <mat-icon>
         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet"
           focusable="false">

demo/src/app/shared/stackblitz/stackblitz-button.html

@@ -1,12 +1,10 @@
-<div [matTooltip]="'Edit in StackBlitz'">
-  <button mat-icon-button type="button" (click)="openStackblitz()">
-    <mat-icon>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184.4 150.8">
-        <g>
-          <path d="M119.8.3L49 76.1h37l-21.3 53.4 70.8-75.8H98.3z" />
-          <path d="M123 4l-8.8 21 40 40-34.4 34.7v29.8L184.2 65zM64.7.3v29.8L30.2 65l40 39.8-8.7 21.3L.2 65z" />
-        </g>
-      </svg>
-    </mat-icon>
-  </button>
-</div>
+<button mat-icon-button type="button" (click)="openStackblitz()" [matTooltip]="'Edit in StackBlitz'" aria-label="Edit this example in StackBlitz">
+  <mat-icon>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184.4 150.8">
+      <g>
+        <path d="M119.8.3L49 76.1h37l-21.3 53.4 70.8-75.8H98.3z" />
+        <path d="M123 4l-8.8 21 40 40-34.4 34.7v29.8L184.2 65zM64.7.3v29.8L30.2 65l40 39.8-8.7 21.3L.2 65z" />
+      </g>
+    </svg>
+  </mat-icon>
+</button>

src/material/multicheckbox/src/multicheckbox.type.ts

@@ -19,6 +19,9 @@ import { MatCheckbox } from '@angular/material/checkbox';
       </mat-checkbox>
     </ng-container>
   `,
+  host: {
+    '[id]': 'id',
+  },
 })
 export class FormlyFieldMultiCheckbox extends FieldType {
   @ViewChildren(MatCheckbox) checkboxes!: QueryList<MatCheckbox>;