main - 87f0621 docs(material/chips): fix aria label binding for reactive and template driven form (#30814)

Author: mistrykaran91

docs-content/examples-highlighted/material/chips/chips-reactive-form/chips-reactive-form-example-html.html

@@ -6,7 +6,7 @@
     @for (keyword of reactiveKeywords(); track keyword) {
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-chip-row</span> (<span class="hljs-attr">removed</span>)=<span class="hljs-string">&quot;removeReactiveKeyword(keyword)&quot;</span>&gt;</span>
         {{keyword}}
-      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matChipRemove</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;&#x27;remove reactive form&#x27; + keyword&quot;</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matChipRemove</span> [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;remove reactive form&#x27; + keyword&quot;</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>cancel<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-name">mat-chip-row</span>&gt;</span>
@@ -18,4 +18,4 @@
       (<span class="hljs-attr">matChipInputTokenEnd</span>)=<span class="hljs-string">&quot;addReactiveKeyword($event)&quot;</span>
     /&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">mat-form-field</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>

docs-content/examples-highlighted/material/chips/chips-template-form/chips-template-form-example-html.html

@@ -6,7 +6,7 @@
     @for (keyword of templateKeywords(); track keyword) {
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-chip-row</span> (<span class="hljs-attr">removed</span>)=<span class="hljs-string">&quot;removeTemplateKeyword(keyword)&quot;</span>&gt;</span>
         {{keyword}}
-      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matChipRemove</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;&#x27;remove template form&#x27; + keyword&quot;</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matChipRemove</span> [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;remove template form&#x27; + keyword&quot;</span>&gt;</span>
         <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>cancel<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
       <span class="hljs-tag">&lt;/<span class="hljs-name">mat-chip-row</span>&gt;</span>

docs-content/examples-source/material/chips/chips-reactive-form/chips-reactive-form-example.html

@@ -6,7 +6,7 @@ <h4>Chips inside of a Reactive form</h4>
     @for (keyword of reactiveKeywords(); track keyword) {
       <mat-chip-row (removed)="removeReactiveKeyword(keyword)">
         {{keyword}}
-      <button matChipRemove aria-label="'remove reactive form' + keyword">
+      <button matChipRemove [attr.aria-label]="'remove reactive form' + keyword">
         <mat-icon>cancel</mat-icon>
       </button>
       </mat-chip-row>
@@ -18,4 +18,4 @@ <h4>Chips inside of a Reactive form</h4>
       (matChipInputTokenEnd)="addReactiveKeyword($event)"
     />
   </mat-form-field>
-</section>
+</section>

docs-content/examples-source/material/chips/chips-template-form/chips-template-form-example.html

@@ -6,7 +6,7 @@ <h4>Chips inside of a Template-driven form</h4>
     @for (keyword of templateKeywords(); track keyword) {
       <mat-chip-row (removed)="removeTemplateKeyword(keyword)">
         {{keyword}}
-      <button matChipRemove aria-label="'remove template form' + keyword">
+      <button matChipRemove [attr.aria-label]="'remove template form' + keyword">
         <mat-icon>cancel</mat-icon>
       </button>
       </mat-chip-row>