docs(react-dialog): update DialogTriggerOutsideDialog to include focus behavior

packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.md

@@ -1 +1,3 @@
-There's absolutely no benefit in using `DialogTrigger` outside of `Dialog`, just use controlled state with a button instead.
+`DialogTrigger` is not a component that can be used outside of `Dialog`. If you want to trigger the dialog from outside of `Dialog`, you should use controlled state instead.
+
+> ⚠️ Note: As there will be no `DialogTrigger`, you should handle focus restoration when the dialog gets closed.

packages/react-components/react-dialog/stories/Dialog/DialogTriggerOutsideDialog.stories.tsx

@@ -8,15 +8,44 @@ import {
   DialogTrigger,
   DialogBody,
   Button,
+  DialogOpenChangeData,
 } from '@fluentui/react-components';
 import story from './DialogTriggerOutsideDialog.md';
 
 export const TriggerOutsideDialog = () => {
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
   const [open, setOpen] = React.useState(false);
+  const [closeAction, setCloseAction] = React.useState<DialogOpenChangeData['type'] | null>(null);
+
+  React.useEffect(() => {
+    // Prevents focusing on an initial render
+    if (open || closeAction === null) {
+      return;
+    }
+
+    triggerRef.current?.focus();
+  }, [closeAction, open]);
+
   return (
     <>
-      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
-      <Dialog open={open} onOpenChange={(event, data) => setOpen(data.open)}>
+      <Button
+        onClick={() => {
+          setOpen(true);
+          setCloseAction(null);
+        }}
+        ref={triggerRef}
+      >
+        Open Dialog
+      </Button>
+
+      <Dialog
+        open={open}
+        onOpenChange={(event, data) => {
+          setOpen(data.open);
+          setCloseAction(data.type);
+        }}
+      >
         <DialogSurface>
           <DialogBody>
             <DialogTitle>Dialog title</DialogTitle>
@@ -25,6 +54,7 @@ export const TriggerOutsideDialog = () => {
               est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure
               cumque eaque?
             </DialogContent>
+
             <DialogActions>
               <DialogTrigger disableButtonEnhancement>
                 <Button appearance="secondary">Close</Button>