diff --git a/e2e/components/Tile/Tile-test.avt.e2e.js b/e2e/components/Tile/Tile-test.avt.e2e.js index e9ca2d56840f..a49cf1bfe535 100644 --- 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 index 0dbeede5523f..578fcbe4fdae 100644 --- 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(true); const aboveTheFold = useRef(null); const belowTheFold = useRef(null); + const chevronInteractiveRef = useRef(null); const tileContent = useRef(null); const tile = useRef(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}>