fix: make stepper region focusable if scrollable (#876)

* fix: stepper region: fixed issue by making stepper region focusable * fix: stepper region: updated test snapshot for stepper * fix: stepper region: updated tabindex attribute condition * fix: stepper region: added test case for scrollable stepper --------- Co-authored-by: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>
EightfoldAI · Aug 27, 2024 · da5e5c3 · da5e5c3
1 parent 9652629
commit da5e5c3
Show file tree

Hide file tree

Showing 3 changed files with 20,066 additions and 0 deletions.
diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
@@ -522,6 +522,7 @@ export const Stepper: FC<StepperProps> = React.forwardRef(
                   className={styles.stepsContainer}
                   onScroll={handleScroll}
                   ref={stepsContainerRef}
+                  tabIndex={mergedScrollable ? 0 : null}
                 >
                   <ul className={styles.steps} ref={stepsRef}>
                     {steps.map((step: Step, index: number) => {

diff --git a/src/components/Stepper/Tests/Stepper.test.tsx b/src/components/Stepper/Tests/Stepper.test.tsx
@@ -163,4 +163,16 @@ describe('Stepper', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  test('Stepper is scrollable', () => {
+    const wrapper = mount(
+      <Stepper
+        {...stepperArgs}
+        size={StepperSize.Small}
+        steps={defaultWorkflow}
+        scrollable
+      />
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });