fix: restore focus to header when exiting tutorial

Author: NathanZlion

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 } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 
 import {
   HotspotContext as HotspotContextType,
@@ -195,6 +195,20 @@ 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/components/tutorial-list/index.tsx

@@ -28,6 +28,7 @@ interface TutorialListProps {
   onStartTutorial: HotspotContext['onStartTutorial'];
   i18nStrings: TutorialPanelProps['i18nStrings'];
   downloadUrl: TutorialPanelProps['downloadUrl'];
+  headerRef?: React.MutableRefObject<HTMLHeadingElement | null>;
 }
 
 export default function TutorialList({
@@ -36,6 +37,7 @@ export default function TutorialList({
   loading = false,
   onStartTutorial,
   downloadUrl,
+  headerRef,
 }: TutorialListProps) {
   checkSafeUrl('TutorialPanel', downloadUrl);
 
@@ -45,9 +47,11 @@ export default function TutorialList({
     <>
       <InternalSpaceBetween size="s">
         <InternalSpaceBetween size="m">
-          <InternalBox variant="h2" fontSize={isRefresh ? 'heading-m' : 'heading-l'} padding={{ bottom: 'n' }}>
-            {i18nStrings.tutorialListTitle}
-          </InternalBox>
+          <div ref={headerRef} tabIndex={-1}>
+            <InternalBox variant="h2" fontSize={isRefresh ? 'heading-m' : 'heading-l'} padding={{ bottom: 'n' }}>
+              {i18nStrings.tutorialListTitle}
+            </InternalBox>
+          </div>
           <InternalBox variant="p" color="text-body-secondary" padding="n">
             {i18nStrings.tutorialListDescription}
           </InternalBox>

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 } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 
 import { hotspotContext } from '../annotation-context/context';
@@ -28,6 +28,16 @@ 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 (
     <>
@@ -47,6 +57,7 @@ export default function TutorialPanel({
             loading={loading}
             onStartTutorial={context.onStartTutorial}
             downloadUrl={downloadUrl}
+            headerRef={headerRef}
           />
         )}
       </div>