docs(react-infobutton): Update stories to show better guidance

packages/react-components/react-infobutton/stories/Infobutton/InfoButtonDefault.stories.tsx

@@ -1,14 +1,46 @@
 import * as React from 'react';
-import { InfoButton, InfoButtonProps } from '@fluentui/react-infobutton';
-import { Link } from '@fluentui/react-components';
-
-export const Default = (props: Partial<InfoButtonProps>) => (
-  <InfoButton
-    {...props}
-    info={
-      <>
-        This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
-      </>
-    }
-  />
-);
+import { InfoButton } from '@fluentui/react-infobutton';
+import { Label, Link, makeStyles, useId } from '@fluentui/react-components';
+import type { InfoButtonProps } from '@fluentui/react-infobutton';
+import type { PopoverProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  infoButton: {
+    verticalAlign: 'top',
+  },
+});
+
+export const Default = (props: Partial<InfoButtonProps>) => {
+  const styles = useStyles();
+  const labelId = useId('label');
+  const infobuttonId = useId('infobutton');
+  const infobuttonInfoId = infobuttonId + '__info';
+
+  const [open, setOpen] = React.useState(false);
+
+  const info = (
+    <>
+      This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
+    </>
+  );
+
+  const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => setOpen(data.open);
+
+  return (
+    <div aria-owns={open ? infobuttonInfoId : undefined}>
+      <Label id={labelId}>This is a default Infobutton</Label>
+      <InfoButton
+        {...props}
+        id={infobuttonId}
+        className={styles.infoButton}
+        info={{
+          id: infobuttonInfoId,
+          children: info,
+        }}
+        popover={{
+          onOpenChange,
+        }}
+      />
+    </div>
+  );
+};

packages/react-components/react-infobutton/stories/Infobutton/InfoButtonSize.stories.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { InfoButton } from '@fluentui/react-infobutton';
-import { Link, makeStyles, shorthands } from '@fluentui/react-components';
+import { Label, Link, makeStyles, shorthands, useId } from '@fluentui/react-components';
+import type { InfoButtonProps } from '@fluentui/react-infobutton';
+import type { PopoverProps } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   base: {
@@ -10,42 +12,56 @@ const useStyles = makeStyles({
     ...shorthands.gap('80px'),
     ...shorthands.padding('20px'),
   },
+  infoButton: {
+    verticalAlign: 'top',
+  },
 });
 
-export const Size = () => {
+const InfoButtonSize: React.FC<{ size: InfoButtonProps['size'] }> = ({ size }) => {
   const styles = useStyles();
+  const labelId = useId('label');
+  const infobuttonId = useId('infobutton');
+  const infobuttonInfoId = infobuttonId + '__info';
+
+  const [open, setOpen] = React.useState(false);
+
+  const info = (
+    <>
+      This is example information for an InfoButton. <Link href="https://react.fluentui.dev">Learn more</Link>
+    </>
+  );
+
+  const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => setOpen(data.open);
 
   return (
-    <div className={styles.base}>
+    <div aria-owns={open ? infobuttonInfoId : undefined}>
+      <Label size={size} id={labelId}>
+        This is a {size} Infobutton
+      </Label>
       <InfoButton
-        size="small"
-        info={
-          <>
-            This is example information for a small InfoButton.{' '}
-            <Link href="https://react.fluentui.dev">Learn more</Link>.
-          </>
-        }
+        size={size}
+        id={infobuttonId}
+        className={styles.infoButton}
+        info={{
+          id: infobuttonInfoId,
+          children: info,
+        }}
+        popover={{
+          onOpenChange,
+        }}
       />
+    </div>
+  );
+};
 
-      <InfoButton
-        size="medium"
-        info={
-          <>
-            This is example information for a medium InfoButton.{' '}
-            <Link href="https://react.fluentui.dev">Learn more</Link>.
-          </>
-        }
-      />
+export const Size = () => {
+  const styles = useStyles();
 
-      <InfoButton
-        size="large"
-        info={
-          <>
-            This is example information for a large InfoButton.{' '}
-            <Link href="https://react.fluentui.dev">Learn more</Link>.
-          </>
-        }
-      />
+  return (
+    <div className={styles.base}>
+      <InfoButtonSize size="small" />
+      <InfoButtonSize size="medium" />
+      <InfoButtonSize size="large" />
     </div>
   );
 };