fix(material/tree): add levelAccessor, childrenAccessor, TreeKeyManag… …er; a11y and docs improvements #27626

zarend · 2023-08-11T16:26:59Z

Update multiple facets of Tree component. Add APIs to manage data models, improve existing behaviors, add keyboard functionality and update documentation.

Add APIs options to the Tree data model by introducing levelAccessor and childrenAccessor. See “Api Addition” for usage. Currently, Tree component use TreeControl to manage data model. When applied, add levelAccessor and childrenAccessor functions as alternatives to TreeControl.

Add TreeKeyManager, which provides keyboard functionality. Currently Tree component allows developers to manage focus by setting tabindex on each tree node. When applied, Tree manages its own focus using key manager pattern. Keyboard commands match WAI ARIA Tree View Pattern. See “Deprecated” for adopting changes to existing applications.

Correct the ARIA semantics of Tree and Tree node components.

Document updated APIs and behaviors. Refine documentation of existing APIs and behaviors.

Changes to Cdk Tree API also apply to Mat Tree API. See “Deprecated” for adopting changes to existing applications.

Accessibility:

add CdkTreeKeyManager to provide keyboard navigation for CdkTree and MatTree
Improve keyboard usability of CdkTreeNodeToggle.
Improve ARIA semantics of CdkTree, CdkTreeNode, Tree and TreeNode components
Fix miscellaneous accessibility issues in tree and cdk-tree examples
Add accessibility instructions to documentation

Documentation:

Add API and usage examples for TreeKeyManager
Update @angular/cdk/tree and @angular/material/tree to be more consistent
Update examples to use levelAccessor and childrenAccessor
Add example for (activation) on MatTreeNode and CdkTreeNode

API ADDITION: add CdkTree#childrenAccessor and CdkTree#levelAccessor

Add CdkTree#childrenAccessor. Given a data node, childrenAccessor determines the children of that node.
Add CdkTree#levelAccessor. Given a data node, levelAccessor determines the level of the node in the parent hierarchy.
CdkTreeNode#levelAcessor and CdkTreeNode#childrenAccessor replace CdkTreeNode#treeControl.

See “Deprecated” for updating apps using treeControl.

API ADDITION: control expanded state of tree nodes using isExpandable and isExpanded

Add CdkTreeNode#isExpandable, determines if argument tree node can be expanded or collapsed.
CdkTreeNode#isExpanded to specify the expanded state. Has no effect if node is not expandable.
Add NestedTreeControlOptions#isExpandable function, determines if argument tree node can be expanded or collapsed.

For trees using treeControl, recommend providing isExpandable if not already provided. See “Deprecated” for more information on updating applications.

API ADDITION: use CdkTree to manage expansion state

Add CdkTree#isExpanded method.
Add CdkTree#toggle, CdkTree#expand and CdkTree#collapse methods.
Add CdkTree#toggleDescendants, CdkTree#expandDescendants, and CdkTree#collapseDescendants methods to CdkTree
Add CdkTree#expandAll and CdkTree#collapseAll methods
Add expandedChange Output to CdkTreeNode

API ADDITION: add injection token for tree-key-manager

Add TREE_KEY_MANAGER injection token. When provided, tree uses given key manager
TreeKeyManagerStrategy interface, which defines API contract of TREE_KEY_MANAGER

BEHAVIOR CHANGE: MatTree and CdkTree components respond to keyboard navigation.

CdkTree and MatTree respond to arrow keys, page up, page down, etc.; Keyboard commands match WAI ARIA Tree View Pattern.
Can no longer set the tabindex on MatTreeNode. See “Deprecated” for adopting existing applications.
Add TreeKeyManager to cdk/a11y

DEPRECATED: Tree controller deprecated. Use one of levelAccessor or childrenAccessor instead. To be removed in a future version.

