fix(material/chips): remove extra span for aria-description (#31609)

Author: adolgachev

goldens/material/chips/index.api.md

@@ -59,7 +59,6 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     protected _allTrailingIcons: QueryList<MatChipTrailingIcon>;
     _animationsDisabled: boolean;
     ariaDescription: string | null;
-    _ariaDescriptionId: string;
     ariaLabel: string | null;
     protected basicChipAttrName: string;
     // (undocumented)

src/material/chips/chip-option.html

@@ -4,9 +4,9 @@
   <button
     matChipAction
     [_allowFocusWhenDisabled]="true"
-    [attr.aria-selected]="ariaSelected"
+    [attr.aria-description]="ariaDescription"
     [attr.aria-label]="ariaLabel"
-    [attr.aria-describedby]="_ariaDescriptionId"
+    [attr.aria-selected]="ariaSelected"
     role="option">
     @if (_hasLeadingGraphic()) {
       <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
@@ -35,5 +35,3 @@
     <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
   </span>
 }
-
-<span class="cdk-visually-hidden" [id]="_ariaDescriptionId">{{ariaDescription}}</span>

src/material/chips/chip-option.spec.ts

@@ -337,25 +337,10 @@ describe('Option Chips', () => {
 
         expect(optionElement.getAttribute('aria-label')).toMatch(/option name/i);
 
-        const optionElementDescribedBy = optionElement!.getAttribute('aria-describedby');
-        expect(optionElementDescribedBy)
-          .withContext('expected primary grid cell to have a non-empty aria-describedby attribute')
+        const optionElementDescription = optionElement!.getAttribute('aria-description');
+        expect(optionElementDescription)
+          .withContext('expected primary grid cell to have a non-empty aria-description attribute')
           .toBeTruthy();
-
-        const optionElementDescriptions = Array.from(
-          (fixture.nativeElement as HTMLElement).querySelectorAll(
-            optionElementDescribedBy!
-              .split(/\s+/g)
-              .map(x => `#${x}`)
-              .join(','),
-          ),
-        );
-
-        const optionElementDescription = optionElementDescriptions
-          .map(x => x.textContent?.trim())
-          .join(' ')
-          .trim();
-
         expect(optionElementDescription).toMatch(/option description/i);
       });
 

src/material/chips/chip-row.html

@@ -10,8 +10,8 @@
 <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell"
     matChipAction
     [disabled]="disabled"
-    [attr.aria-label]="ariaLabel"
-    [attr.aria-describedby]="_ariaDescriptionId">
+    [attr.aria-description]="ariaDescription"
+    [attr.aria-label]="ariaLabel">
   @if (leadingIcon) {
     <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
       <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
@@ -40,5 +40,3 @@
     <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
   </span>
 }
-
-<span class="cdk-visually-hidden" [id]="_ariaDescriptionId">{{ariaDescription}}</span>

src/material/chips/chip-row.spec.ts

@@ -505,25 +505,10 @@ describe('Row Chips', () => {
 
         expect(primaryGridCell!.getAttribute('aria-label')).toMatch(/chip name/i);
 
-        const primaryGridCellDescribedBy = primaryGridCell!.getAttribute('aria-describedby');
-        expect(primaryGridCellDescribedBy)
-          .withContext('expected primary grid cell to have a non-empty aria-describedby attribute')
+        const primaryGridCellDescription = primaryGridCell!.getAttribute('aria-description');
+        expect(primaryGridCellDescription)
+          .withContext('expected primary grid cell to have a non-empty aria-description attribute')
           .toBeTruthy();
-
-        const primaryGridCellDescriptions = Array.from(
-          (fixture.nativeElement as HTMLElement).querySelectorAll(
-            primaryGridCellDescribedBy!
-              .split(/\s+/g)
-              .map(x => `#${x}`)
-              .join(','),
-          ),
-        );
-
-        const primaryGridCellDescription = primaryGridCellDescriptions
-          .map(x => x.textContent?.trim())
-          .join(' ')
-          .trim();
-
         expect(primaryGridCellDescription).toMatch(/chip description/i);
       });
     });

src/material/chips/chip.ts

@@ -166,9 +166,6 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   /** ARIA description for the content of the chip. */
   @Input('aria-description') ariaDescription: string | null = null;
 
-  /** Id of a span that contains this chip's aria description. */
-  _ariaDescriptionId = `${this.id}-aria-description`;
-
   /** Whether the chip list is disabled. */
   _chipListDisabled: boolean = false;