fix: interactive tile expand button (#16644)

* fix: interactive tile expand button * test(tile): add/correct tile tests * test(tile): remove uneeded only's --------- Co-authored-by: Nikhil Tomar <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Jul 8, 2024 · d9e9bae · d9e9bae
1 parent 4e8fc6f
commit d9e9bae
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/e2e/components/Tile/Tile-test.avt.e2e.js b/e2e/components/Tile/Tile-test.avt.e2e.js
@@ -101,6 +101,12 @@ test.describe('@avt Tile', () => {
       },
     });
     await expect(page.locator('body')).toBeFocused();
+
+    // Pause to ensure the initial animation finishes before we interact
+    await expect(
+      page.getByRole('button', { name: 'Above the fold content here' })
+    ).toBeVisible();
+
     await page.keyboard.press('Tab');
     await expect(page.locator('#expandable-tile-1')).toBeFocused();
     await page.keyboard.press('Enter');
@@ -109,6 +115,31 @@ test.describe('@avt Tile', () => {
     );
   });
 
+  test('@avt-advanced-states ExpandableTile with interactive spacebar', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ExpandableTile',
+      id: 'components-tile--expandable-with-interactive',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page.locator('body')).toBeFocused();
+
+    // Pause to ensure the initial animation finishes before we interact
+    await expect(page.getByLabel('Interact to Expand tile')).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    await expect(page.getByLabel('Interact to Expand tile')).toBeFocused();
+    await page.keyboard.press('Space');
+    await expect(page.locator('#expandable-tile-1')).toHaveClass(
+      'cds--tile cds--tile--expandable cds--tile--expandable--interactive cds--tile--is-expanded'
+    );
+  });
+
   test('@avt-keyboard-nav SelectableTile', async ({ page }) => {
     await visitStory(page, {
       component: 'SelectableTile',
@@ -118,10 +149,14 @@ test.describe('@avt Tile', () => {
       },
     });
     await expect(page.locator('body')).toBeFocused();
+
+    // Pause to ensure the initial animation finishes before we interact
+    await expect(page.getByRole('checkbox')).toBeVisible();
+
     await page.keyboard.press('Tab');
-    await expect(page.locator('#selectable-tile-1')).toBeFocused();
+    await expect(page.getByRole('checkbox')).toBeFocused();
     await page.keyboard.press('Enter');
-    await expect(page.locator('#selectable-tile-1')).toHaveClass(
+    await expect(page.getByRole('checkbox')).toHaveClass(
       'cds--tile cds--tile--selectable cds--tile--is-selected'
     );
   });
@@ -135,9 +170,13 @@ test.describe('@avt Tile', () => {
       },
     });
     await expect(page.locator('body')).toBeFocused();
+
+    // Pause to ensure the initial animation finishes before we interact
+    await expect(page.getByRole('radio').nth(0)).toBeVisible();
+
     await page.keyboard.press('Tab');
-    await expect(page.locator('#radio-tile-2')).toBeFocused();
+    await expect(page.getByRole('radio').nth(1)).toBeFocused();
     await page.keyboard.press('ArrowUp');
-    await expect(page.locator('#radio-tile-1')).toBeChecked();
+    await expect(page.getByRole('radio').nth(0)).toBeChecked();
   });
 });
diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
@@ -707,6 +707,7 @@ export const ExpandableTile = React.forwardRef<
   const [interactive, setInteractive] = useState<boolean>(true);
   const aboveTheFold = useRef<HTMLDivElement>(null);
   const belowTheFold = useRef<HTMLDivElement>(null);
+  const chevronInteractiveRef = useRef<HTMLButtonElement>(null);
   const tileContent = useRef<HTMLDivElement>(null);
   const tile = useRef<HTMLElement>(null);
   const ref = useMergedRefs([forwardRef, tile]);
@@ -745,7 +746,10 @@ export const ExpandableTile = React.forwardRef<
   }
 
   function handleKeyUp(evt: KeyboardEvent) {
-    if (evt.target !== tile.current) {
+    if (
+      evt.target !== tile.current &&
+      evt.target !== chevronInteractiveRef.current
+    ) {
       if (matches(evt, [keys.Enter, keys.Space])) {
         evt.preventDefault();
       }
@@ -876,6 +880,7 @@ export const ExpandableTile = React.forwardRef<
           onKeyUp={composeEventHandlers([onKeyUp, handleKeyUp])}
           onClick={composeEventHandlers([onClick, handleClick])}
           aria-label={isExpanded ? tileExpandedIconText : tileCollapsedIconText}
+          ref={chevronInteractiveRef}
           className={chevronInteractiveClassNames}>
           <ChevronDown />
         </button>