Skip to content

Commit 48db678

Browse files
committed
main - 9122335 feat(material/checkbox): add new aria properties to MatCheckbox (#29457)
1 parent a619bb8 commit 48db678

31 files changed

+89
-41
lines changed

docs-content/api-docs/material-checkbox.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,20 @@ <h4 id="MatCheckbox" class="docs-header-link docs-api-h4 docs-api-class-name">
4949

5050

5151

52+
<tr class="docs-api-properties-row">
53+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">&#39;aria-controls&#39;</span>)
54+
</div><p class="docs-api-property-name">
55+
<code>ariaControls: string</code>
56+
</p>
57+
</td>
58+
<td class="docs-api-property-description"><p>Users can specify the <code>aria-controls</code> attribute which will be forwarded to the input element</p>
59+
</td>
60+
</tr>
61+
62+
63+
64+
65+
5266
<tr class="docs-api-properties-row">
5367
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">&#39;aria-describedby&#39;</span>)
5468
</div><p class="docs-api-property-name">
@@ -63,6 +77,20 @@ <h4 id="MatCheckbox" class="docs-header-link docs-api-h4 docs-api-class-name">
6377

6478

6579

80+
<tr class="docs-api-properties-row">
81+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ alias: &#39;aria-expanded&#39;, transform: booleanAttribute }</span>)
82+
</div><p class="docs-api-property-name">
83+
<code>ariaExpanded: boolean</code>
84+
</p>
85+
</td>
86+
<td class="docs-api-property-description"><p>Users can specify the <code>aria-expanded</code> attribute which will be forwarded to the input element</p>
87+
</td>
88+
</tr>
89+
90+
91+
92+
93+
6694
<tr class="docs-api-properties-row">
6795
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">&#39;aria-label&#39;</span>)
6896
</div><p class="docs-api-property-name">
@@ -92,6 +120,20 @@ <h4 id="MatCheckbox" class="docs-header-link docs-api-h4 docs-api-class-name">
92120

93121

94122

123+
<tr class="docs-api-properties-row">
124+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">&#39;aria-owns&#39;</span>)
125+
</div><p class="docs-api-property-name">
126+
<code>ariaOwns: string</code>
127+
</p>
128+
</td>
129+
<td class="docs-api-property-description"><p>Users can specify the <code>aria-owns</code> attribute which will be forwarded to the input element</p>
130+
</td>
131+
</tr>
132+
133+
134+
135+
136+
95137
<tr class="docs-api-properties-row">
96138
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ transform: booleanAttribute }</span>)
97139
</div><p class="docs-api-property-name">

docs-content/overviews/material/checkbox/checkbox.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,10 @@ <h3 id="accessibility" class="docs-header-link">
8383
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-checkbox</span> [<span class="hljs-attr">aria-label</span>]=<span class="hljs-string">&quot;isSubscribedToEmailsMessage&quot;</span>&gt;</span>
8484
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-checkbox</span>&gt;</span>
8585
</code></pre>
86+
<p>Additionally, <code>MatCheckbox</code> now supports the following accessibility properties:</p>
87+
<ul>
88+
<li><strong><code>aria-expanded</code></strong>: Indicates whether the checkbox controls the visibility of another element. This should be a boolean value (<code>true</code> or <code>false</code>).</li>
89+
<li><strong><code>aria-controls</code></strong>: Specifies the ID of the element that the checkbox controls.</li>
90+
<li><strong><code>aria-owns</code></strong>: Specifies the ID of the element that the checkbox visually owns.</li>
91+
</ul>
8692
</div>

