Skip to content

Commit 8bf1daa

Browse files
wagnermacielwagnermaciel
committed
refactor(aria/tree): switch list for tree behavior
1 parent 92d4b5a commit 8bf1daa

File tree

5 files changed

+103
-101
lines changed

5 files changed

+103
-101
lines changed

‎src/aria/private/tree/BUILD.bazel‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ ts_project(
1212
"//:node_modules/@angular/core",
1313
"//src/aria/private/behaviors/event-manager",
1414
"//src/aria/private/behaviors/expansion",
15-
"//src/aria/private/behaviors/list",
1615
"//src/aria/private/behaviors/signal-like",
16+
"//src/aria/private/behaviors/tree",
1717
"//src/aria/private/combobox",
1818
],
1919
)

‎src/aria/private/tree/combobox-tree.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ export class ComboboxTreePattern<V>
2020
implements ComboboxTreeControls<TreeItemPattern<V>, V>
2121
{
2222
/** Whether the currently focused item is collapsible. */
23-
isItemCollapsible = () => this.inputs.activeItem()?.parent() instanceof TreeItemPattern;
23+
isItemCollapsible = () => this.inputs.activeItem()?.parent instanceof TreeItemPattern;
2424

2525
/** The ARIA role for the tree. */
2626
role = () => 'tree' as const;
2727

2828
/* The id of the active (focused) item in the tree. */
29-
activeId = computed(() => this.listBehavior.activeDescendant());
29+
activeId = computed(() => this.treeBehavior.activeDescendant());
3030

3131
/** Returns the currently active (focused) item in the tree. */
3232
getActiveItem = () => this.inputs.activeItem();
@@ -57,32 +57,32 @@ export class ComboboxTreePattern<V>
5757
override setDefaultState(): void {}
5858

5959
/** Navigates to the specified item in the tree. */
60-
focus = (item: TreeItemPattern<V>) => this.listBehavior.goto(item);
60+
focus = (item: TreeItemPattern<V>) => this.treeBehavior.goto(item);
6161

6262
/** Navigates to the next focusable item in the tree. */
63-
next = () => this.listBehavior.next();
63+
next = () => this.treeBehavior.next();
6464

6565
/** Navigates to the previous focusable item in the tree. */
66-
prev = () => this.listBehavior.prev();
66+
prev = () => this.treeBehavior.prev();
6767

6868
/** Navigates to the last focusable item in the tree. */
69-
last = () => this.listBehavior.last();
69+
last = () => this.treeBehavior.last();
7070

7171
/** Navigates to the first focusable item in the tree. */
72-
first = () => this.listBehavior.first();
72+
first = () => this.treeBehavior.first();
7373

7474
/** Unfocuses the currently focused item in the tree. */
75-
unfocus = () => this.listBehavior.unfocus();
75+
unfocus = () => this.treeBehavior.unfocus();
7676

7777
// TODO: handle non-selectable parent nodes.
7878
/** Selects the specified item in the tree or the current active item if not provided. */
79-
select = (item?: TreeItemPattern<V>) => this.listBehavior.select(item);
79+
select = (item?: TreeItemPattern<V>) => this.treeBehavior.select(item);
8080

8181
/** Toggles the selection state of the given item in the tree or the current active item if not provided. */
82-
toggle = (item?: TreeItemPattern<V>) => this.listBehavior.toggle(item);
82+
toggle = (item?: TreeItemPattern<V>) => this.treeBehavior.toggle(item);
8383

8484
/** Clears the selection in the tree. */
85-
clearSelection = () => this.listBehavior.deselectAll();
85+
clearSelection = () => this.treeBehavior.deselectAll();
8686

8787
/** Retrieves the TreeItemPattern associated with a pointer event. */
8888
getItem = (e: PointerEvent) => this._getItem(e);

‎src/aria/private/tree/tree.spec.ts‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -288,15 +288,15 @@ describe('Tree Pattern', () => {
288288
it('should correctly compute tab index state', () => {
289289
const {tree, allItems} = createTree(treeExample, treeInputs);
290290
const item0 = getItemByValue(allItems(), 'Item 0');
291-
expect(item0.tabIndex()).toBe(tree.listBehavior.getItemTabindex(item0));
291+
expect(item0.tabIndex()).toBe(tree.treeBehavior.getItemTabindex(item0));
292292
});
293293

294294
it('should navigate next on ArrowDown (vertical)', () => {
295295
treeInputs.orientation.set('vertical');
296296
const {tree, allItems} = createTree(treeExample, treeInputs);
297297
const item0 = getItemByValue(allItems(), 'Item 0');
298298
const item1 = getItemByValue(allItems(), 'Item 1');
299-
tree.listBehavior.goto(item0);
299+
tree.treeBehavior.goto(item0);
300300

301301
expect(tree.activeItem()).toBe(item0);
302302
tree.onKeydown(down());
@@ -308,7 +308,7 @@ describe('Tree Pattern', () => {
308308
const {tree, allItems} = createTree(treeExample, treeInputs);
309309
const item0 = getItemByValue(allItems(), 'Item 0');
310310
const item1 = getItemByValue(allItems(), 'Item 1');
311-
tree.listBehavior.goto(item1);
311+
tree.treeBehavior.goto(item1);
312312

313313
expect(tree.activeItem()).toBe(item1);
314314
tree.onKeydown(up());
@@ -320,7 +320,7 @@ describe('Tree Pattern', () => {
320320
const {tree, allItems} = createTree(treeExample, treeInputs);
321321
const item0 = getItemByValue(allItems(), 'Item 0');
322322
const item1 = getItemByValue(allItems(), 'Item 1');
323-
tree.listBehavior.goto(item0);
323+
tree.treeBehavior.goto(item0);
324324

325325
expect(tree.activeItem()).toBe(item0);
326326
tree.onKeydown(right());
@@ -332,7 +332,7 @@ describe('Tree Pattern', () => {
332332
const {tree, allItems} = createTree(treeExample, treeInputs);
333333
const item0 = getItemByValue(allItems(), 'Item 0');
334334
const item1 = getItemByValue(allItems(), 'Item 1');
335-
tree.listBehavior.goto(item1);
335+
tree.treeBehavior.goto(item1);
336336

337337
expect(tree.activeItem()).toBe(item1);
338338
tree.onKeydown(left());
@@ -358,7 +358,7 @@ describe('Tree Pattern', () => {
358358
const {tree, allItems} = createTree(treeExample, treeInputs);
359359
const item0 = getItemByValue(allItems(), 'Item 0');
360360
const item1 = getItemByValue(allItems(), 'Item 1');
361-
tree.listBehavior.goto(item1);
361+
tree.treeBehavior.goto(item1);
362362

363363
expect(tree.activeItem()).toBe(item1);
364364
tree.onKeydown(right());
@@ -369,7 +369,7 @@ describe('Tree Pattern', () => {
369369
const {tree, allItems} = createTree(treeExample, treeInputs);
370370
const item0 = getItemByValue(allItems(), 'Item 0');
371371
const item2 = getItemByValue(allItems(), 'Item 2');
372-
tree.listBehavior.goto(item2);
372+
tree.treeBehavior.goto(item2);
373373

374374
expect(tree.activeItem()).toBe(item2);
375375
tree.onKeydown(home());
@@ -380,7 +380,7 @@ describe('Tree Pattern', () => {
380380
const {tree, allItems} = createTree(treeExample, treeInputs);
381381
const item0 = getItemByValue(allItems(), 'Item 0');
382382
const item2 = getItemByValue(allItems(), 'Item 2');
383-
tree.listBehavior.goto(item0);
383+
tree.treeBehavior.goto(item0);
384384

385385
expect(tree.activeItem()).toBe(item0);
386386
tree.onKeydown(end());
@@ -397,7 +397,7 @@ describe('Tree Pattern', () => {
397397
const {tree, allItems} = createTree(localTreeExample, treeInputs);
398398
const itemA = getItemByValue(allItems(), 'Item A');
399399
const itemC = getItemByValue(allItems(), 'Item C');
400-
tree.listBehavior.goto(itemA);
400+
tree.treeBehavior.goto(itemA);
401401

402402
expect(tree.activeItem()).toBe(itemA);
403403
tree.onKeydown(down());
@@ -414,7 +414,7 @@ describe('Tree Pattern', () => {
414414
const {tree, allItems} = createTree(localTreeExample, treeInputs);
415415
const itemA = getItemByValue(allItems(), 'Item A');
416416
const itemB = getItemByValue(allItems(), 'Item B');
417-
tree.listBehavior.goto(itemA);
417+
tree.treeBehavior.goto(itemA);
418418

419419
expect(tree.activeItem()).toBe(itemA);
420420
tree.onKeydown(down());
@@ -425,7 +425,7 @@ describe('Tree Pattern', () => {
425425
treeInputs.disabled.set(true);
426426
const {tree, allItems} = createTree(treeExample, treeInputs);
427427
const item0 = getItemByValue(allItems(), 'Item 0');
428-
tree.listBehavior.goto(item0);
428+
tree.treeBehavior.goto(item0);
429429

430430
expect(tree.activeItem()).toBe(item0);
431431
tree.onKeydown(down());
@@ -675,7 +675,7 @@ describe('Tree Pattern', () => {
675675
const item0 = getItemByValue(allItems(), 'Item 0');
676676
const item1 = getItemByValue(allItems(), 'Item 1');
677677
item0.expanded.set(true);
678-
tree.listBehavior.goto(item1);
678+
tree.treeBehavior.goto(item1);
679679

680680
tree.onKeydown(shift());
681681
tree.onKeydown(home({control: true, shift: true}));
@@ -687,7 +687,7 @@ describe('Tree Pattern', () => {
687687
const item0 = getItemByValue(allItems(), 'Item 0');
688688
const item0_0 = getItemByValue(allItems(), 'Item 0-0');
689689
item0.expanded.set(true);
690-
tree.listBehavior.goto(item0_0);
690+
tree.treeBehavior.goto(item0_0);
691691

692692
tree.onKeydown(shift());
693693
tree.onKeydown(end({control: true, shift: true}));
@@ -715,7 +715,7 @@ describe('Tree Pattern', () => {
715715
const {tree, allItems} = createTree(localTreeData, treeInputs);
716716
const itemA = getItemByValue(allItems(), 'A');
717717

718-
tree.listBehavior.goto(itemA);
718+
tree.treeBehavior.goto(itemA);
719719
tree.onKeydown(shift());
720720
tree.onKeydown(down({shift: true}));
721721
tree.onKeydown(down({shift: true}));
@@ -731,7 +731,7 @@ describe('Tree Pattern', () => {
731731
const {tree, allItems} = createTree(localTreeData, treeInputs);
732732
const itemA = getItemByValue(allItems(), 'A');
733733

734-
tree.listBehavior.goto(itemA);
734+
tree.treeBehavior.goto(itemA);
735735
tree.onKeydown(shift());
736736
tree.onKeydown(down({shift: true}));
737737
tree.onKeydown(down({shift: true}));
@@ -832,7 +832,7 @@ describe('Tree Pattern', () => {
832832
it('should not allow wrapping while Shift is held down', () => {
833833
const {tree, allItems} = createTree(treeExample, treeInputs);
834834
const item0 = getItemByValue(allItems(), 'Item 0');
835-
tree.listBehavior.goto(item0);
835+
tree.treeBehavior.goto(item0);
836836

837837
tree.onKeydown(shift());
838838
tree.onKeydown(up({shift: true}));
@@ -844,7 +844,7 @@ describe('Tree Pattern', () => {
844844
const {tree, allItems} = createTree(treeExample, treeInputs);
845845
const item0 = getItemByValue(allItems(), 'Item 0');
846846
item0.expanded.set(true);
847-
tree.listBehavior.goto(item0);
847+
tree.treeBehavior.goto(item0);
848848

849849
tree.onKeydown(down({control: true}));
850850
tree.onKeydown(down({control: true}));
@@ -858,7 +858,7 @@ describe('Tree Pattern', () => {
858858
const item0 = getItemByValue(allItems(), 'Item 0');
859859
const item1 = getItemByValue(allItems(), 'Item 1');
860860
item0.expanded.set(true);
861-
tree.listBehavior.goto(item1);
861+
tree.treeBehavior.goto(item1);
862862

863863
tree.onKeydown(shift());
864864
tree.onKeydown(home({control: true, shift: true}));
@@ -870,7 +870,7 @@ describe('Tree Pattern', () => {
870870
const item0 = getItemByValue(allItems(), 'Item 0');
871871
const item0_0 = getItemByValue(allItems(), 'Item 0-0');
872872
item0.expanded.set(true);
873-
tree.listBehavior.goto(item0_0);
873+
tree.treeBehavior.goto(item0_0);
874874

875875
tree.onKeydown(shift());
876876
tree.onKeydown(end({control: true, shift: true}));
@@ -894,7 +894,7 @@ describe('Tree Pattern', () => {
894894
treeInputs.softDisabled.set(false);
895895
const {tree, allItems} = createTree(localTreeData, treeInputs);
896896
treeInputs.values.set(['A']);
897-
tree.listBehavior.goto(getItemByValue(allItems(), 'A'));
897+
tree.treeBehavior.goto(getItemByValue(allItems(), 'A'));
898898

899899
tree.onKeydown(down());
900900
expect(tree.inputs.values()).toEqual(['C']);
@@ -908,7 +908,7 @@ describe('Tree Pattern', () => {
908908
];
909909
const {tree, allItems} = createTree(localTreeData, treeInputs);
910910
treeInputs.values.set(['A']);
911-
tree.listBehavior.goto(getItemByValue(allItems(), 'A'));
911+
tree.treeBehavior.goto(getItemByValue(allItems(), 'A'));
912912

913913
tree.onKeydown(down());
914914
tree.onKeydown(down());
@@ -920,7 +920,7 @@ describe('Tree Pattern', () => {
920920
const item0 = getItemByValue(allItems(), 'Item 0');
921921
const item0_0 = getItemByValue(allItems(), 'Item 0-0');
922922
item0.expanded.set(true);
923-
tree.listBehavior.goto(item0_0);
923+
tree.treeBehavior.goto(item0_0);
924924

925925
tree.onKeydown(a({control: true}));
926926
expect(tree.inputs.values()).toEqual([
@@ -1268,7 +1268,7 @@ describe('Tree Pattern', () => {
12681268
treeInputs.orientation.set('vertical');
12691269
const {tree, allItems} = createTree(treeExample, treeInputs);
12701270
const item0 = getItemByValue(allItems(), 'Item 0');
1271-
tree.listBehavior.goto(item0);
1271+
tree.treeBehavior.goto(item0);
12721272

12731273
expect(item0.expanded()).toBe(false);
12741274
tree.onKeydown(right());
@@ -1280,7 +1280,7 @@ describe('Tree Pattern', () => {
12801280
const {tree, allItems} = createTree(treeExample, treeInputs);
12811281
const item0 = getItemByValue(allItems(), 'Item 0');
12821282
const item0_0 = getItemByValue(allItems(), 'Item 0-0');
1283-
tree.listBehavior.goto(item0);
1283+
tree.treeBehavior.goto(item0);
12841284
item0.expanded.set(true);
12851285

12861286
tree.onKeydown(right());
@@ -1291,7 +1291,7 @@ describe('Tree Pattern', () => {
12911291
treeInputs.orientation.set('vertical');
12921292
const {tree, allItems} = createTree(treeExample, treeInputs);
12931293
const item1 = getItemByValue(allItems(), 'Item 1');
1294-
tree.listBehavior.goto(item1);
1294+
tree.treeBehavior.goto(item1);
12951295

12961296
tree.onKeydown(right());
12971297
expect(tree.activeItem()).toBe(item1);
@@ -1301,7 +1301,7 @@ describe('Tree Pattern', () => {
13011301
treeInputs.orientation.set('vertical');
13021302
const {tree, allItems} = createTree(treeExample, treeInputs);
13031303
const item0 = getItemByValue(allItems(), 'Item 0');
1304-
tree.listBehavior.goto(item0);
1304+
tree.treeBehavior.goto(item0);
13051305
item0.expanded.set(true);
13061306

13071307
expect(item0.expanded()).toBe(true);
@@ -1315,7 +1315,7 @@ describe('Tree Pattern', () => {
13151315
const item0 = getItemByValue(allItems(), 'Item 0');
13161316
const item0_0 = getItemByValue(allItems(), 'Item 0-0');
13171317
item0.expanded.set(true);
1318-
tree.listBehavior.goto(item0_0);
1318+
tree.treeBehavior.goto(item0_0);
13191319

13201320
tree.onKeydown(left());
13211321
expect(tree.activeItem()).toBe(item0);
@@ -1325,7 +1325,7 @@ describe('Tree Pattern', () => {
13251325
treeInputs.orientation.set('vertical');
13261326
const {tree, allItems} = createTree(treeExample, treeInputs);
13271327
const item0 = getItemByValue(allItems(), 'Item 0');
1328-
tree.listBehavior.goto(item0);
1328+
tree.treeBehavior.goto(item0);
13291329

13301330
tree.onKeydown(left());
13311331
expect(tree.activeItem()).toBe(item0);
@@ -1337,7 +1337,7 @@ describe('Tree Pattern', () => {
13371337
const item0 = getItemByValue(allItems(), 'Item 0');
13381338
const item1 = getItemByValue(allItems(), 'Item 1');
13391339
const item2 = getItemByValue(allItems(), 'Item 2');
1340-
tree.listBehavior.goto(item0);
1340+
tree.treeBehavior.goto(item0);
13411341

13421342
tree.onKeydown(asterisk({shift: true}));
13431343
expect(item0.expanded()).toBe(true);
@@ -1394,7 +1394,7 @@ describe('Tree Pattern', () => {
13941394
const {tree, allItems} = createTree(treeExample, treeInputs);
13951395
const item0 = getItemByValue(allItems(), 'Item 0');
13961396
const item0_0 = getItemByValue(allItems(), 'Item 0-0');
1397-
tree.listBehavior.goto(item0);
1397+
tree.treeBehavior.goto(item0);
13981398
item0.expanded.set(true);
13991399

14001400
tree.onKeydown(right());
@@ -1408,7 +1408,7 @@ describe('Tree Pattern', () => {
14081408
const item0 = getItemByValue(allItems(), 'Item 0');
14091409
const item0_0 = getItemByValue(allItems(), 'Item 0-0');
14101410
item0.expanded.set(true);
1411-
tree.listBehavior.goto(item0_0);
1411+
tree.treeBehavior.goto(item0_0);
14121412

14131413
tree.onKeydown(left());
14141414
expect(tree.activeItem()).toBe(item0);
@@ -1427,7 +1427,7 @@ describe('Tree Pattern', () => {
14271427
const {tree, allItems} = createTree(treeExample, treeInputs);
14281428
const item0 = getItemByValue(allItems(), 'Item 0');
14291429
const item0_0 = getItemByValue(allItems(), 'Item 0-0');
1430-
tree.listBehavior.goto(item0);
1430+
tree.treeBehavior.goto(item0);
14311431
item0.expanded.set(true);
14321432
tree.inputs.values.set(['Item 1']); // pre-select something else
14331433

@@ -1442,7 +1442,7 @@ describe('Tree Pattern', () => {
14421442
const item0 = getItemByValue(allItems(), 'Item 0');
14431443
const item0_0 = getItemByValue(allItems(), 'Item 0-0');
14441444
item0.expanded.set(true);
1445-
tree.listBehavior.goto(item0_0);
1445+
tree.treeBehavior.goto(item0_0);
14461446
tree.inputs.values.set(['Item 1']); // pre-select something else
14471447

14481448
tree.onKeydown(left({control: true}));

0 commit comments

Comments
 (0)