diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
index 96aed03b4c5f6d..671f3b07328f65 100644
--- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
+++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx
@@ -73,7 +73,7 @@ const useClasses = makeStyles({
     placeContent: 'center',
 
     padding: '40px',
-    height: '200px',
+    minHeight: '200px',
 
     position: 'relative',
   },
diff --git a/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx b/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx
index 1cbe749a9367b4..85b9ec74ba8234 100644
--- a/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx
+++ b/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx
@@ -19,6 +19,7 @@ import {
   useId,
   tokens,
   makeStyles,
+  useRestoreFocusTarget,
 } from '@fluentui/react-components';
 import { Dismiss24Regular } from '@fluentui/react-icons';
 import story from './DialogBackdropAppearance.md';
@@ -41,9 +42,11 @@ export const BackdropAppearance = (): JSXElement => {
   const [backdropAppearance, setBackdropAppearance] = React.useState<BackdropAppearanceOption>();
   const backdropProp = backdropAppearance ? { appearance: backdropAppearance } : undefined;
 
+  const restoreFocusTargetAttribute = useRestoreFocusTarget();
+
   return (
     <>
-      <Button appearance="primary" onClick={() => setDrawerOpen(true)}>
+      <Button appearance="primary" onClick={() => setDrawerOpen(true)} {...restoreFocusTargetAttribute}>
         Open Drawer
       </Button>
 
diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverAnchorToCustomTarget.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverAnchorToCustomTarget.stories.tsx
index b5715c0860d47a..a898954fe517bf 100644
--- a/packages/react-components/react-popover/stories/src/Popover/PopoverAnchorToCustomTarget.stories.tsx
+++ b/packages/react-components/react-popover/stories/src/Popover/PopoverAnchorToCustomTarget.stories.tsx
@@ -42,7 +42,8 @@ export const AnchorToCustomTarget = (): JSXElement => {
           <Button>Popover trigger</Button>
         </PopoverTrigger>
 
-        <PopoverSurface tabIndex={-1}>
+        {/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
+        <PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
           <ExampleContent />
         </PopoverSurface>
       </Popover>
diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.stories.tsx
index ecc83d918b03df..15c812f861bdca 100644
--- a/packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.stories.tsx
+++ b/packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.stories.tsx
@@ -20,7 +20,9 @@ const ExampleContent = () => {
   const styles = useStyles();
   return (
     <div>
-      <h3 className={styles.contentHeader}>Popover content</h3>
+      <h3 className={styles.contentHeader} id="popover-title">
+        Popover content
+      </h3>
 
       <div>This is some popover content</div>
     </div>
@@ -37,7 +39,7 @@ export const Appearance = (): JSXElement => {
           <Button>Default appearance Popover trigger</Button>
         </PopoverTrigger>
 
-        <PopoverSurface tabIndex={-1}>
+        <PopoverSurface tabIndex={-1} aria-labelledby="popover-title">
           <ExampleContent />
         </PopoverSurface>
       </Popover>
@@ -47,7 +49,7 @@ export const Appearance = (): JSXElement => {
           <Button>Brand appearance Popover trigger</Button>
         </PopoverTrigger>
 
-        <PopoverSurface tabIndex={-1}>
+        <PopoverSurface tabIndex={-1} aria-labelledby="popover-title">
           <ExampleContent />
         </PopoverSurface>
       </Popover>
@@ -57,7 +59,7 @@ export const Appearance = (): JSXElement => {
           <Button>Inverted appearance Popover trigger</Button>
         </PopoverTrigger>
 
-        <PopoverSurface tabIndex={-1}>
+        <PopoverSurface tabIndex={-1} aria-labelledby="popover-title">
           <ExampleContent />
         </PopoverSurface>
       </Popover>
diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverControllingOpenAndClose.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverControllingOpenAndClose.stories.tsx
index 426af101a81bff..a931de64fa7bdf 100644
--- a/packages/react-components/react-popover/stories/src/Popover/PopoverControllingOpenAndClose.stories.tsx
+++ b/packages/react-components/react-popover/stories/src/Popover/PopoverControllingOpenAndClose.stories.tsx
@@ -39,7 +39,8 @@ export const ControllingOpenAndClose = (): JSXElement => {
         <PopoverTrigger disableButtonEnhancement>
           <Button>Controlled trigger</Button>
         </PopoverTrigger>
-        <PopoverSurface tabIndex={-1}>
+        {/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
+        <PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
           <ExampleContent />
         </PopoverSurface>
       </Popover>
diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverCustomTrigger.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverCustomTrigger.stories.tsx
index decdf924029513..922b9388d1d1af 100644
--- a/packages/react-components/react-popover/stories/src/Popover/PopoverCustomTrigger.stories.tsx
+++ b/packages/react-components/react-popover/stories/src/Popover/PopoverCustomTrigger.stories.tsx
@@ -33,7 +33,8 @@ export const CustomTrigger = (): JSXElement => {
       <PopoverTrigger>
         <CustomPopoverTrigger />
       </PopoverTrigger>
-      <PopoverSurface tabIndex={-1}>
+      {/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
+      <PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
         <ExampleContent />
       </PopoverSurface>
     </Popover>
diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverDefault.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverDefault.stories.tsx
index 13ff87cf3db4ef..c740f419a3ec50 100644
--- a/packages/react-components/react-popover/stories/src/Popover/PopoverDefault.stories.tsx
+++ b/packages/react-components/react-popover/stories/src/Popover/PopoverDefault.stories.tsx
@@ -26,7 +26,8 @@ export const Default = (props: PopoverProps): JSXElement => (
       <Button>Popover trigger</Button>
     </PopoverTrigger>
 
-    <PopoverSurface tabIndex={-1}>
+    {/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
+    <PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
       <ExampleContent />
     </PopoverSurface>
   </Popover>
diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverMotionCustom.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverMotionCustom.stories.tsx
index 3a9b4d981ccc39..715d07b0a1fa51 100644
--- a/packages/react-components/react-popover/stories/src/Popover/PopoverMotionCustom.stories.tsx
+++ b/packages/react-components/react-popover/stories/src/Popover/PopoverMotionCustom.stories.tsx
@@ -18,7 +18,8 @@ export const MotionCustom = (): JSXElement => (
       <Button>Open popover</Button>
     </PopoverTrigger>
 
-    <PopoverSurface tabIndex={-1}>
+    {/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
+    <PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
       <h3 style={{ marginTop: 0 }}>Popover content</h3>
       <p>This popover fades in and blurs out.</p>
     </PopoverSurface>
diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverMotionDisabled.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverMotionDisabled.stories.tsx
index 067dd736fd9578..09e83d590e08f1 100644
--- a/packages/react-components/react-popover/stories/src/Popover/PopoverMotionDisabled.stories.tsx
+++ b/packages/react-components/react-popover/stories/src/Popover/PopoverMotionDisabled.stories.tsx
@@ -8,7 +8,8 @@ export const MotionDisabled = (): JSXElement => (
       <Button>Open popover</Button>
     </PopoverTrigger>
 
-    <PopoverSurface tabIndex={-1}>
+    {/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
+    <PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
       <h3 style={{ marginTop: 0 }}>Popover content</h3>
       <p>This popover has motion disabled</p>
     </PopoverSurface>
diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrow.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrow.stories.tsx
index e45ca7e84e73f0..f6d764398b6346 100644
--- a/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrow.stories.tsx
+++ b/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrow.stories.tsx
@@ -25,7 +25,8 @@ export const WithArrow = (): JSXElement => (
       <Button>Popover trigger</Button>
     </PopoverTrigger>
 
-    <PopoverSurface tabIndex={-1}>
+    {/* Use this labelling technique for very short popovers. Otherwise label by the heading if setting focus to the popover surface. */}
+    <PopoverSurface tabIndex={-1} id="popover-surface" aria-labelledby="popover-surface">
       <ExampleContent />
     </PopoverSurface>
   </Popover>
diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx b/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx
index 9e4dfdce14b750..81a6d05c734af6 100644
--- a/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx
+++ b/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx
@@ -18,7 +18,9 @@ const ExampleContent = () => {
   const styles = useContentStyles();
   return (
     <div className={styles.root}>
-      <h3 className={styles.header}>Popover content</h3>
+      <h3 id="popover-heading" className={styles.header}>
+        Popover content
+      </h3>
 
       <div>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper, nulla at pretium pulvinar, erat nibh
@@ -81,7 +83,7 @@ export const WithArrowAutosize = (): JSXElement => (
     </PopoverTrigger>
 
     {/* 1. Reset the overflow behavior on `PopoverSurface` to avoid clipping of arrow */}
-    <PopoverSurface tabIndex={-1} style={{ overflow: 'visible', padding: 0 }}>
+    <PopoverSurface tabIndex={-1} aria-labelledby="popover-heading" style={{ overflow: 'visible', padding: 0 }}>
       {/* 2. Set the height of the popover content to 100% to fill the available space and allow scrolling */}
       <ExampleContent />
     </PopoverSurface>