@@ -27,7 +27,7 @@ Navigation through options can be made to wrap via the `withWrap` method
2727this .keyManager = new FocusKeyManager (... ).withWrap ();
2828```
2929
30- #### Types of key managers
30+ #### Types of list key managers
3131
3232There are two varieties of ` ListKeyManager ` , ` FocusKeyManager ` and ` ActiveDescendantKeyManager ` .
3333
@@ -55,6 +55,64 @@ interface Highlightable extends ListKeyManagerOption {
5555
5656Each 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