ENG-162487: accessibility fix for stepper component to move the focus to the selected section

src/components/Stepper/Stepper.tsx

@@ -3,6 +3,7 @@
 import React, {
   FC,
   Ref,
+  useCallback,
   useContext,
   useEffect,
   useLayoutEffect,
@@ -52,6 +53,8 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
       locale = enUS,
       onChange,
       readonly = true,
+      sectionRefs,
+      sectionIndexOffset = 0,
       required = false,
       scrollable,
       scrollDownAriaLabelText: defaultScrollDownAriaLabelText,
@@ -225,6 +228,45 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
       onChange?.(index, event);
     };
 
+    const scrollToSectionAndFocus = useCallback(
+      (visibleIndex: number) => {
+        if (!sectionRefs?.current) return;
+
+        const sectionIndex = visibleIndex + sectionIndexOffset;
+        const sectionElement = sectionRefs.current[sectionIndex] as HTMLElement;
+
+        if (!sectionElement) return;
+
+        sectionElement.scrollIntoView({ behavior: 'smooth' });
+
+        let scrollTimeout: ReturnType<typeof setTimeout>;
+
+        const handleScroll = () => {
+          clearTimeout(scrollTimeout);
+          scrollTimeout = setTimeout(() => {
+            const firstInput = sectionElement.querySelector(
+              'input, textarea, select, [tabindex="0"]'
+            ) as HTMLElement;
+            firstInput?.focus();
+            window.removeEventListener('scroll', handleScroll);
+          }, 100);
+        };
+
+        window.addEventListener('scroll', handleScroll);
+      },
+      [sectionRefs, sectionIndexOffset]
+    );
+
+    const handleStepContentKeyDown = (
+      event: React.KeyboardEvent<HTMLElement>,
+      index: number
+    ): void => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        scrollToSectionAndFocus(index);
+      }
+    };
+
     const handleScroll = (): void => {
       const steps: HTMLDivElement = stepsContainerRef.current;
       if (layout === 'horizontal') {
@@ -608,6 +650,11 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
                                   styles.contentInner,
                                   (styles as any)[`${combinedStepSize}`],
                                 ])}
+                                tabIndex={0}
+                                role="button"
+                                onKeyDown={(event) =>
+                                  handleStepContentKeyDown(event, index)
+                                }
                               >
                                 {step.content}
                               </div>
@@ -659,6 +706,11 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
                                 styles.contentInner,
                                 (styles as any)[`${combinedStepSize}`],
                               ])}
+                              tabIndex={0}
+                              role="button"
+                              onKeyDown={(event) =>
+                                handleStepContentKeyDown(event, index)
+                              }
                             >
                               {step.content}
                             </div>
@@ -789,6 +841,11 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
                                   styles.contentInner,
                                   (styles as any)[`${combinedStepSize}`],
                                 ])}
+                                tabIndex={0}
+                                role="button"
+                                onKeyDown={(event) =>
+                                  handleStepContentKeyDown(event, index)
+                                }
                               >
                                 {step.content}
                               </div>
@@ -802,7 +859,7 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
                             size === StepperSize.Small &&
                             layout === 'horizontal' && (
                               <hr
-                                aria-hidden='true'
+                                aria-hidden="true"
                                 className={mergeClasses([
                                   styles.separator,
                                   {
@@ -824,7 +881,7 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
                           <li className={styles.step}>
                             {layout === 'vertical' && (
                               <hr
-                                role='presentation'
+                                role="presentation"
                                 className={mergeClasses([
                                   innerSeparatorClassNames,
                                   (styles as any)[`${step.size}`],
@@ -835,7 +892,7 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
                             )}
                             {size !== StepperSize.Small && (
                               <hr
-                                role='presentation'
+                                role="presentation"
                                 className={mergeClasses([
                                   innerSeparatorClassNames,
                                   (styles as any)[`${step.size}`],

src/components/Stepper/Stepper.types.ts

@@ -192,6 +192,17 @@ export interface StepperProps
    * The onChange event handler.
    */
   onChange?: OnChangeHandler;
+  /**
+   * Reference to an array of section elements to scroll to when step navigation occurs.
+   * When provided, automatic scroll and focus behavior is enabled.
+   */
+  sectionRefs?: React.MutableRefObject<HTMLElement[]>;
+  /**
+   * Offset to adjust the section index calculation.
+   * Useful when there are additional sections before the step sections.
+   * @default 0
+   */
+  sectionIndexOffset?: number;
   /**
    * The Stepper is read only.
    * @default true