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)
angular · Feb 27, 2023 · d61443b · d61443b
1 parent c324289
commit d61443b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/material/chips/chip-grid.ts b/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'],

diff --git a/src/material/chips/chip-listbox.ts b/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'],

diff --git a/src/material/chips/chip-set.ts b/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: {