fix: screenreader narration improvements

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

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',

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>;
   };

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"

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,
   };
 };

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 {

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>

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,13 +16,16 @@ export const useMessageBarTitle_unstable = (
   props: MessageBarTitleProps,
   ref: React.Ref<HTMLElement>,
 ): MessageBarTitleState => {
+  const { titleId } = useMessageBarContext();
+
   return {
     components: {
       root: 'span',
     },
     root: slot.always(
       getIntrinsicElementProps('span', {
         ref,
+        id: titleId,
         ...props,
       }),
       { elementType: 'span' },

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(),