fesm2022/cdk-experimental/selection.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ class CdkSelectionListExample {
7474
this.data = ELEMENT_NAMES;
7575
}
7676
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: CdkSelectionListExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
77-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.3", type: CdkSelectionListExample, isStandalone: true, selector: "cdk-selection-list-example", ngImport: i0, template: "<h3><code>native input</code></h3>\nSelected: {{selected1}}\n<ul cdkSelection [dataSource]=\"data\" [cdkSelectionMultiple]=\"true\" (cdkSelectionChange)=\"selected1 = getCurrentSelected($event)\">\n <input type=\"checkbox\" cdkSelectAll #allToggler=\"cdkSelectAll\"\n [checked]=\"allToggler.checked | async\"\n [indeterminate]=\"allToggler.indeterminate | async\"\n (click)=\"allToggler.toggle($event)\">\n @for (item of data; track item) {\n <li>\n <input type=\"checkbox\" cdkSelectionToggle #toggler=\"cdkSelectionToggle\" [cdkSelectionToggleValue]=\"item\"\n [checked]=\"toggler.checked | async\" (click)=\"toggler.toggle()\">\n {{item}}\n </li>\n }\n</ul>\n\n<h3><code>mat-checkbox</code></h3>\nSelected: {{selected2}}\n<ul cdkSelection [dataSource]=\"data\" [cdkSelectionMultiple]=\"true\" (cdkSelectionChange)=\"selected2 = getCurrentSelected($event)\">\n <mat-checkbox cdkSelectAll #toggle1=\"cdkSelectAll\" [indeterminate]=\"toggle1.indeterminate | async\"></mat-checkbox>\n @for (item of data; track item) {\n <li>\n <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]=\"item\"></mat-checkbox>\n {{item}}\n </li>\n }\n</ul>\n\n<h3><code>Single select with mat-checkbox</code></h3>\nSelected: {{selected3}}\n<ul cdkSelection [dataSource]=\"data\" [cdkSelectionMultiple]=\"false\" (cdkSelectionChange)=\"selected3 = getCurrentSelected($event)\">\n @for (item of data; track item) {\n <li>\n <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]=\"item\"></mat-checkbox>\n {{item}}\n </li>\n }\n</ul>\n\n<h3><code>with trackBy</code></h3>\nSelected: {{selected4}}\n<ul cdkSelection [dataSource]=\"data\" [cdkSelectionMultiple]=\"true\" [trackBy]=\"trackByFn\" (cdkSelectionChange)=\"selected4 = getCurrentSelected($event)\">\n <mat-checkbox cdkSelectAll #toggle2=\"cdkSelectAll\" [indeterminate]=\"toggle2.indeterminate | async\"></mat-checkbox>\n @for (item of data; track trackByFn($index)) {\n <li>\n <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]=\"item\" [cdkSelectionToggleIndex]=\"$index\"></mat-checkbox>\n {{item}}\n </li>\n }\n</ul>\n\n<button (click)=\"changeElementName()\">Change element names and the already selected stays</button>\n<button (click)=\"reset()\">reset</button>\n", dependencies: [{ kind: "ngmodule", type: CdkSelectionModule }, { kind: "directive", type: i2.CdkSelection, selector: "[cdkSelection]", inputs: ["dataSource", "trackBy", "cdkSelectionMultiple"], outputs: ["cdkSelectionChange"], exportAs: ["cdkSelection"] }, { kind: "directive", type: i2.CdkSelectionToggle, selector: "[cdkSelectionToggle]", inputs: ["cdkSelectionToggleValue", "cdkSelectionToggleIndex"], exportAs: ["cdkSelectionToggle"] }, { kind: "directive", type: i2.CdkSelectAll, selector: "[cdkSelectAll]", exportAs: ["cdkSelectAll"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
77+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.3", type: CdkSelectionListExample, isStandalone: true, selector: "cdk-selection-list-example", ngImport: i0, template: "<h3><code>native input</code></h3>\nSelected: {{selected1}}\n<ul cdkSelection [dataSource]=\"data\" [cdkSelectionMultiple]=\"true\" (cdkSelectionChange)=\"selected1 = getCurrentSelected($event)\">\n <input type=\"checkbox\" cdkSelectAll #allToggler=\"cdkSelectAll\"\n [checked]=\"allToggler.checked | async\"\n [indeterminate]=\"allToggler.indeterminate | async\"\n (click)=\"allToggler.toggle($event)\">\n @for (item of data; track item) {\n <li>\n <input type=\"checkbox\" cdkSelectionToggle #toggler=\"cdkSelectionToggle\" [cdkSelectionToggleValue]=\"item\"\n [checked]=\"toggler.checked | async\" (click)=\"toggler.toggle()\">\n {{item}}\n </li>\n }\n</ul>\n\n<h3><code>mat-checkbox</code></h3>\nSelected: {{selected2}}\n<ul cdkSelection [dataSource]=\"data\" [cdkSelectionMultiple]=\"true\" (cdkSelectionChange)=\"selected2 = getCurrentSelected($event)\">\n <mat-checkbox cdkSelectAll #toggle1=\"cdkSelectAll\" [indeterminate]=\"toggle1.indeterminate | async\"></mat-checkbox>\n @for (item of data; track item) {\n <li>\n <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]=\"item\"></mat-checkbox>\n {{item}}\n </li>\n }\n</ul>\n\n<h3><code>Single select with mat-checkbox</code></h3>\nSelected: {{selected3}}\n<ul cdkSelection [dataSource]=\"data\" [cdkSelectionMultiple]=\"false\" (cdkSelectionChange)=\"selected3 = getCurrentSelected($event)\">\n @for (item of data; track item) {\n <li>\n <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]=\"item\"></mat-checkbox>\n {{item}}\n </li>\n }\n</ul>\n\n<h3><code>with trackBy</code></h3>\nSelected: {{selected4}}\n<ul cdkSelection [dataSource]=\"data\" [cdkSelectionMultiple]=\"true\" [trackBy]=\"trackByFn\" (cdkSelectionChange)=\"selected4 = getCurrentSelected($event)\">\n <mat-checkbox cdkSelectAll #toggle2=\"cdkSelectAll\" [indeterminate]=\"toggle2.indeterminate | async\"></mat-checkbox>\n @for (item of data; track trackByFn($index)) {\n <li>\n <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]=\"item\" [cdkSelectionToggleIndex]=\"$index\"></mat-checkbox>\n {{item}}\n </li>\n }\n</ul>\n\n<button (click)=\"changeElementName()\">Change element names and the already selected stays</button>\n<button (click)=\"reset()\">reset</button>\n", dependencies: [{ kind: "ngmodule", type: CdkSelectionModule }, { kind: "directive", type: i2.CdkSelection, selector: "[cdkSelection]", inputs: ["dataSource", "trackBy", "cdkSelectionMultiple"], outputs: ["cdkSelectionChange"], exportAs: ["cdkSelection"] }, { kind: "directive", type: i2.CdkSelectionToggle, selector: "[cdkSelectionToggle]", inputs: ["cdkSelectionToggleValue", "cdkSelectionToggleIndex"], exportAs: ["cdkSelectionToggle"] }, { kind: "directive", type: i2.CdkSelectAll, selector: "[cdkSelectAll]", exportAs: ["cdkSelectAll"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
7878
}
7979
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: CdkSelectionListExample, decorators: [{
8080
type: Component,

0 commit comments

Comments
 (0)