Skip to content

Commit 0af8d08

Browse files
ok7saiok7sai
committed
refactor(multiple): migrate Accordion and Tree to ClickEventManager
1 parent 0f5b0ee commit 0af8d08

File tree

13 files changed

+72
-73
lines changed

13 files changed

+72
-73
lines changed

‎goldens/aria/private/index.api.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export interface AccordionGroupInputs extends Omit<ListNavigationInputs<Accordio
1515
// @public
1616
export class AccordionGroupPattern {
1717
constructor(inputs: AccordionGroupInputs);
18+
click: SignalLike<ClickEventManager<PointerEvent>>;
1819
collapseAll(): void;
1920
expandAll(): void;
2021
readonly expansionBehavior: ListExpansion;
@@ -24,10 +25,9 @@ export class AccordionGroupPattern {
2425
keydown: SignalLike<KeyboardEventManager<KeyboardEvent>>;
2526
readonly navigationBehavior: ListNavigation<AccordionTriggerPattern>;
2627
nextKey: SignalLike<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
28+
onClick(event: PointerEvent): void;
2729
onFocus(event: FocusEvent): void;
2830
onKeydown(event: KeyboardEvent): void;
29-
onPointerdown(event: PointerEvent): void;
30-
pointerdown: SignalLike<PointerEventManager<PointerEvent>>;
3131
prevKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
3232
toggle(): void;
3333
}
@@ -248,8 +248,8 @@ export class ComboboxTreePattern<V> extends TreePattern<V> implements ComboboxTr
248248
items: SignalLike<TreeItemPattern<V>[]>;
249249
last: () => void;
250250
next: () => void;
251+
onClick(_: PointerEvent): void;
251252
onKeydown(_: KeyboardEvent): void;
252-
onPointerdown(_: PointerEvent): void;
253253
prev: () => void;
254254
role: () => "tree";
255255
select: (item?: TreeItemPattern<V>) => void;
@@ -878,6 +878,7 @@ export class TreePattern<V> implements TreeInputs<V> {
878878
readonly activeDescendant: SignalLike<string | undefined>;
879879
readonly activeItem: WritableSignalLike<TreeItemPattern<V> | undefined>;
880880
readonly children: SignalLike<TreeItemPattern<V>[]>;
881+
clickManager: SignalLike<ClickEventManager<PointerEvent>>;
881882
readonly collapseKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
882883
_collapseOrParent(opts?: SelectOptions): void;
883884
readonly currentType: SignalLike<'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'>;
@@ -902,11 +903,10 @@ export class TreePattern<V> implements TreeInputs<V> {
902903
readonly multi: SignalLike<boolean>;
903904
readonly nav: SignalLike<boolean>;
904905
readonly nextKey: SignalLike<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
906+
onClick(event: PointerEvent): void;
905907
onFocusIn(): void;
906908
onKeydown(event: KeyboardEvent): void;
907-
onPointerdown(event: PointerEvent): void;
908909
readonly orientation: SignalLike<'vertical' | 'horizontal'>;
909-
pointerdown: SignalLike<PointerEventManager<PointerEvent>>;
910910
readonly prevKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
911911
readonly selectionMode: SignalLike<'follow' | 'explicit'>;
912912
setDefaultState(): void;

‎src/aria/accordion/accordion-group.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ import {ACCORDION_GROUP} from './accordion-tokens';
6262
exportAs: 'ngAccordionGroup',
6363
host: {
6464
'(keydown)': '_pattern.onKeydown($event)',
65-
'(pointerdown)': '_pattern.onPointerdown($event)',
65+
'(click)': '_pattern.onClick($event)',
6666
'(focusin)': '_pattern.onFocus($event)',
6767
},
6868
providers: [{provide: ACCORDION_GROUP, useExisting: AccordionGroup}],

‎src/aria/accordion/accordion.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ describe('AccordionGroup', () => {
2121
};
2222

2323
const click = (target: HTMLElement) => {
24-
target.dispatchEvent(new PointerEvent('pointerdown', {bubbles: true}));
24+
target.dispatchEvent(new PointerEvent('click', {bubbles: true}));
2525
fixture.detectChanges();
2626
};
2727

‎src/aria/listbox/listbox.spec.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,6 @@ describe('Listbox', () => {
3636
(targets || optionElements)[index].dispatchEvent(
3737
new PointerEvent('click', {
3838
bubbles: true,
39-
detail: 1,
40-
pointerType: 'mouse',
41-
clientX: 1,
42-
clientY: 1,
4339
...eventInit,
4440
}),
4541
);

‎src/aria/private/accordion/accordion.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {KeyboardEventManager, PointerEventManager} from '../behaviors/event-manager';
9+
import {KeyboardEventManager, ClickEventManager} from '../behaviors/event-manager';
1010
import {ExpansionItem, ListExpansion, ListExpansionInputs} from '../behaviors/expansion/expansion';
1111
import {ListFocus, ListFocusInputs, ListFocusItem} from '../behaviors/list-focus/list-focus';
1212
import {
@@ -79,9 +79,9 @@ export class AccordionGroupPattern {
7979
.on('Enter', () => this.toggle());
8080
});
8181

82-
/** The pointerdown event manager for the accordion trigger. */
83-
pointerdown = computed(() => {
84-
return new PointerEventManager().on(e => {
82+
/** The click event manager for the accordion trigger. */
83+
click = computed(() => {
84+
return new ClickEventManager<PointerEvent>().on((e: PointerEvent) => {
8585
const item = this._findTriggerPattern(e.target as Element);
8686
if (!item) return;
8787

@@ -95,9 +95,9 @@ export class AccordionGroupPattern {
9595
this.keydown().handle(event);
9696
}
9797

98-
/** Handles pointerdown events on the trigger, delegating to the group if not disabled. */
99-
onPointerdown(event: PointerEvent): void {
100-
this.pointerdown().handle(event);
98+
/** Handles click events on the trigger, delegating to the group if not disabled. */
99+
onClick(event: PointerEvent): void {
100+
this.click().handle(event);
101101
}
102102

103103
/** Handles focus events on the trigger. This ensures the tabbing changes the active index. */

‎src/aria/private/behaviors/event-manager/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@
99
export {Modifier} from './event-manager';
1010
export {KeyboardEventManager} from './keyboard-event-manager';
1111
export {PointerEventManager} from './pointer-event-manager';
12+
export {ClickEventManager} from './click-event-manager';

‎src/aria/private/listbox/listbox.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
*/
88

99
import {OptionPattern} from './option';
10-
import {KeyboardEventManager, Modifier} from '../behaviors/event-manager';
11-
import {ClickEventManager} from '../behaviors/event-manager/click-event-manager';
10+
import {KeyboardEventManager, Modifier, ClickEventManager} from '../behaviors/event-manager';
1211
import {computed, signal, SignalLike} from '../behaviors/signal-like/signal-like';
1312
import {List, ListInputs} from '../behaviors/list/list';
1413

‎src/aria/private/tabs/tabs.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {KeyboardEventManager} from '../behaviors/event-manager';
10-
import {ClickEventManager} from '../behaviors/event-manager/click-event-manager';
9+
import {KeyboardEventManager, ClickEventManager} from '../behaviors/event-manager';
1110
import {ExpansionItem, ListExpansionInputs, ListExpansion} from '../behaviors/expansion/expansion';
1211
import {
1312
SignalLike,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ export class ComboboxTreePattern<V>
5353
/** Noop. The combobox handles keydown events. */
5454
override onKeydown(_: KeyboardEvent): void {}
5555

56-
/** Noop. The combobox handles pointerdown events. */
57-
override onPointerdown(_: PointerEvent): void {}
56+
/** Noop. The combobox handles click events. */
57+
override onClick(_: PointerEvent): void {}
5858

5959
/** Noop. The combobox controls the open state. */
6060
override setDefaultState(): void {}

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

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -952,7 +952,7 @@ describe('Tree Pattern', () => {
952952
const {tree, items} = createTree(treeExample, treeInputs);
953953
const item1 = getItemByValue(items(), 'Item 1');
954954

955-
tree.onPointerdown(createClickEvent(item1.element()!));
955+
tree.onClick(createClickEvent(item1.element()!));
956956
expect(tree.activeItem()).toBe(item1);
957957
expect(tree.inputs.value()).toEqual(['Item 1']);
958958
});
@@ -962,7 +962,7 @@ describe('Tree Pattern', () => {
962962
const {tree, items} = createTree(treeExample, treeInputs);
963963
const item1 = getItemByValue(items(), 'Item 1');
964964

965-
tree.onPointerdown(createClickEvent(item1.element()!));
965+
tree.onClick(createClickEvent(item1.element()!));
966966
expect(tree.inputs.value()).toEqual([]);
967967
});
968968
});
@@ -994,7 +994,7 @@ describe('Tree Pattern', () => {
994994
const {tree, items} = createTree(treeExample, treeInputs);
995995
const item1 = getItemByValue(items(), 'Item 1');
996996

997-
tree.onPointerdown(createClickEvent(item1.element()!));
997+
tree.onClick(createClickEvent(item1.element()!));
998998
expect(tree.activeItem()).toBe(item1);
999999
expect(tree.inputs.value()).toEqual(['Item 1']);
10001000
});
@@ -1003,11 +1003,11 @@ describe('Tree Pattern', () => {
10031003
const {tree, items} = createTree(treeExample, treeInputs);
10041004
const item1 = getItemByValue(items(), 'Item 1');
10051005

1006-
tree.onPointerdown(createClickEvent(item1.element()!));
1006+
tree.onClick(createClickEvent(item1.element()!));
10071007
expect(tree.activeItem()).toBe(item1);
10081008
expect(tree.inputs.value()).toEqual(['Item 1']);
10091009

1010-
tree.onPointerdown(createClickEvent(item1.element()!));
1010+
tree.onClick(createClickEvent(item1.element()!));
10111011
expect(tree.activeItem()).toBe(item1);
10121012
expect(tree.inputs.value()).toEqual(['Item 1']);
10131013
});
@@ -1017,7 +1017,7 @@ describe('Tree Pattern', () => {
10171017
const {tree, items} = createTree(treeExample, treeInputs);
10181018
const item1 = getItemByValue(items(), 'Item 1');
10191019

1020-
tree.onPointerdown(createClickEvent(item1.element()!));
1020+
tree.onClick(createClickEvent(item1.element()!));
10211021
expect(tree.inputs.value()).toEqual([]);
10221022
});
10231023
});
@@ -1050,13 +1050,13 @@ describe('Tree Pattern', () => {
10501050
const item0 = getItemByValue(items(), 'Item 0');
10511051
const item1 = getItemByValue(items(), 'Item 1');
10521052

1053-
tree.onPointerdown(createClickEvent(item0.element()!));
1053+
tree.onClick(createClickEvent(item0.element()!));
10541054
expect(tree.inputs.value()).toEqual(['Item 0']);
10551055

1056-
tree.onPointerdown(createClickEvent(item1.element()!));
1056+
tree.onClick(createClickEvent(item1.element()!));
10571057
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 1']);
10581058

1059-
tree.onPointerdown(createClickEvent(item0.element()!));
1059+
tree.onClick(createClickEvent(item0.element()!));
10601060
expect(tree.inputs.value()).toEqual(['Item 1']);
10611061
});
10621062

@@ -1067,7 +1067,7 @@ describe('Tree Pattern', () => {
10671067
item0.expanded.set(true);
10681068

10691069
tree.onKeydown(shift());
1070-
tree.onPointerdown(createClickEvent(item1.element()!, {shift: true}));
1070+
tree.onClick(createClickEvent(item1.element()!, {shift: true}));
10711071
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1']);
10721072
});
10731073
});
@@ -1100,9 +1100,9 @@ describe('Tree Pattern', () => {
11001100
const item0 = getItemByValue(items(), 'Item 0');
11011101
const item1 = getItemByValue(items(), 'Item 1');
11021102

1103-
tree.onPointerdown(createClickEvent(item0.element()!));
1103+
tree.onClick(createClickEvent(item0.element()!));
11041104
expect(tree.inputs.value()).toEqual(['Item 0']);
1105-
tree.onPointerdown(createClickEvent(item1.element()!));
1105+
tree.onClick(createClickEvent(item1.element()!));
11061106
expect(tree.inputs.value()).toEqual(['Item 1']);
11071107
});
11081108

@@ -1111,10 +1111,10 @@ describe('Tree Pattern', () => {
11111111
const item0 = getItemByValue(items(), 'Item 0');
11121112
const item1 = getItemByValue(items(), 'Item 1');
11131113

1114-
tree.onPointerdown(createClickEvent(item0.element()!)); // Select and expand Item 0
1115-
tree.onPointerdown(createClickEvent(item1.element()!, {control: true}));
1114+
tree.onClick(createClickEvent(item0.element()!)); // Select and expand Item 0
1115+
tree.onClick(createClickEvent(item1.element()!, {control: true}));
11161116
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 1']);
1117-
tree.onPointerdown(createClickEvent(item0.element()!, {control: true}));
1117+
tree.onClick(createClickEvent(item0.element()!, {control: true}));
11181118
expect(tree.inputs.value()).toEqual(['Item 1']);
11191119
});
11201120

@@ -1123,9 +1123,9 @@ describe('Tree Pattern', () => {
11231123
const item0 = getItemByValue(items(), 'Item 0');
11241124
const item2 = getItemByValue(items(), 'Item 2');
11251125

1126-
tree.onPointerdown(createClickEvent(item0.element()!)); // Select and expand Item 0
1126+
tree.onClick(createClickEvent(item0.element()!)); // Select and expand Item 0
11271127
tree.onKeydown(shift());
1128-
tree.onPointerdown(createClickEvent(item2.element()!, {shift: true}));
1128+
tree.onClick(createClickEvent(item2.element()!, {shift: true}));
11291129
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1', 'Item 2']);
11301130
});
11311131

@@ -1137,10 +1137,10 @@ describe('Tree Pattern', () => {
11371137
item0.expanded.set(true);
11381138

11391139
tree.onKeydown(shift());
1140-
tree.onPointerdown(createClickEvent(item1.element()!, {shift: true}));
1140+
tree.onClick(createClickEvent(item1.element()!, {shift: true}));
11411141
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1']);
11421142

1143-
tree.onPointerdown(createClickEvent(item0_0.element()!, {shift: true}));
1143+
tree.onClick(createClickEvent(item0_0.element()!, {shift: true}));
11441144
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0']);
11451145
});
11461146

@@ -1151,7 +1151,7 @@ describe('Tree Pattern', () => {
11511151
const {tree, items} = createTree(localTreeData, treeInputs);
11521152
const itemA = getItemByValue(items(), 'A');
11531153

1154-
tree.onPointerdown(createClickEvent(itemA.element()!));
1154+
tree.onClick(createClickEvent(itemA.element()!));
11551155
expect(tree.inputs.value()).toEqual([]);
11561156
expect(tree.activeItem()).toBe(itemA);
11571157
});
@@ -1162,7 +1162,7 @@ describe('Tree Pattern', () => {
11621162
];
11631163
const {tree, items} = createTree(localTreeData, treeInputs);
11641164
const itemA = getItemByValue(items(), 'A');
1165-
tree.onPointerdown(createClickEvent(itemA.element()!));
1165+
tree.onClick(createClickEvent(itemA.element()!));
11661166
expect(tree.inputs.value()).toEqual([]);
11671167
});
11681168
});
@@ -1332,9 +1332,9 @@ describe('Tree Pattern', () => {
13321332
const item0 = getItemByValue(items(), 'Item 0');
13331333

13341334
expect(item0.expanded()).toBe(false);
1335-
tree.onPointerdown(createClickEvent(item0.element()!));
1335+
tree.onClick(createClickEvent(item0.element()!));
13361336
expect(item0.expanded()).toBe(true);
1337-
tree.onPointerdown(createClickEvent(item0.element()!));
1337+
tree.onClick(createClickEvent(item0.element()!));
13381338
expect(item0.expanded()).toBe(false);
13391339
});
13401340

@@ -1343,7 +1343,7 @@ describe('Tree Pattern', () => {
13431343
const item1 = getItemByValue(items(), 'Item 1');
13441344

13451345
expect(item1.expanded()).toBe(false);
1346-
tree.onPointerdown(createClickEvent(item1.element()!));
1346+
tree.onClick(createClickEvent(item1.element()!));
13471347
expect(item1.expanded()).toBe(false);
13481348
});
13491349

@@ -1352,7 +1352,7 @@ describe('Tree Pattern', () => {
13521352
const item0 = getItemByValue(items(), 'Item 0');
13531353
itemPatternInputsMap.get(item0.id())!.disabled.set(true);
13541354

1355-
tree.onPointerdown(createClickEvent(item0.element()!));
1355+
tree.onClick(createClickEvent(item0.element()!));
13561356
expect(item0.expanded()).toBe(false);
13571357
});
13581358

@@ -1361,7 +1361,7 @@ describe('Tree Pattern', () => {
13611361
const {tree, items} = createTree(treeExample, treeInputs);
13621362
const item0 = getItemByValue(items(), 'Item 0');
13631363

1364-
tree.onPointerdown(createClickEvent(item0.element()!));
1364+
tree.onClick(createClickEvent(item0.element()!));
13651365
expect(item0.expanded()).toBe(false);
13661366
});
13671367

@@ -1566,7 +1566,7 @@ describe('Tree Pattern', () => {
15661566
it('should NOT set default state if pointer interacted', () => {
15671567
const {tree, items} = createTree(treeExample, treeInputs);
15681568
const item0 = getItemByValue(items(), 'Item 0');
1569-
tree.onPointerdown(createClickEvent(item0.element()!)); // Interaction
1569+
tree.onClick(createClickEvent(item0.element()!)); // Interaction
15701570

15711571
treeInputs.value.set(['Item 2']);
15721572
tree.setDefaultStateEffect();

0 commit comments

Comments
 (0)