feat: handle focusing of interactive elements inside of a Flyout

.changeset/blue-doors-hammer.md

@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+feat: add handling for autofocus in flyout

packages/components/src/components/Flyout/Flyout.stories.tsx

@@ -3,8 +3,9 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 
 import { Button } from '../Button/Button';
+import { TextInput } from '../TextInput/TextInput';
 
-import { Flyout, FlyoutContent, FlyoutRoot, FlyoutTrigger, FlyoutHeader, FlyoutBody, FlyoutFooter } from './Flyout';
+import { Flyout, FlyoutBody, FlyoutContent, FlyoutFooter, FlyoutHeader, FlyoutRoot, FlyoutTrigger } from './Flyout';
 
 type Story = StoryObj<typeof meta>;
 const meta: Meta<typeof FlyoutContent> = {
@@ -104,6 +105,29 @@ export const WithFooter: Story = {
     },
 };
 
+export const WithFocusableContent: Story = {
+    args: {
+        children: 'Hello World',
+    },
+    render: ({ ...args }) => {
+        return (
+            <Flyout.Root>
+                <Flyout.Trigger>
+                    <Button>Open flyout</Button>
+                </Flyout.Trigger>
+                <Flyout.Content {...args}>
+                    <Flyout.Header>Header</Flyout.Header>
+                    <Flyout.Body {...args}>
+                        <TextInput />
+                        <TextInput />
+                        <TextInput />
+                    </Flyout.Body>
+                </Flyout.Content>
+            </Flyout.Root>
+        );
+    },
+};
+
 export const WithHeaderAndFooter: Story = {};
 
 export const WithCloseButton: Story = {

packages/components/src/components/Flyout/Flyout.tsx

@@ -80,7 +80,16 @@ export const FlyoutTrigger = (
     ref: ForwardedRef<HTMLButtonElement>,
 ) => {
     return (
-        <RadixPopover.Trigger data-test-id={dataTestId} asChild ref={ref}>
+        <RadixPopover.Trigger
+            onMouseDown={(mouseEvent) => {
+                mouseEvent.currentTarget.dataset.autoFocusVisible = 'false';
+            }}
+            data-auto-focus-visible="true"
+            data-flyout-trigger
+            data-test-id={dataTestId}
+            asChild
+            ref={ref}
+        >
             {children}
         </RadixPopover.Trigger>
     );
@@ -113,6 +122,16 @@ export const FlyoutContent = (
                 className={flyoutContentStyles({ ...props })}
                 data-flyout-spacing={padding}
                 data-test-id={dataTestId}
+                onFocus={(event) => {
+                    const triggerElement = event.relatedTarget as HTMLElement;
+                    if (triggerElement && triggerElement.dataset.flyoutTrigger) {
+                        const focusVisible = triggerElement.dataset.autoFocusVisible === 'true';
+                        triggerElement.dataset.autoFocusVisible = 'true';
+                        if (!focusVisible) {
+                            event.target.dataset.showFocusRing = 'false';
+                        }
+                    }
+                }}
                 {...props}
             >
                 {children}

packages/components/src/components/Flyout/__tests__/Flyout.ct.tsx

@@ -4,6 +4,8 @@ import { expect, test } from '@playwright/experimental-ct-react';
 import sinon from 'sinon';
 
 import { Button } from '#/components/Button/Button';
+import { TextInput } from '#/components/TextInput/TextInput';
+import { FOCUS_BORDER_CSS, FOCUS_OUTLINE_CSS } from '#/helpers/constants';
 
 import { Flyout } from '../Flyout';
 
@@ -16,6 +18,9 @@ const FLYOUT_HEADER_TEST_ID = 'fondue-flyout-header';
 const FLYOUT_HEADER_TEXT = 'Flyout Header';
 const FLYOUT_FOOTER_TEST_ID = 'fondue-flyout-footer';
 const FLYOUT_FOOTER_TEXT = 'Flyout Footer';
+const TEXT_INPUT_TEST_ID_1 = 'fondue-text-input-1';
+const TEXT_INPUT_TEST_ID_2 = 'fondue-text-input-2';
+const TEXT_INPUT_TEST_ID_3 = 'fondue-text-input-3';
 
 test('should render trigger', async ({ mount, page }) => {
     const component = await mount(
@@ -364,3 +369,69 @@ test('should trigger callback on open and close', async ({ mount, page }) => {
     await page.click('body');
     expect(onOpenChange.calledWith(false)).toBe(true);
 });
+
+test('should render focus visible input on enter press', async ({ mount, page }) => {
+    const component = await mount(
+        <Flyout.Root>
+            <Flyout.Trigger>
+                <Button>Open flyout</Button>
+            </Flyout.Trigger>
+            <Flyout.Content>
+                <Flyout.Body>
+                    <TextInput data-test-id={TEXT_INPUT_TEST_ID_1} />
+                    <TextInput data-test-id={TEXT_INPUT_TEST_ID_2} />
+                    <TextInput data-test-id={TEXT_INPUT_TEST_ID_3} />
+                </Flyout.Body>
+            </Flyout.Content>
+        </Flyout.Root>,
+    );
+    const tooltipTrigger = page.getByTestId(FLYOUT_TRIGGER_TEST_ID);
+    const textInput1 = page.getByTestId(TEXT_INPUT_TEST_ID_1);
+    const textInput2 = page.getByTestId(TEXT_INPUT_TEST_ID_2);
+    const textInput3 = page.getByTestId(TEXT_INPUT_TEST_ID_3);
+    await expect(component).toBeVisible();
+    await expect(tooltipTrigger).toBeVisible();
+    await tooltipTrigger.focus();
+    await page.keyboard.press('Enter');
+    await expect(textInput1).toHaveCSS(...FOCUS_OUTLINE_CSS);
+    await expect(textInput1).not.toHaveCSS(...FOCUS_BORDER_CSS);
+    await page.keyboard.press('Tab');
+    await expect(textInput2).toHaveCSS(...FOCUS_OUTLINE_CSS);
+    await expect(textInput2).not.toHaveCSS(...FOCUS_BORDER_CSS);
+    await textInput3.click();
+    await expect(textInput3).not.toHaveCSS(...FOCUS_OUTLINE_CSS);
+    await expect(textInput3).toHaveCSS(...FOCUS_BORDER_CSS);
+});
+
+test('should not render focus visible input on click', async ({ mount, page }) => {
+    const component = await mount(
+        <Flyout.Root>
+            <Flyout.Trigger>
+                <Button>Open flyout</Button>
+            </Flyout.Trigger>
+            <Flyout.Content>
+                <Flyout.Body>
+                    <TextInput data-test-id={TEXT_INPUT_TEST_ID_1} />
+                    <TextInput data-test-id={TEXT_INPUT_TEST_ID_2} />
+                    <TextInput data-test-id={TEXT_INPUT_TEST_ID_3} />
+                </Flyout.Body>
+            </Flyout.Content>
+        </Flyout.Root>,
+    );
+    const tooltipTrigger = page.getByTestId(FLYOUT_TRIGGER_TEST_ID);
+    const textInput1 = page.getByTestId(TEXT_INPUT_TEST_ID_1);
+    const textInput2 = page.getByTestId(TEXT_INPUT_TEST_ID_2);
+    const textInput3 = page.getByTestId(TEXT_INPUT_TEST_ID_3);
+    await expect(component).toBeVisible();
+    await expect(tooltipTrigger).toBeVisible();
+    await tooltipTrigger.focus();
+    await tooltipTrigger.click();
+    await expect(textInput1).not.toHaveCSS(...FOCUS_OUTLINE_CSS);
+    await expect(textInput1).toHaveCSS(...FOCUS_BORDER_CSS);
+    await textInput2.click();
+    await expect(textInput2).not.toHaveCSS(...FOCUS_OUTLINE_CSS);
+    await expect(textInput2).toHaveCSS(...FOCUS_BORDER_CSS);
+    await page.keyboard.press('Tab');
+    await expect(textInput3).toHaveCSS(...FOCUS_OUTLINE_CSS);
+    await expect(textInput3).not.toHaveCSS(...FOCUS_BORDER_CSS);
+});