-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(material/tree): add levelAccessor, childrenAccessor, TreeKeyManager; a11y and docs improvements #29062
Open
BobobUnicorn
wants to merge
1
commit into
angular:main
Choose a base branch
from
BobobUnicorn:cdk-tree-revamp
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+9,196
−765
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
684b98a
to
7c03581
Compare
Deployed dev-app for ffc4e2b to: https://ng-dev-previews-comp--pr-angular-components-29062-dev-00p2k47n.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
andrewseguin
approved these changes
May 28, 2024
src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.html
Outdated
Show resolved
Hide resolved
9b501c9
to
f407a87
Compare
Any news on this? |
8797eb1
to
ac89503
Compare
…er; a11y and docs improvements 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](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/). 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 API ADDITION: add CdkTreeNode#cdkTreeNodeTypeaheadLabel and CdkTreeNode#getLabel * Add CdkTree#cdkTreeNodeTypeaheadLabel. This is an Input that specifies the label used for typeahead * Add CdkTree#getLabel. Gets the typeahead label for this node. 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](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/). * 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
328223a
to
ffc4e2b
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
detected: deprecation
PR contains a commit with a deprecation
dev-app preview
When applied, previews of the dev-app are deployed to Firebase
target: minor
This PR is targeted for the next minor release
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
Documentation:
API ADDITION: add CdkTree#childrenAccessor and CdkTree#levelAccessor
See “Deprecated” for updating apps using treeControl.
API ADDITION: control expanded state of tree nodes using isExpandable and isExpanded
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
API ADDITION: add injection token for tree-key-manager
BEHAVIOR CHANGE: MatTree and CdkTree components respond to keyboard navigation.
DEPRECATED: Tree controller deprecated. Use one of levelAccessor or childrenAccessor instead. To be removed in a future version.
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.
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.
BUG FIX: template context now updates correctly when using trackBy (#18639)