Skip to content

Commit 5c33c22

Browse files
ok7saiok7sai
committed
main - 2f094f2 refactor(aria/tree): remove tree group wrapper (#32079)
1 parent a049e65 commit 5c33c22

57 files changed

Lines changed: 134 additions & 146 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs-content/examples-highlighted/aria/combobox/combobox-tree-auto-select/combobox-tree-auto-select-example-html.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
5050

5151
@if (node.children) {
52-
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">ngTreeItemGroup</span> [<span class="hljs-attr">ownedBy</span>]=<span class="hljs-string">&quot;treeItem&quot;</span> #<span class="hljs-attr">group</span>=<span class="hljs-string">&quot;ngTreeItemGroup&quot;</span>&gt;</span>
53-
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngTreeItemGroupContent</span>&gt;</span>
52+
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;group&quot;</span>&gt;</span>
53+
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngTreeItemGroup</span> [<span class="hljs-attr">ownedBy</span>]=<span class="hljs-string">&quot;treeItem&quot;</span> #<span class="hljs-attr">group</span>=<span class="hljs-string">&quot;ngTreeItemGroup&quot;</span>&gt;</span>
5454
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span>
5555
[<span class="hljs-attr">ngTemplateOutlet</span>]=<span class="hljs-string">&quot;treeNodes&quot;</span>
5656
[<span class="hljs-attr">ngTemplateOutletContext</span>]=<span class="hljs-string">&quot;{nodes: node.children, parent: group}&quot;</span>

‎docs-content/examples-highlighted/aria/combobox/combobox-tree-auto-select/combobox-tree-auto-select-example-ts.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<span class="hljs-title class_">ComboboxPopup</span>,
1313
<span class="hljs-title class_">ComboboxPopupContainer</span>,
1414
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/combobox&#x27;</span>;
15-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>, <span class="hljs-title class_">TreeItemGroupContent</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/tree&#x27;</span>;
15+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/tree&#x27;</span>;
1616
<span class="hljs-keyword">import</span> {
1717
afterRenderEffect,
1818
<span class="hljs-title class_">ChangeDetectionStrategy</span>,
@@ -38,7 +38,6 @@
3838
<span class="hljs-title class_">Tree</span>,
3939
<span class="hljs-title class_">TreeItem</span>,
4040
<span class="hljs-title class_">TreeItemGroup</span>,
41-
<span class="hljs-title class_">TreeItemGroupContent</span>,
4241
<span class="hljs-title class_">NgTemplateOutlet</span>,
4342
],
4443
<span class="hljs-attr">changeDetection</span>: <span class="hljs-title class_">ChangeDetectionStrategy</span>.<span class="hljs-property">OnPush</span>,

‎docs-content/examples-highlighted/aria/combobox/combobox-tree-highlight/combobox-tree-highlight-example-html.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
5050

5151
@if (node.children) {
52-
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">ngTreeItemGroup</span> [<span class="hljs-attr">ownedBy</span>]=<span class="hljs-string">&quot;treeItem&quot;</span> #<span class="hljs-attr">group</span>=<span class="hljs-string">&quot;ngTreeItemGroup&quot;</span>&gt;</span>
53-
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngTreeItemGroupContent</span>&gt;</span>
52+
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;group&quot;</span>&gt;</span>
53+
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngTreeItemGroup</span> [<span class="hljs-attr">ownedBy</span>]=<span class="hljs-string">&quot;treeItem&quot;</span> #<span class="hljs-attr">group</span>=<span class="hljs-string">&quot;ngTreeItemGroup&quot;</span>&gt;</span>
5454
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span>
5555
[<span class="hljs-attr">ngTemplateOutlet</span>]=<span class="hljs-string">&quot;treeNodes&quot;</span>
5656
[<span class="hljs-attr">ngTemplateOutletContext</span>]=<span class="hljs-string">&quot;{nodes: node.children, parent: group}&quot;</span>

‎docs-content/examples-highlighted/aria/combobox/combobox-tree-highlight/combobox-tree-highlight-example-ts.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<span class="hljs-title class_">ComboboxPopup</span>,
1313
<span class="hljs-title class_">ComboboxPopupContainer</span>,
1414
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/combobox&#x27;</span>;
15-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>, <span class="hljs-title class_">TreeItemGroupContent</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/tree&#x27;</span>;
15+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/tree&#x27;</span>;
1616
<span class="hljs-keyword">import</span> {
1717
afterRenderEffect,
1818
<span class="hljs-title class_">ChangeDetectionStrategy</span>,
@@ -38,7 +38,6 @@
3838
<span class="hljs-title class_">Tree</span>,
3939
<span class="hljs-title class_">TreeItem</span>,
4040
<span class="hljs-title class_">TreeItemGroup</span>,
41-
<span class="hljs-title class_">TreeItemGroupContent</span>,
4241
<span class="hljs-title class_">NgTemplateOutlet</span>,
4342
],
4443
<span class="hljs-attr">changeDetection</span>: <span class="hljs-title class_">ChangeDetectionStrategy</span>.<span class="hljs-property">OnPush</span>,

‎docs-content/examples-highlighted/aria/combobox/combobox-tree-manual/combobox-tree-manual-example-html.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
5050

5151
@if (node.children) {
52-
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">ngTreeItemGroup</span> [<span class="hljs-attr">ownedBy</span>]=<span class="hljs-string">&quot;treeItem&quot;</span> #<span class="hljs-attr">group</span>=<span class="hljs-string">&quot;ngTreeItemGroup&quot;</span>&gt;</span>
53-
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngTreeItemGroupContent</span>&gt;</span>
52+
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;group&quot;</span>&gt;</span>
53+
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngTreeItemGroup</span> [<span class="hljs-attr">ownedBy</span>]=<span class="hljs-string">&quot;treeItem&quot;</span> #<span class="hljs-attr">group</span>=<span class="hljs-string">&quot;ngTreeItemGroup&quot;</span>&gt;</span>
5454
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span>
5555
[<span class="hljs-attr">ngTemplateOutlet</span>]=<span class="hljs-string">&quot;treeNodes&quot;</span>
5656
[<span class="hljs-attr">ngTemplateOutletContext</span>]=<span class="hljs-string">&quot;{nodes: node.children, parent: group}&quot;</span>

‎docs-content/examples-highlighted/aria/combobox/combobox-tree-manual/combobox-tree-manual-example-ts.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<span class="hljs-title class_">ComboboxPopup</span>,
1313
<span class="hljs-title class_">ComboboxPopupContainer</span>,
1414
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/combobox&#x27;</span>;
15-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>, <span class="hljs-title class_">TreeItemGroupContent</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/tree&#x27;</span>;
15+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/tree&#x27;</span>;
1616
<span class="hljs-keyword">import</span> {
1717
afterRenderEffect,
1818
<span class="hljs-title class_">ChangeDetectionStrategy</span>,
@@ -38,7 +38,6 @@
3838
<span class="hljs-title class_">Tree</span>,
3939
<span class="hljs-title class_">TreeItem</span>,
4040
<span class="hljs-title class_">TreeItemGroup</span>,
41-
<span class="hljs-title class_">TreeItemGroupContent</span>,
4241
<span class="hljs-title class_">NgTemplateOutlet</span>,
4342
],
4443
<span class="hljs-attr">changeDetection</span>: <span class="hljs-title class_">ChangeDetectionStrategy</span>.<span class="hljs-property">OnPush</span>,

‎docs-content/examples-highlighted/aria/tree/tree-active-descendant/tree-active-descendant-example-html.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
2424

2525
@if (node.children) {
26-
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">ngTreeItemGroup</span> [<span class="hljs-attr">ownedBy</span>]=<span class="hljs-string">&quot;treeItem&quot;</span> #<span class="hljs-attr">group</span>=<span class="hljs-string">&quot;ngTreeItemGroup&quot;</span>&gt;</span>
27-
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngTreeItemGroupContent</span>&gt;</span>
26+
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;group&quot;</span>&gt;</span>
27+
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngTreeItemGroup</span> [<span class="hljs-attr">ownedBy</span>]=<span class="hljs-string">&quot;treeItem&quot;</span> #<span class="hljs-attr">group</span>=<span class="hljs-string">&quot;ngTreeItemGroup&quot;</span>&gt;</span>
2828
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span>
2929
[<span class="hljs-attr">ngTemplateOutlet</span>]=<span class="hljs-string">&quot;treeNodes&quot;</span>
3030
[<span class="hljs-attr">ngTemplateOutletContext</span>]=<span class="hljs-string">&quot;{nodes: node.children, parent: group}&quot;</span>

‎docs-content/examples-highlighted/aria/tree/tree-active-descendant/tree-active-descendant-example-ts.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
1010
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">NgTemplateOutlet</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/common&#x27;</span>;
11-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>, <span class="hljs-title class_">TreeItemGroupContent</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/tree&#x27;</span>;
11+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/tree&#x27;</span>;
1212
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">TreeNode</span>, <span class="hljs-variable constant_">NODES</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../tree-data&#x27;</span>;
1313

1414
<span class="hljs-comment">/**
@@ -20,7 +20,7 @@
2020
<span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;tree-active-descendant-example.html&#x27;</span>,
2121
<span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;../tree-common.css&#x27;</span>,
2222
<span class="hljs-attr">standalone</span>: <span class="hljs-literal">true</span>,
23-
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>, <span class="hljs-title class_">TreeItemGroupContent</span>, <span class="hljs-title class_">NgTemplateOutlet</span>],
23+
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>, <span class="hljs-title class_">NgTemplateOutlet</span>],
2424
})
2525
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TreeActiveDescendantExample</span> {
2626
<span class="hljs-attr">nodes</span>: <span class="hljs-title class_">TreeNode</span>[] = <span class="hljs-variable constant_">NODES</span>;

‎docs-content/examples-highlighted/aria/tree/tree-configurable/tree-configurable-example-html.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@
6363
<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
6464

6565
@if (node.children) {
66-
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">ngTreeItemGroup</span> [<span class="hljs-attr">ownedBy</span>]=<span class="hljs-string">&quot;treeItem&quot;</span> #<span class="hljs-attr">group</span>=<span class="hljs-string">&quot;ngTreeItemGroup&quot;</span>&gt;</span>
67-
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngTreeItemGroupContent</span>&gt;</span>
66+
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;group&quot;</span>&gt;</span>
67+
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngTreeItemGroup</span> [<span class="hljs-attr">ownedBy</span>]=<span class="hljs-string">&quot;treeItem&quot;</span> #<span class="hljs-attr">group</span>=<span class="hljs-string">&quot;ngTreeItemGroup&quot;</span>&gt;</span>
6868
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span>
6969
[<span class="hljs-attr">ngTemplateOutlet</span>]=<span class="hljs-string">&quot;treeNodes&quot;</span>
7070
[<span class="hljs-attr">ngTemplateOutletContext</span>]=<span class="hljs-string">&quot;{nodes: node.children, parent: group}&quot;</span>

‎docs-content/examples-highlighted/aria/tree/tree-configurable/tree-configurable-example-ts.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatCheckboxModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/checkbox&#x27;</span>;
1212
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatFormFieldModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/form-field&#x27;</span>;
1313
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatSelectModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/select&#x27;</span>;
14-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>, <span class="hljs-title class_">TreeItemGroupContent</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/tree&#x27;</span>;
14+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Tree</span>, <span class="hljs-title class_">TreeItem</span>, <span class="hljs-title class_">TreeItemGroup</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/aria/tree&#x27;</span>;
1515
<span class="hljs-keyword">import</span> {<span class="hljs-variable constant_">NODES</span>, <span class="hljs-title class_">TreeNode</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../tree-data&#x27;</span>;
1616

1717
<span class="hljs-comment">/** <span class="hljs-doctag">@title</span> Configurable Tree. */</span>
@@ -31,7 +31,6 @@
3131
<span class="hljs-title class_">Tree</span>,
3232
<span class="hljs-title class_">TreeItem</span>,
3333
<span class="hljs-title class_">TreeItemGroup</span>,
34-
<span class="hljs-title class_">TreeItemGroupContent</span>,
3534
],
3635
})
3736
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">TreeConfigurableExample</span> {

0 commit comments

Comments
 (0)