Announce each message with its own bot initials and, on arrow keys, its time

[Eugene (OEvgeny)]

Addresses #5803, #5715 and #5735

Changelog Entry

Fixed

• Fixed screen readers announcing all bot messages with the same initials, such as "Bot JO said:" for both a bot and a live agent: the text before each message, the name of the message when navigating with arrow keys, and the live region now prefer the per-activity channelData.webChat.styleOptions.botAvatarInitials over styleOptions.botAvatarInitials, fixes #5803, in PR #5898, by @OEvgeny
• Fixed screen readers not announcing the time of a message when navigating the transcript with arrow keys: the name of each sent message now ends with the same "Sent at" text as its timestamp, fixes #5715 and #5735, in PR #5898, by @OEvgeny

Description

Screen readers announced every bot message with the global styleOptions.botAvatarInitials, so a bot and a live agent both read "Bot JO said:", and arrow-key navigation did not read the time of a message. The greeting is now built by one localizer hook that prefers the per-activity channelData.webChat.styleOptions.botAvatarInitials, and the name of a sent message ends with the "Sent at" text of its timestamp (second commit).

Design

• useLocalizeActivityGreetingAlt() returns a function of the activity and derives "from user" from it, including user transcripts in voice conversations (as the visible layout does); the visible avatar is unchanged.

Specific Changes

• useActivityStyleOptions: moved from the Fluent theme, exported from the internal entry, merged options frozen

• useLocalizeActivityGreetingAlt: new hook, "You said:" or "Bot $1 said:" with the activity's initials over styleOptions

• StackedLayout, CarouselFilmStrip, LiveRegionActivity, useActivityAccessibleName: use the hook

• useActivityAccessibleName: appends ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT once the message is sent

• StyleOptions: botAvatarInitials JSDoc mentions the narration

• botAvatarInitials.perActivity.html: per-activity initials in scan mode, carousel, arrow keys, and live region

• accessibleName.simple.html, accessibleName.activityStatus.sendFailed.html: the time is narrated only after the message is sent

• I have added tests and executed them locally

• I have updated CHANGELOG.md

• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[Eugene (OEvgeny)]

I'll check back tomorrow on this with real SR running

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Eugene (OEvgeny)]

[William Wong (compulim)]

Consider this signature instead.

useLocalizeActivityGreetingAlt(): (activity: WebChatActivity) => readonly [string];

I think we can derive fromUser from the activity.

[Eugene (OEvgeny)]

Done in 5617ee0: useLocalizeActivityGreetingAlt(): (activity) => readonly [string] derives the sender from the activity (also user transcripts in voice conversations, as StackedLayout does).

[William Wong (compulim)]

Suggested change

	{
	...styleOptions,
	...activity?.channelData?.webChat?.styleOptions
	}
	Object.freeze({
	...styleOptions,
	...activity?.channelData?.webChat?.styleOptions
	})

[Eugene (OEvgeny)]

Applied in d6671e3.