diff --git a/CHANGELOG.md b/CHANGELOG.md index 33924543b4..00357e3188 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -43,6 +43,7 @@ Breaking changes in this release: ### Added +- Resolves screen reader not announcing when a message is being sent. Added live region narration of `Sending message.` via a new `LiveRegionSendSending` component, by [@isherstneva](https://github.com/isherstneva) - (Experimental) Added pre-chat message with starter prompts in Fluent UI, in PR [#5255](https://github.com/microsoft/BotFramework-WebChat/issues/5255) and [#5263](https://github.com/microsoft/BotFramework-WebChat/issues/5263), by [@compulim](https://github.com/compulim) - (Experimental) Added `isPrimary` props to Fluent UI send box. When set, will wire up with `useSendBoxValue` and works with starter prompts in pre-chat message, in PR [#5257](https://github.com/microsoft/BotFramework-WebChat/issues/5257), by [@compulim](https://github.com/compulim) - (Experimental) Expand Fluent theme support to activities and transcript, in PR [#5258](https://github.com/microsoft/BotFramework-WebChat/pull/5258), by [@OEvgeny](https://github.com/OEvgeny) diff --git a/__tests__/html2/accessibility/liveRegion/activityStatus.sendSending.html b/__tests__/html2/accessibility/liveRegion/activityStatus.sendSending.html new file mode 100644 index 0000000000..f275a1d0ae --- /dev/null +++ b/__tests__/html2/accessibility/liveRegion/activityStatus.sendSending.html @@ -0,0 +1,50 @@ + + + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.html.snap-1.png index 51f9948cab..8b33919f4a 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.speakProperty.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.speakProperty.html.snap-1.png index da300154f3..07c5ab8883 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.speakProperty.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.speakProperty.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/animationCard.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/animationCard.html.snap-1.png index b094550b31..29959d308e 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/animationCard.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/animationCard.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/audio.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/audio.html.snap-1.png index 1dc8722302..ba7d6f37fc 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/audio.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/audio.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/audioCard.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/audioCard.html.snap-1.png index eb1b9ea0ea..17c5e9e338 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/audioCard.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/audioCard.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/file.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/file.html.snap-1.png index bbd0d69d39..1665a1ca2f 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/file.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/file.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/heroCard.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/heroCard.html.snap-1.png index ac248f5880..143c21a451 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/heroCard.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/heroCard.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/image.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/image.html.snap-1.png index 7e37043637..fd6d05b724 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/image.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/image.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/receiptCard.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/receiptCard.html.snap-1.png index 5aa17ca070..a4e300a2fa 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/receiptCard.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/receiptCard.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/signInCard.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/signInCard.html.snap-1.png index 846ff53dd4..b21db684fe 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/signInCard.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/signInCard.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/thumbnailCard.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/thumbnailCard.html.snap-1.png index f9eba824f1..ca3c26c109 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/thumbnailCard.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/thumbnailCard.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/unknownCard.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/unknownCard.html.snap-1.png index e7ddd240d4..9382d78fe1 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/unknownCard.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/unknownCard.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/video.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/video.html.snap-1.png index 52694a1c36..f0c591f224 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/video.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/video.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/videoCard.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/videoCard.html.snap-1.png index c49f4ada47..a51490a18b 100644 Binary files a/__tests__/html2/accessibility/liveRegion/attachment/videoCard.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/attachment/videoCard.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-1.png index b332206bf2..f20a5e7686 100644 Binary files a/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-1.png and b/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-2.png b/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-2.png index 8bdaa88475..8e1eb74a35 100644 Binary files a/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-2.png and b/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-2.png differ diff --git a/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-3.png b/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-3.png index d2b9b8d54a..3addc956cb 100644 Binary files a/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-3.png and b/__tests__/html2/accessibility/liveRegion/newMessages.html.snap-3.png differ diff --git a/__tests__/html2/accessibility/sendBox/alertEmptyMessage.multilineTextBox.enter.html.snap-3.png b/__tests__/html2/accessibility/sendBox/alertEmptyMessage.multilineTextBox.enter.html.snap-3.png index db9b32a0e8..e2948ec87d 100644 Binary files a/__tests__/html2/accessibility/sendBox/alertEmptyMessage.multilineTextBox.enter.html.snap-3.png and b/__tests__/html2/accessibility/sendBox/alertEmptyMessage.multilineTextBox.enter.html.snap-3.png differ diff --git a/__tests__/html2/accessibility/sendBox/alertEmptyMessage.sendButton.html.snap-3.png b/__tests__/html2/accessibility/sendBox/alertEmptyMessage.sendButton.html.snap-3.png index 4d967b1446..afef0e0094 100644 Binary files a/__tests__/html2/accessibility/sendBox/alertEmptyMessage.sendButton.html.snap-3.png and b/__tests__/html2/accessibility/sendBox/alertEmptyMessage.sendButton.html.snap-3.png differ diff --git a/__tests__/html2/accessibility/sendBox/alertEmptyMessage.singleLineTextBox.enter.html.snap-3.png b/__tests__/html2/accessibility/sendBox/alertEmptyMessage.singleLineTextBox.enter.html.snap-3.png index 3c2b5d8382..310315d765 100644 Binary files a/__tests__/html2/accessibility/sendBox/alertEmptyMessage.singleLineTextBox.enter.html.snap-3.png and b/__tests__/html2/accessibility/sendBox/alertEmptyMessage.singleLineTextBox.enter.html.snap-3.png differ diff --git a/__tests__/html2/fluentTheme/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html.snap-3.png b/__tests__/html2/fluentTheme/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html.snap-3.png index d8fb76b394..50c42123cc 100644 Binary files a/__tests__/html2/fluentTheme/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html.snap-3.png and b/__tests__/html2/fluentTheme/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html.snap-3.png differ diff --git a/__tests__/html2/fluentTheme/accessibility.sendBox.alertEmptyMessage.sendButton.html.snap-3.png b/__tests__/html2/fluentTheme/accessibility.sendBox.alertEmptyMessage.sendButton.html.snap-3.png index 27faecf3f9..b5cf75de1e 100644 Binary files a/__tests__/html2/fluentTheme/accessibility.sendBox.alertEmptyMessage.sendButton.html.snap-3.png and b/__tests__/html2/fluentTheme/accessibility.sendBox.alertEmptyMessage.sendButton.html.snap-3.png differ diff --git a/packages/api/src/localization/en-US.json b/packages/api/src/localization/en-US.json index 7e22ba4c18..2ac6157f48 100644 --- a/packages/api/src/localization/en-US.json +++ b/packages/api/src/localization/en-US.json @@ -189,6 +189,8 @@ "TRANSCRIPT_LIVE_REGION_SUGGESTED_ACTIONS_WITH_ACCESS_KEY_LABEL_ALT": "Message has suggested actions. Press $1 to select them.", "_TRANSCRIPT_LIVE_REGION_SUGGESTED_ACTIONS_WITH_ACCESS_KEY_LABEL_ALT.comment": "$1 will be \"ACCESS_KEY_ALT\".", "TRANSCRIPT_LIVE_REGION_SEND_FAILED_ALT": "Failed to send message.", + "TRANSCRIPT_LIVE_REGION_SEND_SENDING_ALT": "Sending message.", + "_TRANSCRIPT_LIVE_REGION_SEND_SENDING_ALT.comment": "This is for screen reader. When the user sends a message, the live region will announce this string to indicate the message is being sent.", "TRANSCRIPT_LIVE_REGION_NEW_MESSAGES_ALT": "New messages available. Press $1 to focus the \"$2\" button.", "_TRANSCRIPT_LIVE_REGION_NEW_MESSAGES_ALT.comment": "$1 will be \"ACCESS_KEY_ALT\".", "TRANSCRIPT_MORE_MESSAGES": "More messages", diff --git a/packages/component/src/Transcript/LiveRegion/SendSending.tsx b/packages/component/src/Transcript/LiveRegion/SendSending.tsx new file mode 100755 index 0000000000..66f291d30a --- /dev/null +++ b/packages/component/src/Transcript/LiveRegion/SendSending.tsx @@ -0,0 +1,70 @@ +import { hooks } from 'botframework-webchat-api'; +import { memo, useMemo } from 'react'; + +import usePrevious from '../../hooks/internal/usePrevious'; +import { useLiveRegion } from '../../providers/LiveRegionTwin'; +import { SENDING } from '../../types/internal/SendStatus'; +import isPresentational from './isPresentational'; + +const { useGetActivityByKey, useLocalizer, useSendStatusByActivityKey } = hooks; + +/** + * React component to on-demand narrate "Sending message." at the end of the live region. + * + * When the user sends a message the activity enters the "sending" state before the server acknowledges it. + * The visual "Sending" indicator is rendered next to the activity, but that text is not inside an ARIA + * live region and is therefore not announced by screen readers. + * + * This component watches for activities that newly enter the `sending` state and queues the localized + * "Sending message." string into the polite live region so assistive technologies announce it. + * + * Presentational activities (e.g. `event` or `typing`) are excluded to reduce noise. + */ +const LiveRegionSendSending = () => { + const [sendStatusByActivityKey] = useSendStatusByActivityKey(); + const getActivityByKey = useGetActivityByKey(); + const localize = useLocalizer(); + + /** + * Set of keys of outgoing and non-presentational activities that are currently being sent. + */ + const activityKeysOfSending = useMemo>( + () => + Array.from(sendStatusByActivityKey).reduce( + (activityKeysOfSending, [key, sendStatus]) => + sendStatus === SENDING && !isPresentational(getActivityByKey(key)) + ? activityKeysOfSending.add(key) + : activityKeysOfSending, + new Set() + ), + [getActivityByKey, sendStatusByActivityKey] + ); + + /** Returns localized "Sending message." */ + const liveRegionSendSendingAlt = localize('TRANSCRIPT_LIVE_REGION_SEND_SENDING_ALT'); + + const prevActivityKeysOfSending = usePrevious(activityKeysOfSending); + + /** True, if one or more non-presentational activities newly entered the "sending" state, otherwise false. */ + const hasNewSending = useMemo(() => { + if (activityKeysOfSending === prevActivityKeysOfSending) { + return false; + } + + for (const key of activityKeysOfSending.keys()) { + if (!prevActivityKeysOfSending.has(key)) { + return true; + } + } + + return false; + }, [activityKeysOfSending, prevActivityKeysOfSending]); + + useLiveRegion(() => hasNewSending && liveRegionSendSendingAlt, [hasNewSending, liveRegionSendSendingAlt]); + + return null; +}; + +LiveRegionSendSending.displayName = 'LiveRegionSendSending'; + +export default memo(LiveRegionSendSending); diff --git a/packages/component/src/Transcript/LiveRegionTranscript.tsx b/packages/component/src/Transcript/LiveRegionTranscript.tsx index a56adb2524..c2c2475479 100644 --- a/packages/component/src/Transcript/LiveRegionTranscript.tsx +++ b/packages/component/src/Transcript/LiveRegionTranscript.tsx @@ -9,6 +9,7 @@ import useLocalizeAccessKey from '../hooks/internal/useLocalizeAccessKey'; import useSuggestedActionsAccessKey from '../hooks/internal/useSuggestedActionsAccessKey'; import { useQueueStaticElement } from '../providers/LiveRegionTwin'; import LiveRegionSendFailed from './LiveRegion/SendFailed'; +import LiveRegionSendSending from './LiveRegion/SendSending'; import isPresentational from './LiveRegion/isPresentational'; import useTypistNames from './useTypistNames'; @@ -130,7 +131,12 @@ const LiveRegionTranscript = ({ activityElementMapRef }: LiveRegionTranscriptPro useMemo(() => typingIndicator && queueStaticElement(typingIndicator), [queueStaticElement, typingIndicator]); - return ; + return ( + + + + + ); }; LiveRegionTranscript.displayName = 'LiveRegionTranscript';