diff --git a/src/wizard/__integ__/wizard.test.ts b/src/wizard/__integ__/wizard.test.ts index f2c0ede4b0..ad8aaafabf 100644 --- a/src/wizard/__integ__/wizard.test.ts +++ b/src/wizard/__integ__/wizard.test.ts @@ -35,6 +35,8 @@ describe('Wizard keyboard navigation', () => { test( 'navigate to the first step from menu navigation link using the Enter key', setupTest(async page => { + // Initial render should not focus the header + await expect(page.getFocusedElementText()).resolves.not.toBe('Step 1'); await page.clickPrimaryButton(); await page.resetFocus(); await page.keys(['Tab', 'Enter']); diff --git a/src/wizard/wizard-form.tsx b/src/wizard/wizard-form.tsx index fdc37c18c9..d897159536 100644 --- a/src/wizard/wizard-form.tsx +++ b/src/wizard/wizard-form.tsx @@ -1,6 +1,6 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useEffect, useRef } from 'react'; +import React, { MutableRefObject, useEffect, useRef } from 'react'; import clsx from 'clsx'; import { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal'; @@ -14,6 +14,7 @@ import { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_STEP_NAME } from '../internal/analytic import { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component'; import { PACKAGE_VERSION } from '../internal/environment'; import { InternalBaseComponentProps } from '../internal/hooks/use-base-component'; +import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update'; import { WizardProps } from './interfaces'; import WizardActions from './wizard-actions'; import WizardFormHeader from './wizard-form-header'; @@ -42,6 +43,13 @@ export default function WizardFormWithAnalytics(props: WizardFormProps) { props.steps[props.activeStepIndex] as BasePropsWithAnalyticsMetadata ); const __internalRootRef = useComponentMetadata('WizardForm', PACKAGE_VERSION, { ...analyticsMetadata }); + const stepHeaderRef = useRef(null); + + useEffectOnUpdate(() => { + if (stepHeaderRef && stepHeaderRef.current) { + stepHeaderRef.current?.focus(); + } + }, [props.activeStepIndex]); return ( - + ); } export function WizardForm({ __internalRootRef, + stepHeaderRef, steps, activeStepIndex, showCollapsedSteps, @@ -69,20 +78,14 @@ export function WizardForm({ onPreviousClick, onPrimaryClick, onSkipToClick, -}: WizardFormProps) { +}: WizardFormProps & { stepHeaderRef: MutableRefObject }) { const { title, info, description, content, errorText, isOptional } = steps[activeStepIndex] || {}; const isLastStep = activeStepIndex >= steps.length - 1; const skipToTargetIndex = findSkipToTargetIndex(steps, activeStepIndex); - const stepHeaderRef = useRef(null); + const { funnelInteractionId, funnelIdentifier } = useFunnel(); const { funnelStepProps, stepErrorContext } = useFunnelStep(); - useEffect(() => { - if (stepHeaderRef && stepHeaderRef.current) { - stepHeaderRef.current?.focus(); - } - }, [activeStepIndex]); - const showSkipTo = allowSkipTo && skipToTargetIndex !== -1; const skipToButtonText = skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel