fix(tree): enhance focus event handling with type-safe global counters

Author: deleonio

packages/components/src/components/tree/tree.e2e.ts

@@ -1,6 +1,13 @@
 import { expect } from '@playwright/test';
 import { test } from '@stencil/playwright';
 
+declare global {
+	interface Window {
+		__focusinEventCount: number;
+		__focusEventCount: number;
+	}
+}
+
 test.describe('kol-tree', () => {
 	test('focus() method sets focus on the first focusable tree item', async ({ page }) => {
 		await page.setContent(`
@@ -48,15 +55,15 @@ test.describe('kol-tree - Focus Performance', () => {
 
 		// Initialize focusin event counter on the tree host
 		await treeHost.evaluate(() => {
-			(window as any).__focusinEventCount = 0;
+			window.__focusinEventCount = 0;
 		});
 
 		// Add focusin event listener to count events
 		await treeHost.evaluate(() => {
-			const tree = document.querySelector('kol-tree');
-			if (tree) {
-				tree.addEventListener('focusin', () => {
-					(window as any).__focusinEventCount++;
+			const treeElement = document.querySelector('kol-tree');
+			if (treeElement) {
+				treeElement.addEventListener('focusin', () => {
+					window.__focusinEventCount++;
 				});
 			}
 		});
@@ -73,7 +80,7 @@ test.describe('kol-tree - Focus Performance', () => {
 		await expect(firstItemLink).toBeFocused();
 
 		// Check focusin event count - should be max 1 (guard clause prevents multiple triggers)
-		const focusinCount = await page.evaluate(() => (window as any).__focusinEventCount);
+		const focusinCount = await page.evaluate(() => window.__focusinEventCount);
 		expect(focusinCount).toBeLessThanOrEqual(1);
 	});
 
@@ -104,15 +111,15 @@ test.describe('kol-tree - Focus Performance', () => {
 
 		// Initialize focus event counter
 		await page.evaluate(() => {
-			(window as any).__focusEventCount = 0;
+			window.__focusEventCount = 0;
 		});
 
 		// Add focus event listener on the tree host
 		await tree.evaluate(() => {
 			const treeElement = document.querySelector('kol-tree');
 			if (treeElement) {
 				treeElement.addEventListener('focusin', () => {
-					(window as any).__focusEventCount++;
+					window.__focusEventCount++;
 				});
 			}
 		});
@@ -123,7 +130,7 @@ test.describe('kol-tree - Focus Performance', () => {
 
 		// Reset counter after focus is set
 		await page.evaluate(() => {
-			(window as any).__focusEventCount = 0;
+			window.__focusEventCount = 0;
 		});
 
 		// Expand Item 2
@@ -135,7 +142,7 @@ test.describe('kol-tree - Focus Performance', () => {
 		await page.waitForTimeout(100);
 
 		// Check focus event count - should be <= 1 (at most 1 from expand, not multiple)
-		const focusCount = await page.evaluate(() => (window as any).__focusEventCount);
+		const focusCount = await page.evaluate(() => window.__focusEventCount);
 		expect(focusCount).toBeLessThanOrEqual(1);
 
 		// Verify Item 2 is still focused
@@ -218,15 +225,15 @@ test.describe('kol-tree - Focus Performance', () => {
 
 		// Initialize event counter before any navigation
 		await page.evaluate(() => {
-			(window as any).__focusinEventCount = 0;
+			window.__focusinEventCount = 0;
 		});
 
 		// Add focusin event listener during navigation phase
 		await tree.evaluate(() => {
 			const treeElement = document.querySelector('kol-tree');
 			if (treeElement) {
 				treeElement.addEventListener('focusin', () => {
-					(window as any).__focusinEventCount++;
+					window.__focusinEventCount++;
 				});
 			}
 		});
@@ -245,7 +252,7 @@ test.describe('kol-tree - Focus Performance', () => {
 
 		// Check focusin event count - should match number of focus changes (3 items focused)
 		// Each focus generates 1 focusin event; what matters is that there's no redundancy
-		const focusinCount = await page.evaluate(() => (window as any).__focusinEventCount);
+		const focusinCount = await page.evaluate(() => window.__focusinEventCount);
 		expect(focusinCount).toBeLessThanOrEqual(3);
 
 		// Verify final focus is on Item 4