` and `
` are exposed as "group", screen readers would read "group" before each line.
diff --git a/packages/component/src/Transcript/useActivityAccessibleName.ts b/packages/component/src/Transcript/useActivityAccessibleName.ts
index 017531d176..41dc185c97 100644
--- a/packages/component/src/Transcript/useActivityAccessibleName.ts
+++ b/packages/component/src/Transcript/useActivityAccessibleName.ts
@@ -3,15 +3,16 @@ import { useEffect, useMemo, useState } from 'react';
import type { RefObject } from 'react';
import type { WebChatActivity } from 'botframework-webchat-core';
-import { SEND_FAILED } from '../types/internal/SendStatus';
+import { SEND_FAILED, SENT } from '../types/internal/SendStatus';
import activityAltText from '../Utils/activityAltText';
import tabbableElements from '../Utils/tabbableElements';
import useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';
+import useLocalizeActivityGreetingAlt from '../hooks/internal/useLocalizeActivityGreetingAlt.js';
import useValueRef from '../hooks/internal/useValueRef';
type InteractiveType = 'link' | 'widget';
-const { useAvatarForBot, useGetKeyByActivity, useLocalizer, useSendStatusByActivityKey } = hooks;
+const { useDateFormatter, useGetKeyByActivity, useLocalizer, useSendStatusByActivityKey } = hooks;
const ACTIVITY_NUM_ATTACHMENTS_ALT_IDS = {
few: 'ACTIVITY_NUM_ATTACHMENTS_FEW_ALT',
@@ -28,11 +29,13 @@ const ACTIVITY_NUM_ATTACHMENTS_ALT_IDS = {
*
* Due to a bug in Safari, accessible name for active descendant must be a string but not a DOM element.
*/
-export default function useActivityAccessibleName(activity: WebChatActivity, bodyRef: RefObject) {
- const [{ initials: botInitials }] = useAvatarForBot();
+export default function useActivityAccessibleName(
+ activity: WebChatActivity,
+ bodyRef: RefObject
+): readonly [string] {
const [interactiveType, setInteractiveType] = useState(false);
const [sendStatusByActivityKey] = useSendStatusByActivityKey();
- const fromSelf = activity.from?.role === 'user';
+ const formatDate = useDateFormatter();
const getKeyByActivity = useGetKeyByActivity();
const localize = useLocalizer();
const localizeWithPlural = useLocalizer({ plural: true });
@@ -50,14 +53,7 @@ export default function useActivityAccessibleName(activity: WebChatActivity, bod
/** "Send failed." */
const activityInteractiveReasonSendFailedAlt = localize('ACTIVITY_INTERACTIVE_REASON_SEND_FAILED_ALT');
const activityKey = useMemo(() => getKeyByActivity(activity), [activity, getKeyByActivity]);
- const greetingAlt = useMemo(
- () =>
- (fromSelf ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')).replace(
- /\s{2,}/gu,
- ' '
- ),
- [botInitials, fromSelf, localize]
- );
+ const [greetingAlt] = useLocalizeActivityGreetingAlt()(activity);
const interactiveTypeRef = useValueRef(interactiveType);
const messageTextAlt = useMemo(
() => activityAltText(activity, renderMarkdownAsHTML),
@@ -68,9 +64,18 @@ export default function useActivityAccessibleName(activity: WebChatActivity, bod
[localizeWithPlural, numAttachments]
);
- const isSendFailed = useMemo(
- () => sendStatusByActivityKey.get(activityKey) === SEND_FAILED,
- [activityKey, sendStatusByActivityKey]
+ // Like the activity status, an activity without a send status is sent, e.g. from the bot.
+ const sendStatus = sendStatusByActivityKey.get(activityKey) || SENT;
+
+ const isSendFailed = sendStatus === SEND_FAILED;
+
+ /** "Sent at October 17 at 4:00 PM", only after the activity is sent, like the timestamp in the activity status. */
+ const sentAtAlt = useMemo(
+ () =>
+ activity.timestamp && sendStatus === SENT
+ ? localize('ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT', formatDate(activity.timestamp))
+ : '',
+ [activity.timestamp, formatDate, localize, sendStatus]
);
const accessibleName = useMemo(
@@ -86,7 +91,8 @@ export default function useActivityAccessibleName(activity: WebChatActivity, bod
: interactiveType === 'widget'
? activityInteractiveReasonInteractiveContentAlt
: '',
- interactiveType || isSendFailed ? activityInteractiveFootNoteAlt : ''
+ interactiveType || isSendFailed ? activityInteractiveFootNoteAlt : '',
+ sentAtAlt
]
.filter(Boolean)
.join(' '),
@@ -99,7 +105,8 @@ export default function useActivityAccessibleName(activity: WebChatActivity, bod
interactiveType,
isSendFailed,
messageTextAlt,
- numAttachmentsAlt
+ numAttachmentsAlt,
+ sentAtAlt
]
);
@@ -110,5 +117,5 @@ export default function useActivityAccessibleName(activity: WebChatActivity, bod
interactiveTypeRef.current !== hasWidgets && setInteractiveType(hasLinks ? 'link' : hasWidgets ? 'widget' : false);
}, [bodyRef, interactiveTypeRef, setInteractiveType]);
- return [accessibleName];
+ return useMemo(() => Object.freeze([accessibleName] as const), [accessibleName]);
}
diff --git a/packages/component/src/boot/internal.ts b/packages/component/src/boot/internal.ts
index 08a7b0c45c..2faa3f1041 100644
--- a/packages/component/src/boot/internal.ts
+++ b/packages/component/src/boot/internal.ts
@@ -12,6 +12,7 @@ export {
useCodeHighlighter,
type HighlightCodeFn
} from '../hooks/internal/codeHighlighter/index';
+export { default as useActivityStyleOptions } from '../hooks/internal/useActivityStyleOptions.js';
export { default as PartGrouping } from '../Middleware/ActivityGrouping/ui/PartGrouping/PartGrouping';
export { useLiveRegion, useQueueStaticElement } from '../providers/LiveRegionTwin/index';
export { default as ScreenReaderText } from '../ScreenReaderText';
diff --git a/packages/component/src/hooks/internal/useActivityStyleOptions.ts b/packages/component/src/hooks/internal/useActivityStyleOptions.ts
new file mode 100644
index 0000000000..64afaf2d84
--- /dev/null
+++ b/packages/component/src/hooks/internal/useActivityStyleOptions.ts
@@ -0,0 +1,25 @@
+import { hooks, type StrictStyleOptions } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { useMemo } from 'react';
+
+const { useStyleOptions } = hooks;
+
+/**
+ * Returns the style options of an activity: the per-activity `channelData.webChat.styleOptions` over `styleOptions`.
+ */
+export default function useActivityStyleOptions(
+ activity?: WebChatActivity | undefined
+): readonly [Readonly] {
+ const [styleOptions] = useStyleOptions();
+
+ return useMemo]>(
+ () =>
+ Object.freeze([
+ Object.freeze({
+ ...styleOptions,
+ ...activity?.channelData?.webChat?.styleOptions
+ })
+ ]),
+ [activity?.channelData?.webChat?.styleOptions, styleOptions]
+ );
+}
diff --git a/packages/component/src/hooks/internal/useLocalizeActivityGreetingAlt.ts b/packages/component/src/hooks/internal/useLocalizeActivityGreetingAlt.ts
new file mode 100644
index 0000000000..b4ac9583a1
--- /dev/null
+++ b/packages/component/src/hooks/internal/useLocalizeActivityGreetingAlt.ts
@@ -0,0 +1,33 @@
+import { hooks } from 'botframework-webchat-api';
+import { getVoiceActivityRole, type WebChatActivity } from 'botframework-webchat-core';
+import { useCallback } from 'react';
+
+const { useLocalizer, useStyleOptions } = hooks;
+
+/**
+ * Returns a function to get the screen reader text narrated before the content of an activity, e.g. "You said:" or
+ * "Bot JD said:".
+ *
+ * Bot initials set in the per-activity `channelData.webChat.styleOptions.botAvatarInitials` take precedence over
+ * `styleOptions.botAvatarInitials`, so each sender is narrated with their own initials, e.g. a bot and a live agent.
+ */
+export default function useLocalizeActivityGreetingAlt(): (activity: WebChatActivity) => readonly [string] {
+ const [{ botAvatarInitials }] = useStyleOptions();
+ const localize = useLocalizer();
+
+ return useCallback(
+ (activity: WebChatActivity) => {
+ // Merged as in useActivityStyleOptions, so a per-activity `null` hides the initials here too.
+ const { botAvatarInitials: initials } = { botAvatarInitials, ...activity.channelData?.webChat?.styleOptions };
+
+ return Object.freeze([
+ // Transcripts of what the user said in a voice conversation come from the bot.
+ (activity.from?.role === 'user' || getVoiceActivityRole(activity) === 'user'
+ ? localize('ACTIVITY_YOU_SAID_ALT')
+ : localize('ACTIVITY_BOT_SAID_ALT', typeof initials === 'string' ? initials : '')
+ ).replace(/\s{2,}/gu, ' ')
+ ] as const);
+ },
+ [botAvatarInitials, localize]
+ );
+}
diff --git a/packages/fluent-theme/src/components/activity/CopilotMessageHeader.tsx b/packages/fluent-theme/src/components/activity/CopilotMessageHeader.tsx
index 0ccfaca534..51168fef02 100644
--- a/packages/fluent-theme/src/components/activity/CopilotMessageHeader.tsx
+++ b/packages/fluent-theme/src/components/activity/CopilotMessageHeader.tsx
@@ -1,6 +1,6 @@
import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
import { hooks } from 'botframework-webchat';
-import { type WebChatActivity } from 'botframework-webchat/internal.js';
+import { useActivityStyleOptions, type WebChatActivity } from 'botframework-webchat/internal.js';
import cx from 'classnames';
import React, { memo, useMemo, type CSSProperties } from 'react';
import { custom, is, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
@@ -8,7 +8,6 @@ import { custom, is, object, optional, pipe, readonly, string, type InferInput }
import { useStyles } from '../../styles';
import styles from './CopilotMessageHeader.module.css';
import isAIGeneratedActivity from './private/isAIGeneratedActivity';
-import useActivityStyleOptions from './private/useActivityStyleOptions';
import useFirstActivityAuthor from './private/useFirstActivityAuthor';
const { useLocalizer } = hooks;
diff --git a/packages/fluent-theme/src/components/activity/private/useActivityStyleOptions.ts b/packages/fluent-theme/src/components/activity/private/useActivityStyleOptions.ts
deleted file mode 100644
index adb3ffd4c7..0000000000
--- a/packages/fluent-theme/src/components/activity/private/useActivityStyleOptions.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { type StrictStyleOptions, hooks } from 'botframework-webchat';
-import { type WebChatActivity } from 'botframework-webchat/internal.js';
-import { useMemo } from 'react';
-
-const { useStyleOptions } = hooks;
-
-export default function useActivityStyleOptions(activity?: WebChatActivity | undefined) {
- const [styleOptions] = useStyleOptions();
- return useMemo]>(
- () =>
- Object.freeze([
- {
- ...styleOptions,
- ...activity?.channelData?.webChat?.styleOptions
- }
- ]),
- [activity?.channelData?.webChat?.styleOptions, styleOptions]
- );
-}