fix(material/chips): remove spans from top level of component (#26689)

Uses `div` instead of `span` for the top-level chip wrappers since some a11y tools flag nesting `div` inside of `span` as invalid.

(cherry picked from commit 94e6c94)

Author: crisbeto

src/material/chips/chip-grid.ts

@@ -91,9 +91,9 @@ const _MatChipGridMixinBase = mixinErrorState(MatChipGridBase);
 @Component({
   selector: 'mat-chip-grid',
   template: `
-    <span class="mdc-evolution-chip-set__chips" role="presentation">
+    <div class="mdc-evolution-chip-set__chips" role="presentation">
       <ng-content></ng-content>
-    </span>
+    </div>
   `,
   styleUrls: ['chip-set.css'],
   inputs: ['tabIndex'],

src/material/chips/chip-listbox.ts

@@ -59,9 +59,9 @@ export const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR: any = {
 @Component({
   selector: 'mat-chip-listbox',
   template: `
-    <span class="mdc-evolution-chip-set__chips" role="presentation">
+    <div class="mdc-evolution-chip-set__chips" role="presentation">
       <ng-content></ng-content>
-    </span>
+    </div>
   `,
   styleUrls: ['chip-set.css'],
   inputs: ['tabIndex'],

src/material/chips/chip-set.ts

@@ -46,9 +46,9 @@ const _MatChipSetMixinBase = mixinTabIndex(MatChipSetBase);
 @Component({
   selector: 'mat-chip-set',
   template: `
-    <span class="mdc-evolution-chip-set__chips" role="presentation">
+    <div class="mdc-evolution-chip-set__chips" role="presentation">
       <ng-content></ng-content>
-    </span>
+    </div>
   `,
   styleUrls: ['chip-set.css'],
   host: {