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

* fix(material/chips): creates default aria-placeholder for chips input

Updates Angular Components Chips input so that if no placeholder value
is provided and if no ariaPlaceholder value is provided, that a default
value will be used. This improves accessibility by providing an
aria-placeholder value for VoiceControl to use as a name for the input.

Fixes b/380092814

* refactor(material/chips): fix lint errors

Updates to fix lint errors.

* build(material/chips): updates build for chips.md

Ran command to update chips.md.

* fix(material/chips): fixes chips input demo moving input out of chip-grid

Updates previous chips-demo.html so that the input element is not a child
of chip-grid, but rather a sibling. When mat-chip-grid contains the input,
it hides this as an interactive element from mobile Voice Controls making
it inaccessible.

Fixes b/380092814

* docs(material/chips): update chips docs based on aria-placeholder addition

Updates documentation on chips.md regarding proper placement of the input
element as a sibiling of  as opposed to being a child. Also
adds an explanation of the new implementation of ariaPlaceholder on mat-chip
input.

* refactor(material/chips): convert ariaPlaceholder to ariaLabel for chips input

Updates previous fix to Angular Components chips input for using aria-placeholder
and converts it to ariaLabel instead. For the chips-demo moved the input related
to chip-grid to outside of chip-grid so that Voice Control is able to recognize
input as an interactive element. If inside, the input is hidden from Voice
Control making it not fully accessible.

* refactor(material/chips): testing ariaLabel with input inside chip-grid

Updating previous fix to see if ariaLabel will be read even if input is
inside chip-grid.

* refactor(material/chips): make recommended changes after review

Updates previous fix by implementing recommended changes by reviewer.

* refactor(material/chips): updates chips demo to use aria-label

Updates previous change to Chips demo to use aria-label.

* refactor(material/chips): removes commented out code

Cleans up previous changes and removes unused code.

* docs(material/chips): updates chips input accesibility recommendation

Updates example which previously used ariaPlaceholder and instead uses
an aria-label.

* build(material/chips): updates build for chips.md

Ran command to update chips.md api guard.

Author: essjay05

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>
 ```