BaseTreeControl, TreeControl, FlatTreeControl, and NestedTreeControl deprecated
CdkTree#treeControl deprecated. Provide one of CdkTree#levelAccessor or CdkTree#childrenAccessor instead.
MatTreeFlattener deprecated. Use MatTree#childrenAccessor and MatTreeNode#isExpandable instead.
MatTreeFlatDataSource deprecated. Use one of levelAccessor or childrenAccessor instead of TreeControl.

Note when upgrading: isExpandable works differently on Trees using treeControl than trees using childrenAccessor or levelAccessor. Nodes on trees that have a treeControl are expandable by default. Nodes on trees using childrenAccessor or levelAccessor are not expandable by default. Provide isExpandable to override default behavior.

DEPRECATED: Setting tabindex of tree nodes deprecated. By default, Tree ignores tabindex passed to tree nodes.

MatTreeNode#tabIndex deprecated. MatTreeNode ignores Input tabIndex and manages its own focus behavior.
MatTreeNode#defaultTabIndex deprecated. MatTreeNode ignores defaultTabIndex and manages its own focus behavior.
MatNestedTreeNode#tabIndex deprecated. MatTreeNode ignores Input defaultTabIndex and manages its own focus behavior.
LegacyTreeKeyManager and LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER deprecated. Inject a TreeKeyManagerFactory to customize keyboard behavior.

Note when upgrading: an opt-out is available for keyboard functionality changes. Provide LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER to opt-out of Tree managing its own focus. When provided, Tree does not manage it’s own focus and respects tabindex passed to TreeNode. When provided, have the same focus behavior as before this commit is applied.

Add Legacy Keyboard Interface demo, which shows usage of LEGACY_TREE_KEY_MANAGER_FACTORY_PROVIDER. Add Custom Key Manager, which shows usage of injecting a TreeKeyManagerStrategy

DEPRECATED: disabled renamed to isDisabled.

CdkTreeNode#disabled deprecated and alias to CdkTreeNode#isDisabled

github-actions · 2023-08-11T16:33:36Z

Deployed dev-app for e7a5b31 to: https://ng-dev-previews-comp--pr-angular-components-27626-gieu7oe0.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

zarend · 2023-11-08T22:04:53Z

Since this was last reviewed: resolved merged conflicts.

Resolved conflicts by first rebasing with target branch then merging target branch into this branch.

This is planned to merge as a single commit. Additional commits will be squashed away.

mmalerba · 2023-10-31T16:59:34Z

src/cdk/tree/toggle.ts

- * Node toggle to expand/collapse the node.
+ * Node toggle to expand and collapse the node.
+ *
+ * CdkTreeNodeToggle is intended only to be used on native button elements, elements with button role,


If you want, you could detect this and log a warning in devmode if its on an invalid element. In a future major release we could upgrade the warning to an error

mmalerba · 2023-10-31T18:04:55Z

src/cdk/tree/tree.ts

+   * correct aria attribute values.
+   *
+   * The structure of this is that:
+   * - the outer index is the level


This doesn't make sense to me. What does outer index mean, the map key? and inner means the array index? That's what I would assume this means, but the types don't seem to line up with that meaning

this structure was changed without updating the comment (will fix)

mmalerba · 2023-10-31T18:23:53Z

src/cdk/tree/tree.ts

