fix: use scrollIntoView + findByRole for checkbox clicks, remove raw userEvent

Author: jthrilly

lib/interviewer/Interfaces/FamilyPedigree/FamilyPedigree.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { useMemo } from 'react';
-import _rawUserEvent from '@testing-library/user-event';
 import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
 import SuperJSON from 'superjson';
 import StoryInterviewShell from '~/.storybook/StoryInterviewShell';
@@ -1001,20 +1000,20 @@ export const SingleParentTwoDonors: ScenarioStory = {
 
     // SiblingsDetailStep: ego's parents + 1 sibling
 
-    // Uncheck Donor 2 from ego's parents and Donor 1 from sibling's parents
-    // Uncheck Donor 2 from ego's parents by clicking the label text.
-    // Note: userEvent.click on the checkbox button element doesn't work
-    // in storybook's testing environment due to Base UI + motion.button
-    // interaction. Clicking the text label within the <label> element
-    // triggers the native label-checkbox association.
+    // Uncheck Donor 2 from ego's parents
     const egoParentsContainer = await screen.findByTestId(
       'ego-parents-checkboxes',
       {},
       STEP_TIMEOUT,
     );
     const egoScope = within(egoParentsContainer);
-    const donor2Text = await egoScope.findByText('Donor 2', {}, STEP_TIMEOUT);
-    await userEvent.click(donor2Text);
+    const donor2Cb = await egoScope.findByRole(
+      'checkbox',
+      { name: 'Donor 2' },
+      STEP_TIMEOUT,
+    );
+    donor2Cb.scrollIntoView();
+    await userEvent.click(donor2Cb);
     await waitForStepTransition();
 
     // Fill sibling details
@@ -1026,11 +1025,15 @@ export const SingleParentTwoDonors: ScenarioStory = {
     );
     await userEvent.click(sibSexRadios[0]!);
 
-    // Uncheck Donor 1 from sibling's shared parents by clicking label text.
-    // There are 2 "Donor 1" text elements: ego group and sibling group.
-    const donor1Texts = await screen.findAllByText('Donor 1', {}, STEP_TIMEOUT);
-    // Index 1 is the sibling group's "Donor 1" text
-    await userEvent.click(donor1Texts[1]!);
+    // Uncheck Donor 1 from sibling's shared parents
+    const donor1Cbs = await screen.findAllByRole(
+      'checkbox',
+      { name: 'Donor 1' },
+      STEP_TIMEOUT,
+    );
+    // Index 1 is the sibling's "Donor 1" checkbox
+    donor1Cbs[1]!.scrollIntoView();
+    await userEvent.click(donor1Cbs[1]!);
     await waitForStepTransition();
     await clickContinue();
     await waitForStepTransition();