Skip to content

Commit 6e561fb

Browse files
dominicbachmanndominicbachmann
committed
main - ac357fb docs(material/chips): fix aria-label binding of chips-form-control-example (#30811)
1 parent 08e5a23 commit 6e561fb

File tree

5 files changed

+13
-13
lines changed

5 files changed

+13
-13
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@for (keyword of keywords(); track keyword) {
1212
<span class="hljs-tag">&lt;<span class="hljs-name">mat-chip-row</span> (<span class="hljs-attr">removed</span>)=<span class="hljs-string">&quot;removeKeyword(keyword)&quot;</span>&gt;</span>
1313
{{keyword}}
14-
<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 &#x27; + keyword&quot;</span>&gt;</span>
14+
<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 &#x27; + keyword&quot;</span>&gt;</span>
1515
<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>
1616
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1717
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-chip-row</span>&gt;</span>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@for (keyword of keywords(); track keyword) {
1212
<mat-chip-row (removed)="removeKeyword(keyword)">
1313
{{keyword}}
14-
<button matChipRemove aria-label="'remove ' + keyword">
14+
<button matChipRemove [attr.aria-label]="'remove ' + keyword">
1515
<mat-icon>cancel</mat-icon>
1616
</button>
1717
</mat-chip-row>

‎fesm2022/material/chips.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ class ChipsFormControlExample {
212212
event.chipInput.clear();
213213
}
214214
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.4", ngImport: i0, type: ChipsFormControlExample, deps: [], target: i0.ɵɵFactoryTarget.Component });
215-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0-next.4", type: ChipsFormControlExample, isStandalone: true, selector: "chips-form-control-example", ngImport: i0, template: "<div class=\"example-button-container\">\n <button matButton=\"elevated\" (click)=\"formControl.disable()\">Disable form control</button>\n <button matButton=\"elevated\" (click)=\"formControl.enable()\">Enable form control</button>\n</div>\n<p>\n <em>Enter video keywords</em>\n</p>\n<mat-form-field class=\"example-form-field\">\n <mat-label>Video keywords</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Enter keywords\" [formControl]=\"formControl\">\n @for (keyword of keywords(); track keyword) {\n <mat-chip-row (removed)=\"removeKeyword(keyword)\">\n {{keyword}}\n <button matChipRemove aria-label=\"'remove ' + keyword\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n placeholder=\"New keyword...\"\n [matChipInputFor]=\"chipGrid\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n</mat-form-field>\n\n<p><strong>The following keywords are entered:</strong> {{formControl.value}}</p>\n", styles: [".example-form-field {\n width: 100%;\n}\n\n.example-button-container > button {\n margin: 0 12px;\n}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
215+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0-next.4", type: ChipsFormControlExample, isStandalone: true, selector: "chips-form-control-example", ngImport: i0, template: "<div class=\"example-button-container\">\n <button matButton=\"elevated\" (click)=\"formControl.disable()\">Disable form control</button>\n <button matButton=\"elevated\" (click)=\"formControl.enable()\">Enable form control</button>\n</div>\n<p>\n <em>Enter video keywords</em>\n</p>\n<mat-form-field class=\"example-form-field\">\n <mat-label>Video keywords</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Enter keywords\" [formControl]=\"formControl\">\n @for (keyword of keywords(); track keyword) {\n <mat-chip-row (removed)=\"removeKeyword(keyword)\">\n {{keyword}}\n <button matChipRemove [attr.aria-label]=\"'remove ' + keyword\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n placeholder=\"New keyword...\"\n [matChipInputFor]=\"chipGrid\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n</mat-form-field>\n\n<p><strong>The following keywords are entered:</strong> {{formControl.value}}</p>\n", styles: [".example-form-field {\n width: 100%;\n}\n\n.example-button-container > button {\n margin: 0 12px;\n}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
216216
}
217217
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.4", ngImport: i0, type: ChipsFormControlExample, decorators: [{
218218
type: Component,
@@ -223,7 +223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.4",
223223
FormsModule,
224224
ReactiveFormsModule,
225225
MatIconModule,
226-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"example-button-container\">\n <button matButton=\"elevated\" (click)=\"formControl.disable()\">Disable form control</button>\n <button matButton=\"elevated\" (click)=\"formControl.enable()\">Enable form control</button>\n</div>\n<p>\n <em>Enter video keywords</em>\n</p>\n<mat-form-field class=\"example-form-field\">\n <mat-label>Video keywords</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Enter keywords\" [formControl]=\"formControl\">\n @for (keyword of keywords(); track keyword) {\n <mat-chip-row (removed)=\"removeKeyword(keyword)\">\n {{keyword}}\n <button matChipRemove aria-label=\"'remove ' + keyword\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n placeholder=\"New keyword...\"\n [matChipInputFor]=\"chipGrid\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n</mat-form-field>\n\n<p><strong>The following keywords are entered:</strong> {{formControl.value}}</p>\n", styles: [".example-form-field {\n width: 100%;\n}\n\n.example-button-container > button {\n margin: 0 12px;\n}\n"] }]
226+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"example-button-container\">\n <button matButton=\"elevated\" (click)=\"formControl.disable()\">Disable form control</button>\n <button matButton=\"elevated\" (click)=\"formControl.enable()\">Enable form control</button>\n</div>\n<p>\n <em>Enter video keywords</em>\n</p>\n<mat-form-field class=\"example-form-field\">\n <mat-label>Video keywords</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Enter keywords\" [formControl]=\"formControl\">\n @for (keyword of keywords(); track keyword) {\n <mat-chip-row (removed)=\"removeKeyword(keyword)\">\n {{keyword}}\n <button matChipRemove [attr.aria-label]=\"'remove ' + keyword\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n placeholder=\"New keyword...\"\n [matChipInputFor]=\"chipGrid\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n</mat-form-field>\n\n<p><strong>The following keywords are entered:</strong> {{formControl.value}}</p>\n", styles: [".example-form-field {\n width: 100%;\n}\n\n.example-button-container > button {\n margin: 0 12px;\n}\n"] }]
227227
}] });
228228

