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.

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>
 
@@ -210,7 +210,7 @@ <h4>Input is next sibling child of chip grid</h4>
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add($event)"
-               ariaPlaceholder="New contributor input..." />
+               ariaLabel="New contributor input..." />
       </mat-form-field>
 
       <p>

src/material/chips/chip-input.ts

@@ -59,7 +59,7 @@ export interface MatChipInputEvent {
     '[id]': 'id',
     '[attr.disabled]': 'disabled || null',
     '[attr.placeholder]': 'placeholder || null',
-    '[attr.aria-placeholder]': 'getAriaPlaceholder()',
+    '[attr.aria-label]': 'ariaLabel || null',
     '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null',
     '[attr.aria-required]': '_chipGrid && _chipGrid.required || null',
     '[attr.required]': '_chipGrid && _chipGrid.required || null',
@@ -105,8 +105,11 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
   /** The input's placeholder text. */
   @Input() placeholder: string = '';
 
-  /** Screenreader placeholder for the input, only used if placeholder is not provided. */
-  @Input() ariaPlaceholder: string | null;
+  /**
+   * Aria-label for the input. Optional, but highly recommended to improve
+   * accessibility for Voice Control naming/usage of the entering input field itself.
+   */
+  @Input() ariaLabel: string | null;
 
   /** Unique id for the input. */
   @Input() id: string = inject(_IdGenerator).getId('mat-mdc-chip-list-input-');
@@ -129,12 +132,6 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
   /** The native input element to which this directive is attached. */
   readonly inputElement!: HTMLInputElement;
 
-  /**
-   * Default Screen-reader placeholder for the input if no placeholder or
-   * ariaPlaceholder is provided.
-   */
-  private readonly _defaultAriaPlaceholder = 'Enter input';
-
   constructor(...args: unknown[]);
 
   constructor() {
@@ -234,11 +231,11 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
   }
 
-  /**
-   * Checks whether placeholder is used, if not checks for ariaPlaceholder, and resorts
-   * to default value if neither is provided.
-   */
-  getAriaPlaceholder(): string | null {
-    return this.placeholder ? null : this.ariaPlaceholder || this._defaultAriaPlaceholder;
-  }
+  // /**
+  //  * Checks whether placeholder is used, if not checks for ariaPlaceholder, and resorts
+  //  * to default value if neither is provided.
+  //  */
+  // getAriaPlaceholder(): string | null {
+  //   return this.placeholder ? null : this.ariaPlaceholder || null;
+  // }
 }