+    // item when the tree is focused. We set the tabindex to be `0` so that we can capture
+    // the focus event and redirect it. Otherwise, we unset it.
+    if (!this._keyManager.getActiveItem()) {
+      this._elementRef.nativeElement.setAttribute('tabindex', '0');


should this bit of tabindex management live on the key manager? since it handles the rest of the tabindex management.

I'm working on adressing this by seeing if we can avoid setting the tabindex on the role="tree" element.

src/cdk/tree/tree.ts

src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.ts

mmalerba · 2023-11-09T16:55:41Z

src/cdk/a11y/key-manager/legacy-tree-key-manager.ts

+ * @docs-private
+ *
+ * @deprecated LegacyTreeKeyManager deprecated. Use TreeKeyManager or inject a
+ * TreeKeyManagerStrategy instead. To be removed in a future version.
+ *
+ * @breaking-change 19.0.0


I think this is ok. The class is being introduced for backwards compatibility. We don't really want to consider it part of the public API, but also if someone does go and dig it up by looking through the code, we want it to be clear that its deprecated and they shouldn't use it

mmalerba · 2023-11-09T17:23:51Z

src/material/tree/node.ts

+   *   an unexpected state. Tabindex to be removed in a future version.
+   * @breaking-change 19.0.0 Remove this attribute.
+   */
+  defaultTabIndex = 0;


Why is this being introduced as deprecated instead of just private/internal?

defaultTabIndex has been here all along. this PR doesn't actually introduce defaultTabIndex. That's because before it was coming from hasTabindex mixin. This change removes the mixin so we can mark the members as deprecated and change the logic of how tabindex is set – by default MatTreeNode ignores the tabindex Input provided and uses the key manager instead.

src/material/tree/node.ts

mmalerba · 2023-11-09T17:29:38Z

src/material/tree/node.ts

    @Attribute('tabindex') tabIndex: string,
  ) {
    super(elementRef, tree);
-    this.tabIndex = Number(tabIndex) || 0;
+
+    this.tabIndex = Number(tabIndex) || this.defaultTabIndex;


Is this correct? This will assign defaultTabIndex for tabindex="0". If we want to respect the users's explicit 0 setting, we could do: this.tabIndex = tabIndex ? Number(tabIndex) : this.defaultTabIndex

Intention is that the implementation is exactly the same as before, but it's refactored to not use the hasTabindex mixin.

andrewseguin · 2023-11-09T19:34:48Z

src/cdk/a11y/key-manager/tree-key-manager.ts

+export interface TreeKeyManagerOptions<T extends TreeKeyManagerItem> {
+  /**
+   * Sets the predicate function that determines which items should be skipped by the tree key
+   * manager. By default, disabled items are skipped.


It feels weird that the interface documentation talks about defaults, since it doesn't have any implementation.

src/cdk/a11y/key-manager/tree-key-manager.ts

andrewseguin · 2023-11-09T19:59:52Z

src/cdk/a11y/key-manager/tree-key-manager.ts

+  private readonly _letterKeyStream = new Subject<string>();
+  private _typeaheadSubscription = Subscription.EMPTY;
+
+  /**


Should the rest of the preceding private variables have similar jsdocs?

src/cdk/a11y/key-manager/tree-key-manager.ts

Fix miscellaneous PR comments. Take a first pass to fix comments that are easiest to fix. This commit message will be squashed away when merging. * move type definitions in tree-key-manager.ts to a new file, tree-key-manager-strategy.ts * remove unnecessary comment * fix JSDoc comment syntax * remove isNotNullish * consolidate event handling code in CdkTreeNodeToggle * remove unnecessary type coerscion * simply logic for detecting TreeControlMissingError and MultipleTreeControlsError * adopt Input transform * remove unnecessary nesting in _updateActiveItemIndex

Use OnPush change detection in Tree examples.

refactor(cdk/tree): simplify code in lifecycle hooks Refactor CdkTree implementation to simplify code in lifecycle hooks. Create a RenderingData type definition to simplify the Tree's rendering pipeline. The render pipeline looks like this. It has two entry points ngAfterContentChecked and whener the datasource is switched. 1. ngAfterContentChecked OR datasource changed 2. call _subscribeToDataChanges From here, the pipeline diverges. Tree subscribes to changes in the datasource and expansion state. From there, the pipeline goes on two paths: emit changes to expansion state, and render the changes from the datasource. Add RenderingData type to make it more clear what stages are in the pipeline. This commit message will be squashed away.

Fix miscelaneous focus management details in response to PR feedback. * omit tabindex attribute on role="tree" element * Remove TreeKeyManagerStrategy#onInitialFocus * Implement focus/unfocus pattern for TreeKeyManagerOption and use a binding to set tabindex on tree nodes * algin with https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols * Add tree-using-legacy-key-manager.spec.ts

…vamp

…8142) factor out a typeahead class for key managers

Make miscelaneous fixes to documentation. Rename variables. Responding to PR feedback. * remove comment about API contract of CdkTreeNodeToggle * rename CdkTree#_groups to CdkTree#_ariaSets * move documentation about default key manager configuration from TreeKeyManagerStrategy interface to TreeKeyManager class. * add JSDoc style comments for NoopTreeKeyManager

Add unit tests to cover the use of LegacyTreeKeyManager, which opts out of updated focus management behavior.

zarend · 2023-12-06T17:26:07Z

Note to reviewers: see unit tests for opt-out behavior:

jelbourn · 2023-12-12T00:11:56Z

src/cdk/a11y/a11y.md

@@ -27,7 +27,7 @@ Navigation through options can be made to wrap via the `withWrap` method
 this.keyManager = new FocusKeyManager(...).withWrap();
 ```

-#### Types of key managers
+#### Types of list key managers

 There are two varieties of `ListKeyManager`, `FocusKeyManager` and `ActiveDescendantKeyManager`.


Should this sentence also be updated?

I'm not sure what needs updating here?

jelbourn · 2023-12-12T00:13:25Z

src/cdk/a11y/a11y.md

+`TreeKeyManager` manages the active option in a tree view. This is intended to be used with
+components that correspond to a `role="tree"` pattern.


Suggested change

`TreeKeyManager` manages the active option in a tree view. This is intended to be used with

components that correspond to a `role="tree"` pattern.

`TreeKeyManager` manages the active option in a tree view. USe this key manager for

components that implement a `role="tree"` pattern.

jelbourn · 2023-12-12T00:15:06Z

src/cdk/a11y/a11y.md

+
+#### Basic usage
+
+Any component that uses a `TreeKeyManager` will generally do three things:


Suggested change

Any component that uses a `TreeKeyManager` will generally do three things:

Any component that uses a `TreeKeyManager` should do three things:

nit: technical docs should already be present tense. Also replaced "generally do" with the stronger "should" (which I think is accurate here)

jelbourn · 2023-12-12T00:17:02Z

src/cdk/a11y/key-manager/list-key-manager.spec.ts

@@ -150,6 +150,7 @@ describe('Key managers', () => {

        keyManager.setActiveItem(0);
        itemList.reset([new FakeFocusable('zero'), ...itemList.toArray()]);
+        itemList.notifyOnChanges();


Why is this manually calling notifyOnChanges? IIRC, this wasn't meant to be part of the public API of QueryList; tests would generally want to cause change detection instead (though it's possible I'm missing something here)

It does notifyOnChanges instead of change detection because there is no test fixture. This test file doesn't create any kind of test component or use TestBed at all. It's vanilla test, so change detection is not available.

jelbourn · 2023-12-12T00:20:48Z

src/cdk/a11y/key-manager/typeahead.ts

+  skipPredicate?: (item: T) => boolean | undefined;
+}
+
+export class Typeahead<T extends TypeaheadItem> {


JsDoc for the responsibility of this class?

jelbourn · 2023-12-12T00:32:58Z

src/cdk/tree/tree.ts

+    return (
+      this.treeControl?.isExpanded(dataNode) ??
+      this._expansionModel?.isSelected(this._getExpansionKey(dataNode)) ??
+      false
+    );


Suggested change

return (

this.treeControl?.isExpanded(dataNode) ??

this._expansionModel?.isSelected(this._getExpansionKey(dataNode)) ??

false

);

return !!(

this.treeControl?.isExpanded(dataNode) ||

this._expansionModel?.isSelected(this._getExpansionKey(dataNode)));

optional: I find the logical || with boolean coercion more readable in this situation

jelbourn · 2023-12-12T00:35:14Z

src/cdk/tree/tree.ts

+    if (levelAccessor) {
+      return combineLatest([isExpanded, this._flattenedNodes]).pipe(
+        map(([expanded, flattenedNodes]) => {
+          if (!expanded) {
+            return [];
+          }
+          const startIndex = flattenedNodes.findIndex(node => this._getExpansionKey(node) === key);
+          const level = levelAccessor(dataNode) + 1;
+          const results: T[] = [];
+
+          // Goes through flattened tree nodes in the `flattenedNodes` array, and get all direct
+          // descendants. The level of descendants of a tree node must be equal to the level of the
+          // given tree node + 1.
+          // If we reach a node whose level is equal to the level of the tree node, we hit a sibling.
+          // If we reach a node whose level is greater than the level of the tree node, we hit a
+          // sibling of an ancestor.
+          for (let i = startIndex + 1; i < flattenedNodes.length; i++) {
+            const currentLevel = levelAccessor(flattenedNodes[i]);
+            if (level > currentLevel) {
+              break;
+            }
+            if (level === currentLevel) {
+              results.push(flattenedNodes[i]);
+            }
+          }
+          return results;
+        }),
+      );
+    }
+    const childrenAccessor = this._getChildrenAccessor();
+    if (childrenAccessor) {
+      return coerceObservable(childrenAccessor(dataNode) ?? []);
+    }
+    throw getTreeControlMissingError();


It would be a bit easier to follow if there was a breakout function like getDirectChildrenByLevel

jelbourn · 2023-12-12T00:37:03Z

src/cdk/tree/tree.ts

+    if (this.treeControl) {
+      return observableOf(this.treeControl.getDescendants(dataNode));
+    }
+    if (this.levelAccessor) {


Similar comment here about breakout function like getDescendantsByLevel

jelbourn · 2023-12-12T00:54:53Z

src/cdk/tree/tree.ts

+   *
+   * This also computes parent, level, and group data.
+   */
+  private _convertData(


This function name (and description) is pretty vague- could it be more specific?

That this method actual does is map data from the DataSource into RenderingData type.

It also needs to handle all the different cases for nodeType. The Tree infers the type of the nodes based on the data its DataSource gives it. Handling nodeType is part of why there are so many conditional cases here.

jelbourn · 2023-12-12T00:56:58Z

src/material/tree/tree.md

+
+#### Connecting the tree to a data source
+
+Similar to `mat-table`, data is provided to the tree through a `DataSource`. When the tree receives


Suggested change

Similar to `mat-table`, data is provided to the tree through a `DataSource`. When the tree receives

Similar to `mat-table`, you can provide data to the tree through a `DataSource`. When the tree receives

nit: passive voice

zarend · 2023-12-12T19:01:48Z

#27626 (comment)

@jelbourn what's the intention you have in mind with coerceObservable? It doesn't do anything that's not trivial, so I don't see the value with making it reusable. If we did want to put something in coercion, then it would make sense if it also worked wiht promises ((x: T | Promise<T> | Observable<T>) => Observable<T>). I don't think I quite see how moving it would help giving that rxjs already has library functions for coercion, and I don't think cdk/coercion is intended to be in scope of this pr.

I have a suggestion. Delete coerceObservable because we don't really need it. Instead, repurpose the _getChildrenAccessor method to do the type coercion.

/// **note to reader: rename `_getChildrenAccessor` to `_getChildren()`
  /** Children accessor, used for compatibility between the old Tree and new Tree */
  _getChildren() {
    const getChildren = this.treeControl?.getChildren ?? this.childrenAccessor;
    const children = getChildren();
    return isObservable(children) ? children : observableOf(children);
  }

zarend · 2023-12-14T22:19:34Z

#27626 (comment)

@jelbourn what's the intention you have in mind with coerceObservable? It doesn't do anything that's not trivial, so I don't see the value with making it reusable. If we did want to put something in coercion, then it would make sense if it also worked wiht promises ((x: T | Promise<T> | Observable<T>) => Observable<T>). I don't think I quite see how moving it would help giving that rxjs already has library functions for coercion, and I don't think cdk/coercion is intended to be in scope of this pr.

I have a suggestion. Delete coerceObservable because we don't really need it. Instead, repurpose the _getChildrenAccessor method to do the type coercion.
/// **note to reader: rename `_getChildrenAccessor` to `_getChildren()`
  /** Children accessor, used for compatibility between the old Tree and new Tree */
  _getChildren() {
    const getChildren = this.treeControl?.getChildren ?? this.childrenAccessor;
    const children = getChildren();
    return isObservable(children) ? children : observableOf(children);
  }

I have a better idea, which is to create an adapter for interface TreeKeyManagerItem.

  getChildren<T extends TreeKeyManagerItem>(item: T): Observable<TreeKeyManagerItem[]> {
    const children = item.getChildren();
    return isObservable(children) ? children : observableOf(children);
  },
  isDisabled<T extends TreeKeyManagerItem>(item: T): boolean {
    return typeof item.isDisabled === 'boolean' ? item.isDisabled : !!item.isDisabled?.();
  },
  isExpanded<T extends TreeKeyManagerItem>(item: T): boolean {
    return typeof item.isExpanded === 'boolean' ? item.isExpanded : !!item.isExpanded?.();
  },

* fix(cdk/tree): fix errors from testing * fix(cdk/tree): tests * fix(cdk/tree): update api docs * fix(cdk/a11y): allows disabled items to receive initial focus * fix(cdk/tree): don't focus on click, corrected updating aria-sets * fix(cdk/tree): update api goldens

Implement typeahead labels for Tree. Follow the established pattern that Menu and List use. - implement CdkTreeNode#cdkTreeNodeTypeaheadLabel - implement CdkTreeNode#getLabel

BobobUnicorn · 2024-05-21T20:48:57Z

re: coerceObservable, I think it's still better off as its own private function and does essentially fit with the rest of cdk/coercion as they're all simple helper functions anyway

BobobUnicorn · 2024-05-21T20:59:47Z

This PR will be continued in #29062; I've tried to address the remaining commentary here in that PR, though unfortunately we don't have continuity with the comment chains.

zarend added the dev-app preview When applied, previews of the dev-app are deployed to Firebase label Aug 11, 2023

angular-robot bot added the detected: feature PR contains a feature commit label Aug 11, 2023

zarend added Accessibility This issue is related to accessibility (a11y) target: major This PR is targeted for the next major release area: cdk/a11y area: cdk/tree area: material/tree and removed detected: feature PR contains a feature commit labels Aug 11, 2023

angular-robot bot added detected: feature PR contains a feature commit area: docs Related to the documentation labels Aug 15, 2023

zarend force-pushed the cdk-tree-revamp branch from e65f49a to 3665278 Compare August 29, 2023 22:22

angular-robot bot added the area: build & ci Related the build and CI infrastructure of the project label Aug 29, 2023

zarend force-pushed the cdk-tree-revamp branch 4 times, most recently from d451c18 to aedb0b4 Compare September 22, 2023 23:07

angular-robot bot removed area: docs Related to the documentation area: build & ci Related the build and CI infrastructure of the project labels Sep 22, 2023

zarend force-pushed the cdk-tree-revamp branch 2 times, most recently from 38e48c7 to b608e1f Compare October 2, 2023 22:54

angular-robot bot added detected: breaking change PR contains a commit with a breaking change detected: deprecation PR contains a commit with a deprecation labels Oct 2, 2023

zarend force-pushed the cdk-tree-revamp branch from b608e1f to 3a8089d Compare October 2, 2023 23:04

zarend changed the title ~~feat(cdk/tree): Add levelAccessor and childrenAccessor to CDK tree API~~ feat(material/tree): revamp tree data model, accessibility and documentation Oct 2, 2023

zarend force-pushed the cdk-tree-revamp branch from 3a8089d to efd22b0 Compare October 2, 2023 23:14

zarend changed the title ~~feat(material/tree): revamp tree data model, accessibility and documentation~~ feat(material/tree): revamp Tree data model, a11y and documentation Oct 2, 2023

zarend force-pushed the cdk-tree-revamp branch 2 times, most recently from f567a4f to b9a847f Compare October 4, 2023 20:54

angular-robot bot added the area: build & ci Related the build and CI infrastructure of the project label Oct 6, 2023

zarend changed the base branch from 1.2.x to main November 8, 2023 22:03

devversion removed the request for review from a team November 9, 2023 10:36

mmalerba reviewed Nov 9, 2023

View reviewed changes

andrewseguin requested changes Nov 9, 2023

View reviewed changes

angular-robot bot removed area: docs Related to the documentation area: build & ci Related the build and CI infrastructure of the project labels Nov 10, 2023

docs(material/tree): change examples to OnPush

c4aa307

Use OnPush change detection in Tree examples.

angular-robot bot added the area: docs Related to the documentation label Nov 10, 2023

zarend mentioned this pull request Nov 14, 2023

refactor(cdk/tree): simplify code in lifecycle hooks #28124

Merged

zarend and others added 6 commits November 14, 2023 16:01

Merge branch 'main' of github.com:angular/components into cdk-tree-re…

5356d69

…vamp

refactor(cdk/a11y): factor out a typeahead class for key managers (#2…

4bc94e0

…8142) factor out a typeahead class for key managers

refactor(material/tree): add unit tests for opt-out (#28237)

ee50445

Add unit tests to cover the use of LegacyTreeKeyManager, which opts out of updated focus management behavior.

zarend requested review from jelbourn, andrewseguin and mmalerba December 6, 2023 17:46

jelbourn reviewed Dec 12, 2023

View reviewed changes

zarend mentioned this pull request Jan 11, 2024

Mat-tree :Tree with nested nodes adding child doesnt update the view. #11381

Open

josephperrott removed their request for review April 30, 2024 18:26

BobobUnicorn and others added 2 commits May 15, 2024 16:02

fix(cdk/tree): implement typeahead label

5d001ec

Implement typeahead labels for Tree. Follow the established pattern that Menu and List use. - implement CdkTreeNode#cdkTreeNodeTypeaheadLabel - implement CdkTreeNode#getLabel

		`TreeKeyManager` manages the active option in a tree view. This is intended to be used with
		components that correspond to a `role="tree"` pattern.


		#### Basic usage

		Any component that uses a `TreeKeyManager` will generally do three things:


		#### Connecting the tree to a data source

		Similar to `mat-table`, data is provided to the tree through a `DataSource`. When the tree receives

	Similar to `mat-table`, data is provided to the tree through a `DataSource`. When the tree receives
	Similar to `mat-table`, you can provide data to the tree through a `DataSource`. When the tree receives

fix(material/tree): add levelAccessor, childrenAccessor, TreeKeyManag… …er; a11y and docs improvements #27626

Are you sure you want to change the base?

fix(material/tree): add levelAccessor, childrenAccessor, TreeKeyManag… …er; a11y and docs improvements #27626

Conversation

zarend commented Aug 11, 2023 • edited

github-actions bot commented Aug 11, 2023 • edited

zarend commented Nov 8, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zarend commented Dec 6, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zarend commented Dec 12, 2023

zarend commented Dec 14, 2023

BobobUnicorn commented May 21, 2024

BobobUnicorn commented May 21, 2024

zarend commented Aug 11, 2023 •

edited

github-actions bot commented Aug 11, 2023 •

edited