refactor(popover): simplify toggle listener attachment and enhance keyboard interaction tests

Author: deleonio

packages/components/src/components/popover-button/component.tsx

@@ -244,9 +244,8 @@ export class KolPopoverButton implements PopoverButtonProps {
 	public componentDidRender() {
 		// The popoverElement is already set via popoverRef callback from PopoverFC.
 		// Register the toggle listener once the popover element is available.
-		if (this.popoverElement && !this.popoverElement.hasAttribute('data-toggle-listener-attached')) {
+		if (this.popoverElement) {
 			this.popoverElement.addEventListener('toggle', this.handleToggle);
-			this.popoverElement.setAttribute('data-toggle-listener-attached', 'true');
 		}
 	}
 

packages/components/src/components/popover-button/popover-button.e2e.ts

@@ -65,4 +65,76 @@ test.describe('kol-popover-button', () => {
 
 		await expect(wrapper).toHaveClass(/kol-popover-button--inline/);
 	});
+
+	test.describe('Keyboard interaction', () => {
+		test('should toggle popover with Enter key', async ({ page }) => {
+			await page.setContent(`
+				<kol-popover-button _label="Toggle popover">
+					Popover content
+				</kol-popover-button>
+			`);
+
+			const button = page.locator('.kol-popover-button button');
+			const popover = page.locator('.kol-popover');
+
+			// Initially hidden
+			await expect(popover).not.toBeVisible();
+
+			// Focus and press Enter
+			await button.focus();
+			await page.keyboard.press('Enter');
+
+			// Should be visible after Enter
+			await expect(popover).toBeVisible();
+
+			// Press Enter again to close
+			await page.keyboard.press('Enter');
+			await expect(popover).not.toBeVisible();
+		});
+
+		test('should toggle popover with Space key', async ({ page }) => {
+			await page.setContent(`
+				<kol-popover-button _label="Toggle popover">
+					Popover content
+				</kol-popover-button>
+			`);
+
+			const button = page.locator('.kol-popover-button button');
+			const popover = page.locator('.kol-popover');
+
+			// Initially hidden
+			await expect(popover).not.toBeVisible();
+
+			// Focus and press Space
+			await button.focus();
+			await page.keyboard.press(' ');
+
+			// Should be visible after Space
+			await expect(popover).toBeVisible();
+
+			// Press Space again to close
+			await page.keyboard.press(' ');
+			await expect(popover).not.toBeVisible();
+		});
+
+		test('should close popover with Escape key', async ({ page }) => {
+			await page.setContent(`
+				<kol-popover-button _label="Toggle popover">
+					Popover content
+				</kol-popover-button>
+			`);
+
+			const button = page.locator('.kol-popover-button button');
+			const popover = page.locator('.kol-popover');
+
+			// Open popover
+			await button.focus();
+			await page.keyboard.press('Enter');
+			await expect(popover).toBeVisible();
+
+			// Close with Escape
+			await page.keyboard.press('Escape');
+			await expect(popover).not.toBeVisible();
+		});
+	});
 });

packages/components/src/internal/functional-components/popover/popover.e2e.ts

@@ -42,5 +42,22 @@ test.describe('kol-popover', () => {
 			await page.keyboard.press('Escape');
 			await expect(popover).not.toBeVisible();
 		});
+
+		test('should emit toggle event when popover visibility changes', async ({ page }) => {
+			await page.setContent(`<kol-split-button _label="Toggle">Popover content</kol-split-button>`);
+			const splitButton = page.locator('kol-split-button');
+			const popover = splitButton.locator('.kol-popover');
+
+			const toggleEventPromise = popover.evaluate((element) => {
+				return new Promise((resolve) => {
+					element.addEventListener('toggle', resolve);
+				});
+			});
+
+			// Trigger toggle by clicking the secondary button
+			await splitButton.locator('.kol-split-button__secondary-button').click();
+
+			await expect(toggleEventPromise).resolves.toBeTruthy();
+		});
 	});
 });