fix: use onExitTutorial instead of UseEffect

Author: NathanZlion

src/tutorial-panel/__integ__/tutorial-panel-focus.test.ts

@@ -0,0 +1,65 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+
+class TutorialPanelFocusPage extends BasePageObject {
+  getTutorialPanel() {
+    return createWrapper().findAppLayout().findTools().findTutorialPanel();
+  }
+
+  async startFirstTutorial() {
+    const tutorialPanel = this.getTutorialPanel();
+    await this.click(tutorialPanel.findTutorials().get(1).findStartButton().toSelector());
+  }
+
+  async exitTutorial() {
+    const tutorialPanel = this.getTutorialPanel();
+    await this.click(tutorialPanel.findDismissButton().toSelector());
+  }
+
+  getTutorialListHeader() {
+    const tutorialPanel = this.getTutorialPanel();
+    return tutorialPanel.find('[tabindex="-1"]').toSelector();
+  }
+
+  isTutorialListHeaderFocused() {
+    const headerSelector = this.getTutorialListHeader();
+    return this.isFocused(headerSelector);
+  }
+
+  async waitForTutorialListToLoad() {
+    const tutorialPanel = this.getTutorialPanel();
+    await this.waitForVisible(tutorialPanel.findTutorials().get(1).toSelector());
+  }
+
+  async waitForTutorialDetailToLoad() {
+    const tutorialPanel = this.getTutorialPanel();
+    await this.waitForVisible(tutorialPanel.findDismissButton().toSelector());
+  }
+}
+
+const setupTest = (testFn: (page: TutorialPanelFocusPage) => Promise<void>) =>
+  useBrowser(async browser => {
+    const page = new TutorialPanelFocusPage(browser);
+    await browser.url('#/light/onboarding/with-app-layout');
+    await page.waitForTutorialListToLoad();
+    await testFn(page);
+  });
+
+describe('TutorialPanel Focus Management', () => {
+  test(
+    'restores focus to panel header when exiting tutorial',
+    setupTest(async page => {
+      await page.startFirstTutorial();
+      await page.waitForTutorialDetailToLoad();
+
+      await page.exitTutorial();
+      await page.waitForTutorialListToLoad();
+
+      await expect(page.isTutorialListHeaderFocused()).resolves.toBe(true);
+    })
+  );
+});

src/tutorial-panel/__tests__/tutorial-panel.test.tsx

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import {
   HotspotContext as HotspotContextType,
@@ -195,20 +195,6 @@ describe('tutorial detail view', () => {
     expect(completedScreen).toHaveTextContent('COMPLETION_SCREEN_TITLE');
     expect(completedScreen).toHaveTextContent('COMPLETED_SCREEN_DESCRIPTION_TEST');
   });
-
-  test('restores focus to panel header when exiting tutorial', async () => {
-    const { container, rerender } = renderTutorialPanelWithContext({}, { currentTutorial: getTutorials()[0] });
-
-    rerender(
-      <HotspotContext.Provider value={getContext({ currentTutorial: null })}>
-        <TutorialPanel i18nStrings={i18nStrings} downloadUrl="DOWNLOAD_URL" tutorials={getTutorials()} />
-      </HotspotContext.Provider>
-    );
-
-    await waitFor(() => {
-      expect(container.querySelector('[tabindex="-1"]')).toHaveFocus();
-    });
-  });
 });
 
 describe('URL sanitization', () => {

src/tutorial-panel/index.tsx

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 'use client';
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 import clsx from 'clsx';
 
 import { hotspotContext } from '../annotation-context/context';
@@ -29,15 +29,6 @@ export default function TutorialPanel({
   const baseProps = getBaseProps(restProps);
   const context = useContext(hotspotContext);
   const headerRef = useRef<HTMLHeadingElement>(null);
-  const previousTutorialRef = useRef(context.currentTutorial);
-
-  // Restore focus to the tutorial panel header when exiting a tutorial
-  useEffect(() => {
-    if (!context.currentTutorial && previousTutorialRef.current) {
-      headerRef.current?.focus({ preventScroll: true });
-    }
-    previousTutorialRef.current = context.currentTutorial;
-  }, [context.currentTutorial]);
 
   return (
     <>
@@ -46,7 +37,10 @@ export default function TutorialPanel({
           <TutorialDetailView
             i18nStrings={i18nStrings}
             tutorial={context.currentTutorial}
-            onExitTutorial={context.onExitTutorial}
+            onExitTutorial={e => {
+              context.onExitTutorial(e);
+              requestAnimationFrame(() => headerRef.current?.focus({ preventScroll: true }));
+            }}
             currentStepIndex={context.currentStepIndex}
             onFeedbackClick={onFeedbackClick}
           />