fix(Dialog): panel type * 3

Author: tenphi

src/components/overlays/Dialog/Dialog.tsx

@@ -154,7 +154,7 @@ export const Dialog = forwardRef(function Dialog(
   }
 
   return (
-    <FocusScope contain restoreFocus>
+    <FocusScope contain restoreFocus autoFocus>
       {content}
     </FocusScope>
   );
@@ -250,6 +250,7 @@ const DialogContent = forwardRef(function DialogContent(
       styles={styles}
       as="section"
       {...dialogProps}
+      tabIndex={undefined}
       mods={{ dismissable: isDismissable }}
       style={{ '--dialog-size': `${sizePxMap[size] || 288}px` }}
       data-type={type}
@@ -262,6 +263,7 @@ const DialogContent = forwardRef(function DialogContent(
           <Button
             qa="ModalCloseButton"
             type="neutral"
+            tabIndex="-1"
             styles={CLOSE_BUTTON_STYLES}
             icon={closeIcon || <CloseIcon />}
             label={formatMessage('dismiss')}

src/components/overlays/Dialog/stories/Dialog.stories.tsx

@@ -198,21 +198,20 @@ CloseOnEsc.play = async (context) => {
 
   await userEvent.click(trigger);
 
+  await timeout(500);
+
   const dialog = await findByRole('dialog');
 
   await expect(dialog).toBeInTheDocument();
   await expect(dialog.contains(document.activeElement)).toBe(true);
 
-  await timeout(500);
-
   await userEvent.keyboard('{Escape}');
 
   await timeout(500);
 
   await expect(dialog).not.toBeInTheDocument();
 
-  // @TODO: fix this
-  // await waitFor(() => expect(document.activeElement).toBe(trigger));
+  await waitFor(() => expect(document.activeElement).toBe(trigger));
 };
 
 export const CloseOnEscCloseBehaviorHide: typeof Template = Template.bind({});