From 098ae3e15c12195c18185fff6b5fffc8d23f394f Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 28 Mar 2025 23:24:56 +0100
Subject: [PATCH] Add highlight annotations to csf4.ts and update e2e tests for
 a11y panel visibility

---
 code/core/src/shared/preview/csf4.ts | 4 ++++
 code/e2e-tests/manager.spec.ts       | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/code/core/src/shared/preview/csf4.ts b/code/core/src/shared/preview/csf4.ts
index 9c834c80e1f..e017e3d335d 100644
--- a/code/core/src/shared/preview/csf4.ts
+++ b/code/core/src/shared/preview/csf4.ts
@@ -11,6 +11,7 @@ import type { NormalizedProjectAnnotations } from 'storybook/internal/types';
 
 import actionAnnotations from 'storybook/actions/preview';
 import backgroundsAnnotations from 'storybook/backgrounds/preview';
+import highlightAnnotations from 'storybook/highlight/preview';
 import measureAnnotations from 'storybook/measure/preview';
 import outlineAnnotations from 'storybook/outline/preview';
 import { composeConfigs, normalizeProjectAnnotations } from 'storybook/preview-api';
@@ -38,6 +39,9 @@ export function __definePreview<TRenderer extends Renderer>(
           (viewportAnnotations.default ?? viewportAnnotations)(),
           // @ts-expect-error CJS fallback
           (backgroundsAnnotations.default ?? backgroundsAnnotations)(),
+          // @ts-expect-error CJS fallback
+          (highlightAnnotations.default ?? highlightAnnotations)(),
+
           // @ts-expect-error CJS fallback
           (measureAnnotations.default ?? measureAnnotations)(),
           // @ts-expect-error CJS fallback
diff --git a/code/e2e-tests/manager.spec.ts b/code/e2e-tests/manager.spec.ts
index 75deac2736a..ee99c9056c5 100644
--- a/code/e2e-tests/manager.spec.ts
+++ b/code/e2e-tests/manager.spec.ts
@@ -237,7 +237,7 @@ test.describe('Manager UI', () => {
 
       // panel is closed
       await expect(mobileNavigationHeading).toHaveText('Example/Button/Secondary');
-      await expect(sbPage.page.locator('#tabbutton-addon-controls')).toBeHidden();
+      await expect(sbPage.page.locator('#list-item-storybook/a11y/panel')).toBeHidden();
 
       // open panel
       await sbPage.page.locator('[title="Open addon panel"]').click();
@@ -247,14 +247,14 @@ test.describe('Manager UI', () => {
       await addonsMenuButton.click();
 
       // panel is open
-      await expect(sbPage.page.locator('#list-item-addon-controls')).toBeVisible();
+      await expect(sbPage.page.locator('#list-item-storybook/a11y/panel')).toBeVisible();
 
       // close panel
       await sbPage.page.locator('[title="Close addon panel"]').click();
 
       // panel is closed
       await expect(mobileNavigationHeading).toHaveText('Example/Button/Secondary');
-      await expect(sbPage.page.locator('#tabbutton-addon-controls')).toBeHidden();
+      await expect(sbPage.page.locator('#list-item-storybook/a11y/panel')).toBeHidden();
     });
   });
 });