229229
/**

‎fesm2022/material/chips.mjs.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angular/components-examples",
3-
"version": "20.0.0-next.5+sha-6ac4c1a",
3+
"version": "20.0.0-next.5+sha-ac357fb",
44
"description": "Angular Components Examples",
55
"private": true,
66
"repository": {
@@ -259,15 +259,15 @@
259259
},
260260
"homepage": "https://github.com/angular/components#readme",
261261
"peerDependencies": {
262-
"@angular/cdk": "20.0.0-next.5+sha-6ac4c1a",
263-
"@angular/cdk-experimental": "20.0.0-next.5+sha-6ac4c1a",
262+
"@angular/cdk": "20.0.0-next.5+sha-ac357fb",
263+
"@angular/cdk-experimental": "20.0.0-next.5+sha-ac357fb",
264264
"@angular/core": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
265265
"@angular/common": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
266-
"@angular/material": "20.0.0-next.5+sha-6ac4c1a",
267-
"@angular/material-experimental": "20.0.0-next.5+sha-6ac4c1a",
268-
"@angular/material-moment-adapter": "20.0.0-next.5+sha-6ac4c1a",
269-
"@angular/material-luxon-adapter": "20.0.0-next.5+sha-6ac4c1a",
270-
"@angular/material-date-fns-adapter": "20.0.0-next.5+sha-6ac4c1a"
266+
"@angular/material": "20.0.0-next.5+sha-ac357fb",
267+
"@angular/material-experimental": "20.0.0-next.5+sha-ac357fb",
268+
"@angular/material-moment-adapter": "20.0.0-next.5+sha-ac357fb",
269+
"@angular/material-luxon-adapter": "20.0.0-next.5+sha-ac357fb",
270+
"@angular/material-date-fns-adapter": "20.0.0-next.5+sha-ac357fb"
271271
},
272272
"dependencies": {
273273
"tslib": "^2.3.0"

0 commit comments

Comments
 (0)