diff --git a/change/@fluentui-react-message-bar-preview-499e36e9-6912-4a07-92dc-fadbf8feebef.json b/change/@fluentui-react-message-bar-preview-499e36e9-6912-4a07-92dc-fadbf8feebef.json
new file mode 100644
index 0000000000000..a3bc09d542afa
--- /dev/null
+++ b/change/@fluentui-react-message-bar-preview-499e36e9-6912-4a07-92dc-fadbf8feebef.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: screenreader narration improvements",
+  "packageName": "@fluentui/react-message-bar-preview",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md b/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md
index cb6bc178a490b..cbcd2b363e908 100644
--- a/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md
+++ b/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md
@@ -63,6 +63,7 @@ export type MessageBarContextValue = {
     layout: 'multiline' | 'singleline' | 'auto';
     actionsRef: React_2.MutableRefObject<HTMLDivElement | null>;
     bodyRef: React_2.MutableRefObject<HTMLDivElement | null>;
+    titleId: string;
 };
 
 // @public
@@ -105,10 +106,8 @@ export type MessageBarSlots = {
 };
 
 // @public
-export type MessageBarState = ComponentState<MessageBarSlots> & Required<Pick<MessageBarProps, 'layout' | 'intent'>> & {
+export type MessageBarState = ComponentState<MessageBarSlots> & Required<Pick<MessageBarProps, 'layout' | 'intent'>> & Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {
     transitionClassName: string;
-    actionsRef: React_2.MutableRefObject<HTMLDivElement | null>;
-    bodyRef: React_2.MutableRefObject<HTMLDivElement | null>;
 };
 
 // @public
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.test.tsx b/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.test.tsx
index 54012eec2b44d..8b01f7a5cffb6 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.test.tsx
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.test.tsx
@@ -6,6 +6,7 @@ import { AnnounceProvider_unstable } from '@fluentui/react-shared-contexts';
 import { MessageBarBody } from '../MessageBarBody/MessageBarBody';
 import { MessageBarTitle } from '../MessageBarTitle/MessageBarTitle';
 import { MessageBarActions } from '../MessageBarActions/MessageBarActions';
+import { resetIdsForTests } from '@fluentui/react-utilities';
 
 describe('MessageBar', () => {
   beforeAll(() => {
@@ -23,6 +24,10 @@ describe('MessageBar', () => {
     };
   });
 
+  beforeEach(() => {
+    resetIdsForTests();
+  });
+
   isConformant({
     Component: MessageBar,
     displayName: 'MessageBar',
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.types.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.types.ts
index 3488ba0456ae1..f2ad4afaf4231 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.types.ts
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.types.ts
@@ -1,6 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { MessageBarContextValue } from '../../contexts/messageBarContext';
-import * as React from 'react';
 
 export type MessageBarSlots = {
   root: Slot<'div'>;
@@ -32,8 +31,7 @@ export type MessageBarProps = ComponentProps<MessageBarSlots> &
  * State used in rendering MessageBar
  */
 export type MessageBarState = ComponentState<MessageBarSlots> &
-  Required<Pick<MessageBarProps, 'layout' | 'intent'>> & {
+  Required<Pick<MessageBarProps, 'layout' | 'intent'>> &
+  Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {
     transitionClassName: string;
-    actionsRef: React.MutableRefObject<HTMLDivElement | null>;
-    bodyRef: React.MutableRefObject<HTMLDivElement | null>;
   };
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap b/packages/react-components/react-message-bar-preview/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
index 17d8f7e24e3ea..d59182d881ee5 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
@@ -3,7 +3,9 @@
 exports[`MessageBar renders a default state 1`] = `
 <div>
   <div
+    aria-labelledby="fui-1"
     class="fui-MessageBar"
+    role="group"
   >
     <div
       class="fui-MessageBar__icon"
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts
index bfb8df9816fad..07e6dadd56f66 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useAnnounce_unstable } from '@fluentui/react-shared-contexts';
 import type { MessageBarProps, MessageBarState } from './MessageBar.types';
 import { getIntentIcon } from './getIntentIcon';
@@ -25,6 +25,7 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HT
   const actionsRef = React.useRef<HTMLDivElement | null>(null);
   const bodyRef = React.useRef<HTMLDivElement | null>(null);
   const { announce } = useAnnounce_unstable();
+  const titleId = useId();
 
   React.useEffect(() => {
     const bodyMessage = bodyRef.current?.textContent;
@@ -42,6 +43,8 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HT
     root: slot.always(
       getIntrinsicElementProps('div', {
         ref: useMergedRefs(ref, reflowRef, nodeRef),
+        role: 'group',
+        'aria-labelledby': titleId,
         ...props,
       }),
       { elementType: 'div' },
@@ -57,5 +60,6 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HT
     transitionClassName,
     actionsRef,
     bodyRef,
+    titleId,
   };
 };
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBarContextValues.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBarContextValues.ts
index 6afe0dc1492c2..4119dd77cb8bb 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBarContextValues.ts
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBarContextValues.ts
@@ -2,15 +2,16 @@ import * as React from 'react';
 import { MessageBarContextValues, MessageBarState } from './MessageBar.types';
 
 export function useMessageBarContextValue_unstable(state: MessageBarState): MessageBarContextValues {
-  const { layout, actionsRef, bodyRef } = state;
+  const { layout, actionsRef, bodyRef, titleId } = state;
 
   const messageBarContext = React.useMemo(
     () => ({
       layout,
       actionsRef,
       bodyRef,
+      titleId,
     }),
-    [layout, actionsRef, bodyRef],
+    [layout, actionsRef, bodyRef, titleId],
   );
 
   return {
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/__snapshots__/MessageBarTitle.test.tsx.snap b/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/__snapshots__/MessageBarTitle.test.tsx.snap
index 8d96636aac25e..54ed17a575b18 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/__snapshots__/MessageBarTitle.test.tsx.snap
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/__snapshots__/MessageBarTitle.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`MessageBarTitle renders a default state 1`] = `
 <div>
   <span
     class="fui-MessageBarTitle"
+    id=""
   >
     Default MessageBarTitle
   </span>
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/useMessageBarTitle.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/useMessageBarTitle.ts
index 9861811bb1fce..d464ea18cd771 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/useMessageBarTitle.ts
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/useMessageBarTitle.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { MessageBarTitleProps, MessageBarTitleState } from './MessageBarTitle.types';
+import { useMessageBarContext } from '../../contexts/messageBarContext';
 
 /**
  * Create the state required to render MessageBarTitle.
@@ -15,6 +16,8 @@ export const useMessageBarTitle_unstable = (
   props: MessageBarTitleProps,
   ref: React.Ref<HTMLElement>,
 ): MessageBarTitleState => {
+  const { titleId } = useMessageBarContext();
+
   return {
     components: {
       root: 'span',
@@ -22,6 +25,7 @@ export const useMessageBarTitle_unstable = (
     root: slot.always(
       getIntrinsicElementProps('span', {
         ref,
+        id: titleId,
         ...props,
       }),
       { elementType: 'span' },
diff --git a/packages/react-components/react-message-bar-preview/src/contexts/messageBarContext.ts b/packages/react-components/react-message-bar-preview/src/contexts/messageBarContext.ts
index f2bb40b5a8490..a44509f2c73ed 100644
--- a/packages/react-components/react-message-bar-preview/src/contexts/messageBarContext.ts
+++ b/packages/react-components/react-message-bar-preview/src/contexts/messageBarContext.ts
@@ -4,10 +4,12 @@ export type MessageBarContextValue = {
   layout: 'multiline' | 'singleline' | 'auto';
   actionsRef: React.MutableRefObject<HTMLDivElement | null>;
   bodyRef: React.MutableRefObject<HTMLDivElement | null>;
+  titleId: string;
 };
 const messageBarContext = React.createContext<MessageBarContextValue | undefined>(undefined);
 
 export const messageBarContextDefaultValue: MessageBarContextValue = {
+  titleId: '',
   layout: 'singleline',
   actionsRef: React.createRef(),
   bodyRef: React.createRef(),