fix(Dialog): focus does not switch to footer (#2532)

Author: syeo66

.changeset/nice-groups-cry.md

@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": minor
+---
+
+fix(Dialog): focus does not switch to footer

packages/components/src/components/Dialog/Dialog.tsx

@@ -217,11 +217,18 @@ export const DialogContent = (
     const handleOpenAutoFocus = (event: Event) => {
         event.preventDefault();
 
+        const focusableSelector =
+            'button:not([data-tooltip-trigger="true"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+        // Try to find focusable element in order: body -> footer -> header
         const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component="body"]');
+        const dialogFooter = contentRef.current?.querySelector('[data-dialog-layout-component="footer"]');
+        const dialogHeader = contentRef.current?.querySelector('[data-dialog-layout-component="header"]');
 
-        const firstFocusable = dialogBody?.querySelector(
-            'button:not([data-tooltip-trigger="true"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-        );
+        const firstFocusable =
+            dialogBody?.querySelector(focusableSelector) ||
+            dialogFooter?.querySelector(focusableSelector) ||
+            dialogHeader?.querySelector(focusableSelector);
 
         if (firstFocusable instanceof HTMLElement) {
             firstFocusable.focus();

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

@@ -530,3 +530,34 @@ test('should not focus the tooltip trigger when dialog opens', async ({ mount, p
     await expect(page.getByTestId('tooltip-trigger')).not.toBeFocused();
     await expect(page.getByTestId(TEXT_INPUT_TEST_ID_1)).toBeFocused();
 });
+
+test('should focus first button in footer when body has no focusable elements', async ({ mount, page }) => {
+    const component = await mount(
+        <Dialog.Root>
+            <Dialog.Trigger>
+                <Button>{DIALOG_TRIGGER_TEXT}</Button>
+            </Dialog.Trigger>
+            <Dialog.Content>
+                <Dialog.Header>{DIALOG_HEADER_TEXT}</Dialog.Header>
+                <Dialog.Body>
+                    <p>Just some text, no focusable elements</p>
+                </Dialog.Body>
+                <Dialog.Footer>
+                    <Button data-test-id="footer-button-1">Cancel</Button>
+                    <Button data-test-id="footer-button-2">Submit</Button>
+                </Dialog.Footer>
+            </Dialog.Content>
+        </Dialog.Root>,
+    );
+
+    const dialogTrigger = page.getByTestId(DIALOG_TRIGGER_TEST_ID);
+
+    await expect(component).toBeVisible();
+    await expect(dialogTrigger).toBeVisible();
+
+    await dialogTrigger.focus();
+    await page.keyboard.press('Enter');
+
+    const firstFooterButton = page.getByTestId('footer-button-1');
+    await expect(firstFooterButton).toBeFocused();
+});