fix(material/chips): adds default placeholder for chips input

src/dev-app/chips/chips-demo.html

@@ -29,8 +29,8 @@ <h4>Unstyled</h4>
         <mat-basic-chip-row>Basic Chip Row 1</mat-basic-chip-row>
         <mat-basic-chip-row>Basic Chip Row 2</mat-basic-chip-row>
         <mat-basic-chip-row>Basic Chip Row 3</mat-basic-chip-row>
-        <input [matChipInputFor]="basicGrid" readonly>
       </mat-chip-grid>
+      <input [matChipInputFor]="basicGrid" readonly>
 
       <h4>With avatar, icons, and color</h4>
 
@@ -185,11 +185,17 @@ <h4>Input is last child of chip grid</h4>
             </mat-chip-row>
           }
           <input [disabled]="disableInputs"
-                 [matChipInputFor]="chipGrid1"
-                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                 [matChipInputAddOnBlur]="addOnBlur"
-                 (matChipInputTokenEnd)="add($event)" />
+                [matChipInputFor]="chipGrid1"
+                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                [matChipInputAddOnBlur]="addOnBlur"
+                (matChipInputTokenEnd)="add($event)"
+                aria-label="New contributor input..." />
         </mat-chip-grid>
+        <input [disabled]="disableInputs"
+                [matChipInputFor]="chipGrid1"
+                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                [matChipInputAddOnBlur]="addOnBlur"
+                (matChipInputTokenEnd)="add($event)" />
       </mat-form-field>
 
       <h4>Input is next sibling child of chip grid</h4>
@@ -209,7 +215,7 @@ <h4>Input is next sibling child of chip grid</h4>
         <input [matChipInputFor]="chipGrid2"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="addOnBlur"
-               (matChipInputTokenEnd)="add($event)" />
+               (matChipInputTokenEnd)="add($event)"/>
       </mat-form-field>
 
       <p>

src/material/chips/chips.md

@@ -141,6 +141,8 @@ The chips components support 3 user interaction patterns, each with its own cont
 
 `<mat-chip-grid>` and `<mat-chip-row>` : These elements implement a grid accessibility pattern. Use them as part of a free form input that allows users to enter text to add chips.
 
+Note : be sure to have the input element be a sibling of mat-chip-grid to ensure accessibility of the input element by accessibility devices such as Voice Control. It is also recommended to apply an appropriate `aria-label` to the input to optimize accessibility of the input.
+
 ```html
 <mat-form-field>
   <mat-chip-grid #myChipGrid [(ngModel)]="mySelection"
@@ -153,10 +155,11 @@ The chips components support 3 user interaction patterns, each with its own cont
         </button>
       </mat-chip-row>
     }
-    <input [matChipInputFor]="myChipGrid"
-           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-           (matChipInputTokenEnd)="add($event)" />
   </mat-chip-grid>
+  <input [matChipInputFor]="myChipGrid"
+          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          (matChipInputTokenEnd)="add($event)"
+          aria-label="Add sandwich fillings..." />
 </mat-form-field>
 ```