Skip to content

Commit 2098b41

Browse files
BobobUnicornzarend
authored andcommitted
feat(cdk/tree): Add levelAccessor and childrenAccessor to CDK tree API
This is currently unimplemented and will allow a more reactive API for the tree. feat(cdk/tree): wording changes feat(cdk/tree): wording changes feat(cdk/tree): make getLevel getAccessor private feat(cdk/tree): make nullable properties optional feat(cdk/tree): fix lint issues feat(cdk/tree): add TreeControl methods into the CdkTree itself feat(cdk/tree): add missing tree errors feat(cdk/tree): make nullable properties optional feat(cdk/tree): fix build errors. feat(cdk/tree): update tree API goldens feat(cdk/tree): fix lint errors feat(cdk/tree): fix tests feat(cdk/tree): fix final lint and golden errors feat(cdk/tree): fix comments and improve readability feat(cdk/tree): remove ! assertion feat(cdk/tree): implement the various expansion-related methods fix(cdk/tree): fix merge conflict errors fix(cdk/tree): remove TODOs and fix `isExpanded` fix(cdk/tree): fix nested nodes not rendering children fix(cdk/tree): remove childrenAccessor?. usage fix(cdk/tree): address comments from review feat(cdk/tree): add tests for the new cdk/tree APIs (#24500) * feat(cdk/tree): complete migrated tests * feat(cdk/tree): fix tests * fix(cdk/tree): add docs to _getAllDescendants * fix(cdk/tree): add explanatory comment for tree-redesign.spec.ts feat(cdk/tree): improve aria attributes (#24658) * feat(cdk/tree): add demos to the dev-app * feat(cdk/tree): add flat-node with levelAccessor example to the demo page * feat(cdk/tree): move new demos to cdk-tree-redesign dir * fix(cdk/tree): fix unused error * feat(cdk/tree): move demos back to their own dirs * fix(cdk/tree): address review comments * feat(cdk/tree): use _getDirectChildren method in nested node * feat(cdk/tree): add cache of nodes to the tree * fix(cdk/tree): fix cherry-pick errors * feat(cdk/tree): add translation layer for nested nodes using levelAccessor * feat(cdk/tree): add example with nested nodes & level accessor * feat(cdk/tree): fix examples * feat(cdk/tree): add example with flat nodes & childrenAccessor * feat(cdk/tree): flatten data that uses childrenAccessor * fix(cdk/tree): fix padding not showing for `childrenAccessor` trees * fix(cdk/tree): fix flat tree demo * fix(cdk/tree): convert generator function to return a regular array in demo * fix(cdk/tree): fix build error * feat(cdk/tree): update API goldens * fix(cdk/tree): fix some failing tests, one remaining * fix(cdk/tree): fix test errors and children conversion; also make `renderNodeChanges` private * fix(cdk/tree): update api goldens * fix(cdk/tree): fix lint errors * feat(cdk/tree): deprecate the TreeControl APIs * fix(cdk/tree): make the toggle button not focusable by keyboard * fix(cdk/tree): add aria attributes for the flat nodes * feat(cdk/tree): maintain a cache of parents and node groups * feat(cdk/tree): implement aria-posinset and aria-setsize * feat(cdk/tree): update goldens, add descriptions to methods * feat(cdk/tree): fix lint errors * fix(cdk/tree): fix build errors * fix(cdk/tree): change explicit breaking-change version to PLACEHOLDER * fix(cdk/tree): also update flat level accessor example * fix(cdk/tree): update API goldens * fix(cdk/tree): update API goldens * feat(cdk/tree): add a translation function to the tree to get children * fix(cdk/tree): lint feat(cdk/a11y): add a TreeKeyManager, with next/prev implemented (#24659) * feat(cdk/a11y): add API for TreeKeyManager * feat(cdk/a11y): add activeItem into the TreeKeyManager * feat(cdk/a11y): store the options into the key manager * feat(cdk/a11y): add _getItems translation layer * feat(cdk/a11y): add skeleton for keydown actions * feat(cdk/a11y): implement activate item * feat(cdk/a11y): implement various focus methods * feat(cdk/a11y): implement onClick, remove lint disables * feat(cdk/a11y): partial spec migration, fixed some bugs in impl * fix(cdk/tree): fix lint errors * fix(cdk/a11y): fix lint errors pt2 feat(cdk/tree): implement expansion methods for TreeKeyManager (#26586) * feat(cdk/a11y): implement expansion methods * feat(cdk/a11y): add tests and fixes for expand/collapse interactions * feat(cdk/a11y): actually fix build * feat(cdk/a11y): use skipPredicate instead of disabled feat(cdk/tree): implement typeahead for TreeKeyManager (#27202) * feat(cdk/a11y): implement typeahead (needs test) * feat(cdk/a11y): handle typeahead in keydown handler * feat(cdk/a11y): fix typeahead build errors * feat(cdk/a11y): add tests for typeahead * feat(cdk/a11y): add TreeKeyManager to public a11y API * fix(cdk/a11y): tree key manager build errors/weird merge * feat(cdk/a11y): fix api goldens * fix(cdk/a11y): fix tests feat(cdk/tree): integrate TreeKeyManager with cdk/tree (#27285) * feat(cdk/tree): add cache of nodes to the tree * feat(cdk/tree): bug fixes for tree and key manager * feat(cdk/tree): flatten data that uses childrenAccessor * feat(cdk/tree): add examples, fix bugs * fix(cdk/tree): fix build errors * fix(cdk/tree): restoring incorrectly removed code * fix(cdk/tree): fix minor typo * fix(cdk/tree): fix lint * feat(cdk/tree): add additional tests, fix bug with aria-posinset * fix(cdk/tree): update goldens, remove fdescribe * fix(cdk/tree): dev app compilation * fix(cdk/tree): fix tests * fix(material/tree): update tests & API * fix(material/tree): api goldens * feat(cdk/tree): add `isExpandable` parameter to NestedTreeControl, fix some tests * fix(cdk/tree): update api goldens * fix(material/tree): lint * fix(cdk/tree): update API goldens feat(cdk/tree): general bug fixes, error handling, updating examples & docs (#27305) * feat(cdk/a11y): add some missing focus functions to TreeKeyManager, fix tests * feat(cdk/tree): report an error when the API consumer tries to expand a non-expandable node. * fix(cdk/tree): set node role through component host * fix(material/tree): fix duplicate keydown events * fix(cdk/tree): make keyboard behaviour consistent across all configurations This also removes the need for specifying `nodeType` manually. * fix(cdk/tree): remove unnecessary change detection * fix(cdk/tree): update API goldens * refactor(cdk/tree): organize imports * fix(cdk/a11y): update API goldens * fix(cdk/tree): remove `_preFlattenedNodes` * fix(cdk/tree): lint * fix(cdk/tree): use `findIndex` instead of `indexOf`; fixes inconsistent aria-posinset * feat(cdk/tree): add complex redux-like demo * fix(cdk/tree): refactor rendering pipeline This also refactors the parent/level/group data processing in order to make it significantly more consistent in all tree configurations. * feat(cdk/tree): update tree documentation * feat(cdk/a11y): update docs for `TreeKeyManager`. * fix(cdk/tree): update API goldens, fix lint errors * fix(cdk/tree): empty commit; retry ci actions
1 parent f7e3ae3 commit 2098b41

Some content is hidden

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

44 files changed

+6013
-405
lines changed

src/cdk/a11y/a11y.md

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Navigation through options can be made to wrap via the `withWrap` method
2727
this.keyManager = new FocusKeyManager(...).withWrap();
2828
```
2929

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

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

@@ -55,6 +55,64 @@ interface Highlightable extends ListKeyManagerOption {
5555

5656
Each item must also have an ID bound to the listbox's or menu's `aria-activedescendant`.
5757

58+
### TreeKeyManager
59+
60+
`TreeKeyManager` manages the active option in a tree view. This is intended to be used with
61+
components that correspond to a `role="tree"` pattern.
62+
63+
#### Basic usage
64+
65+
Any component that uses a `TreeKeyManager` will generally do three things:
66+
* Create a `@ViewChildren` query for the tree items being managed.
67+
* Initialize the `TreeKeyManager`, passing in the options.
68+
* Forward keyboard events from the managed component to the `TreeKeyManager` via `onKeydown`.
69+
70+
Each tree item should implement the `TreeKeyManagerItem` interface:
71+
```ts
72+
interface TreeKeyManagerItem {
73+
/** Whether the item is disabled. */
74+
isDisabled?: (() => boolean) | boolean;
75+
76+
/** The user-facing label for this item. */
77+
getLabel?(): string;
78+
79+
/** Perform the main action (i.e. selection) for this item. */
80+
activate(): void;
81+
82+
/** Retrieves the parent for this item. This is `null` if there is no parent. */
83+
getParent(): TreeKeyManagerItem | null;
84+
85+
/** Retrieves the children for this item. */
86+
getChildren(): TreeKeyManagerItem[] | Observable<TreeKeyManagerItem[]>;
87+
88+
/** Determines if the item is currently expanded. */
89+
isExpanded: (() => boolean) | boolean;
90+
91+
/** Collapses the item, hiding its children. */
92+
collapse(): void;
93+
94+
/** Expands the item, showing its children. */
95+
expand(): void;
96+
97+
/**
98+
* Focuses the item. This should provide some indication to the user that this item is focused.
99+
*/
100+
focus(): void;
101+
}
102+
```
103+
104+
#### Focus management
105+
106+
The `TreeKeyManager` will handle focusing the appropriate item on keyboard interactions. However,
107+
the component should call `onInitialFocus` when the component is focused for the first time (i.e.
108+
when there is no active item).
109+
110+
`tabindex` should also be set by the component when the active item changes. This can be listened to
111+
via the `change` property on the `TreeKeyManager`. In particular, the tree should only have a
112+
`tabindex` set if there is no active item, and should not have a `tabindex` set if there is an
113+
active item. Only the HTML node corresponding to the active item should have a `tabindex` set to
114+
`0`, with all other items set to `-1`.
115+
58116

59117
### FocusTrap
60118

0 commit comments

Comments
 (0)