botframework-webchat-component 4.13.0 → 4.15.0

package/src/Transcript/FocusTrap.tsx

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import React, { Fragment, useCallback, useRef } from 'react';
+
+import type { FC, KeyboardEventHandler, PropsWithChildren } from 'react';
+
+import FocusRedirector from '../Utils/FocusRedirector';
+import tabbableElements from '../Utils/tabbableElements';
+import useValueRef from '../hooks/internal/useValueRef';
+
+type FocusTrapProps = PropsWithChildren<{
+  onFocus: () => void;
+  onLeave: () => void;
+}>;
+
+const FocusTrap: FC<FocusTrapProps> = ({ children, onFocus, onLeave }) => {
+  const bodyRef = useRef<HTMLDivElement>();
+  const onLeaveRef = useValueRef<() => void>(onLeave);
+
+  const handleBodyKeyDown: KeyboardEventHandler = useCallback(
+    event => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+
+        onLeaveRef.current?.();
+      }
+    },
+    [onLeaveRef]
+  );
+
+  const handleFirstSentinelFocus: () => void = useCallback(() => {
+    const focusables = tabbableElements(bodyRef.current);
+
+    focusables[focusables.length - 1]?.focus();
+  }, [bodyRef]);
+
+  const handleLastSentinelFocus: () => void = useCallback(
+    () => tabbableElements(bodyRef.current)[0]?.focus(),
+    [bodyRef]
+  );
+
+  return (
+    <Fragment>
+      <FocusRedirector onFocus={handleFirstSentinelFocus} />
+      <div onFocus={onFocus} onKeyDown={handleBodyKeyDown} ref={bodyRef}>
+        {children}
+      </div>
+      <FocusRedirector onFocus={handleLastSentinelFocus} />
+    </Fragment>
+  );
+};
+
+FocusTrap.defaultProps = {
+  children: undefined,
+  onFocus: undefined
+};
+
+FocusTrap.propTypes = {
+  children: PropTypes.any,
+  onFocus: PropTypes.func,
+  onLeave: PropTypes.func.isRequired
+};
+
+export default FocusTrap;

package/src/Transcript/KeyboardHelp.tsx

@@ -0,0 +1,282 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useCallback, useState } from 'react';
+
+import type { VFC } from 'react';
+
+import useFocus from '../hooks/useFocus';
+import useStyleSet from '../hooks/useStyleSet';
+
+const { useLocalizer } = hooks;
+
+type NotesBodyProps = {
+  header: string;
+  text: string;
+};
+
+const Notes: VFC<NotesBodyProps> = ({ header, text }) => (
+  <section className="webchat__keyboard-help__notes">
+    <h4 className="webchat__keyboard-help__notes-header">{header}</h4>
+    {text.split('\n').map((line, index) => (
+      // We are splitting lines into paragraphs, index as key is legitimate here.
+      // eslint-disable-next-line react/no-array-index-key
+      <p className="webchat__keyboard-help__notes-text" key={index}>
+        {line}
+      </p>
+    ))}
+  </section>
+);
+
+Notes.propTypes = {
+  header: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
+};
+
+const KeyboardHelp: VFC<{}> = () => {
+  const [{ keyboardHelp: keyboardHelpStyleSet }] = useStyleSet();
+  const [shown, setShown] = useState(false);
+  const focus = useFocus();
+  const localize = useLocalizer();
+
+  const chatHistoryAccessItemsInMessageBody = localize('KEYBOARD_HELP_CHAT_HISTORY_ACCESS_ITEMS_IN_MESSAGE_BODY');
+  const chatHistoryAccessItemsInMessageHeader = localize('KEYBOARD_HELP_CHAT_HISTORY_ACCESS_ITEMS_IN_MESSAGE_HEADER');
+  const chatHistoryHeader = localize('KEYBOARD_HELP_CHAT_HISTORY_HEADER');
+  const chatHistoryLeaveMessageBody = localize('KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_BODY');
+  const chatHistoryLeaveMessageHeader = localize('KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_HEADER');
+  const chatHistoryMoveBetweenItemsBody = localize('KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_ITEMS_BODY');
+  const chatHistoryMoveBetweenItemsHeader = localize('KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_ITEMS_HEADER');
+  const chatHistoryMoveBetweenMessagesBody = localize('KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_MESSAGES_BODY');
+  const chatHistoryMoveBetweenMessagesHeader = localize('KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_MESSAGES_HEADER');
+  const chatWindowBodyDoActionBody = localize('KEYBOARD_HELP_CHAT_WINDOW_BODY_DO_ACTION_BODY');
+  const chatWindowBodyDoActionHeader = localize('KEYBOARD_HELP_CHAT_WINDOW_BODY_DO_ACTION_HEADER');
+  const chatWindowBodyMoveBetweenItemsBody = localize('KEYBOARD_HELP_CHAT_WINDOW_BODY_MOVE_BETWEEN_ITEMS_BODY');
+  const chatWindowBodyMoveBetweenItemsHeader = localize('KEYBOARD_HELP_CHAT_WINDOW_BODY_MOVE_BETWEEN_ITEMS_HEADER');
+  const chatWindowHeader = localize('KEYBOARD_HELP_CHAT_WINDOW_HEADER');
+  const closeButtonAlt = localize('KEYBOARD_HELP_CLOSE_BUTTON_ALT');
+  const header = localize('KEYBOARD_HELP_HEADER');
+
+  const handleBlur = useCallback(
+    // We will keep the help screen shown if the blur is caused by switch app.
+    // When switch app, `document.activeElement` will remains.
+    event => document.activeElement !== event.target && setShown(false),
+    [setShown]
+  );
+
+  const handleCloseButtonClick = useCallback(() => focus('main'), [focus]);
+
+  const handleFocusWithin = useCallback(() => setShown(true), [setShown]);
+
+  const handleKeyPress = useCallback(
+    ({ key }) => (key === 'Enter' || key === 'Escape' || key === ' ') && focus('main'),
+    [focus]
+  );
+
+  return (
+    <div
+      // When the dialog is not shown, "aria-hidden" helps to prevent scan mode from able to scan the content of the dialog.
+      aria-hidden={!shown}
+      className={classNames('webchat__keyboard-help', keyboardHelpStyleSet + '', {
+        'webchat__keyboard-help--shown': shown
+      })}
+      onBlur={handleBlur}
+      onFocus={handleFocusWithin}
+      onKeyPress={handleKeyPress}
+      role="dialog"
+      tabIndex={0}
+    >
+      <div className="webchat__keyboard-help__box">
+        <header>
+          <h2 className="webchat__keyboard-help__header">{header}</h2>
+        </header>
+        <button
+          aria-label={closeButtonAlt}
+          className="webchat__keyboard-help__close-button"
+          onClick={handleCloseButtonClick}
+          onFocus={handleFocusWithin}
+          tabIndex={-1}
+          type="button"
+        >
+          <svg
+            className="webchat__keyboard-help__close-button_image"
+            role="presentation"
+            viewBox="0 0 2048 2048"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M2048 136l-888 888 888 888-136 136-888-888-888 888L0 1912l888-888L0 136 136 0l888 888L1912 0l136 136z" />
+          </svg>
+        </button>
+        <article className="webchat__keyboard-help__section">
+          <header>
+            <h3 className="webchat__keyboard-help__sub-header">{chatWindowHeader}</h3>
+          </header>
+          <div className="webchat__keyboard-help__two-panes">
+            <svg
+              className="webchat__keyboard-help__image webchat__keyboard-help__image--light"
+              fill="none"
+              height="200"
+              role="presentation"
+              viewBox="0 0 121 200"
+              width="121"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect height="199" stroke="#C8C6C4" width="109" x="0.5" y="0.5" />
+              <rect height="156" stroke="#323130" width="102" x="3.5" y="4.5" />
+              <rect height="42" stroke="#C8C6C4" width="93" x="7.5" y="8.5" />
+              <rect height="99" stroke="#C8C6C4" width="93" x="7.5" y="55.5" />
+              <rect height="13" stroke="#323130" width="102" x="3.5" y="182.5" />
+              <rect height="13" stroke="#323130" width="32" x="3.5" y="165.5" />
+              <rect height="13" stroke="#323130" width="32" x="38.5" y="165.5" />
+              <rect height="13" stroke="#323130" width="32" x="73.5" y="165.5" />
+              <path
+                clipRule="evenodd"
+                d="M116.328 5.64645C116.524 5.45118 116.84 5.45118 117.036 5.64645L120.218 8.82843C120.413 9.02369 120.413 9.34027 120.218 9.53553C120.022 9.7308 119.706 9.7308 119.51 9.53553L117.182 7.20711V192.793L119.51 190.464C119.706 190.269 120.022 190.269 120.218 190.464C120.413 190.66 120.413 190.976 120.218 191.172L117.036 194.354C116.84 194.549 116.524 194.549 116.328 194.354L113.146 191.172C112.951 190.976 112.951 190.66 113.146 190.464C113.342 190.269 113.658 190.269 113.854 190.464L116.182 192.793V7.20711L113.854 9.53553C113.658 9.7308 113.342 9.7308 113.146 9.53553C112.951 9.34027 112.951 9.02369 113.146 8.82843L116.328 5.64645Z"
+                fill="#323130"
+                fillRule="evenodd"
+              />
+            </svg>
+            <svg
+              className="webchat__keyboard-help__image webchat__keyboard-help__image--dark"
+              fill="none"
+              height="200"
+              role="presentation"
+              viewBox="0 0 121 200"
+              width="121"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect height="199" stroke="#484644" width="109" x="0.5" y="0.5" />
+              <rect height="156" stroke="#F3F2F1" width="102" x="3.5" y="4.5" />
+              <rect height="42" stroke="#484644" width="93" x="7.5" y="8.5" />
+              <rect height="99" stroke="#484644" width="93" x="7.5" y="55.5" />
+              <rect height="13" stroke="#F3F2F1" width="102" x="3.5" y="182.5" />
+              <rect height="13" stroke="#F3F2F1" width="32" x="3.5" y="165.5" />
+              <rect height="13" stroke="#F3F2F1" width="32" x="38.5" y="165.5" />
+              <rect height="13" stroke="#F3F2F1" width="32" x="73.5" y="165.5" />
+              <path
+                clipRule="evenodd"
+                d="M116.328 5.64645C116.524 5.45118 116.84 5.45118 117.036 5.64645L120.218 8.82843C120.413 9.02369 120.413 9.34027 120.218 9.53553C120.022 9.7308 119.706 9.7308 119.51 9.53553L117.182 7.20711V192.793L119.51 190.464C119.706 190.269 120.022 190.269 120.218 190.464C120.413 190.66 120.413 190.976 120.218 191.172L117.036 194.354C116.84 194.549 116.524 194.549 116.328 194.354L113.146 191.172C112.951 190.976 112.951 190.66 113.146 190.464C113.342 190.269 113.658 190.269 113.854 190.464L116.182 192.793V7.20711L113.854 9.53553C113.658 9.7308 113.342 9.7308 113.146 9.53553C112.951 9.34027 112.951 9.02369 113.146 8.82843L116.328 5.64645Z"
+                fill="#F3F2F1"
+                fillRule="evenodd"
+              />
+            </svg>
+            <svg
+              className="webchat__keyboard-help__image webchat__keyboard-help__image--high-contrast"
+              fill="none"
+              height="200"
+              role="presentation"
+              viewBox="0 0 121 200"
+              width="121"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect height="199" stroke="white" width="109" x="0.5" y="0.5" />
+              <rect height="156" stroke="white" width="102" x="3.5" y="4.5" />
+              <rect height="42" stroke="white" width="93" x="7.5" y="8.5" />
+              <rect height="99" stroke="white" width="93" x="7.5" y="55.5" />
+              <rect height="13" stroke="white" width="102" x="3.5" y="182.5" />
+              <rect height="13" stroke="white" width="32" x="3.5" y="165.5" />
+              <rect height="13" stroke="white" width="32" x="38.5" y="165.5" />
+              <rect height="13" stroke="white" width="32" x="73.5" y="165.5" />
+              <path
+                clipRule="evenodd"
+                d="M116.328 5.64645C116.524 5.45118 116.84 5.45118 117.036 5.64645L120.218 8.82843C120.413 9.02369 120.413 9.34027 120.218 9.53553C120.022 9.7308 119.706 9.7308 119.51 9.53553L117.182 7.20711V192.793L119.51 190.464C119.706 190.269 120.022 190.269 120.218 190.464C120.413 190.66 120.413 190.976 120.218 191.172L117.036 194.354C116.84 194.549 116.524 194.549 116.328 194.354L113.146 191.172C112.951 190.976 112.951 190.66 113.146 190.464C113.342 190.269 113.658 190.269 113.854 190.464L116.182 192.793V7.20711L113.854 9.53553C113.658 9.7308 113.342 9.7308 113.146 9.53553C112.951 9.34027 112.951 9.02369 113.146 8.82843L116.328 5.64645Z"
+                fill="white"
+                fillRule="evenodd"
+              />
+            </svg>
+            <div className="webchat__keyboard-help__notes-pane">
+              <Notes header={chatWindowBodyMoveBetweenItemsHeader} text={chatWindowBodyMoveBetweenItemsBody} />
+              <Notes header={chatWindowBodyDoActionHeader} text={chatWindowBodyDoActionBody} />
+            </div>
+          </div>
+        </article>
+        <article className="webchat__keyboard-help__section">
+          <header>
+            <h3 className="webchat__keyboard-help__header">{chatHistoryHeader}</h3>
+          </header>
+          <div className="webchat__keyboard-help__two-panes">
+            <svg
+              className="webchat__keyboard-help__image webchat__keyboard-help__image--light"
+              fill="none"
+              height="200"
+              role="presentation"
+              viewBox="0 0 121 200"
+              width="121"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect height="199" stroke="#C8C6C4" width="109" x="0.5" y="0.5" />
+              <rect height="156" stroke="#323130" width="102" x="3.5" y="4.5" />
+              <rect height="42" stroke="#323130" strokeDasharray="2 2" width="93" x="7.5" y="8.5" />
+              <rect height="99" stroke="#323130" strokeDasharray="2 2" width="93" x="7.5" y="55.5" />
+              <rect height="13" stroke="#C8C6C4" width="102" x="3.5" y="182.5" />
+              <rect height="13" stroke="#C8C6C4" width="32" x="3.5" y="165.5" />
+              <rect height="13" stroke="#C8C6C4" width="32" x="38.5" y="165.5" />
+              <rect height="13" stroke="#C8C6C4" width="32" x="73.5" y="165.5" />
+              <path
+                clipRule="evenodd"
+                d="M116.328 7.64645C116.524 7.45118 116.84 7.45118 117.036 7.64645L120.218 10.8284C120.413 11.0237 120.413 11.3403 120.218 11.5355C120.022 11.7308 119.706 11.7308 119.51 11.5355L117.182 9.20711V156.793L119.51 154.464C119.706 154.269 120.022 154.269 120.218 154.464C120.413 154.66 120.413 154.976 120.218 155.172L117.036 158.354C116.84 158.549 116.524 158.549 116.328 158.354L113.146 155.172C112.951 154.976 112.951 154.66 113.146 154.464C113.342 154.269 113.658 154.269 113.854 154.464L116.182 156.793V9.20711L113.854 11.5355C113.658 11.7308 113.342 11.7308 113.146 11.5355C112.951 11.3403 112.951 11.0237 113.146 10.8284L116.328 7.64645Z"
+                fill="#323130"
+                fillRule="evenodd"
+              />
+            </svg>
+            <svg
+              className="webchat__keyboard-help__image webchat__keyboard-help__image--dark"
+              fill="none"
+              height="200"
+              role="presentation"
+              viewBox="0 0 121 200"
+              width="121"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect height="199" stroke="#484644" width="109" x="0.5" y="0.5" />
+              <rect height="156" stroke="#F3F2F1" width="102" x="3.5" y="4.5" />
+              <rect height="42" stroke="#F3F2F1" strokeDasharray="2 2" width="93" x="7.5" y="8.5" />
+              <rect height="99" stroke="#F3F2F1" strokeDasharray="2 2" width="93" x="7.5" y="55.5" />
+              <rect height="13" stroke="#484644" width="102" x="3.5" y="182.5" />
+              <rect height="13" stroke="#484644" width="32" x="3.5" y="165.5" />
+              <rect height="13" stroke="#484644" width="32" x="38.5" y="165.5" />
+              <rect height="13" stroke="#484644" width="32" x="73.5" y="165.5" />
+              <path
+                clipRule="evenodd"
+                d="M116.328 7.64645C116.524 7.45118 116.84 7.45118 117.036 7.64645L120.218 10.8284C120.413 11.0237 120.413 11.3403 120.218 11.5355C120.022 11.7308 119.706 11.7308 119.51 11.5355L117.182 9.20711V156.793L119.51 154.464C119.706 154.269 120.022 154.269 120.218 154.464C120.413 154.66 120.413 154.976 120.218 155.172L117.036 158.354C116.84 158.549 116.524 158.549 116.328 158.354L113.146 155.172C112.951 154.976 112.951 154.66 113.146 154.464C113.342 154.269 113.658 154.269 113.854 154.464L116.182 156.793V9.20711L113.854 11.5355C113.658 11.7308 113.342 11.7308 113.146 11.5355C112.951 11.3403 112.951 11.0237 113.146 10.8284L116.328 7.64645Z"
+                fill="#F3F2F1"
+                fillRule="evenodd"
+              />
+            </svg>
+            <svg
+              className="webchat__keyboard-help__image webchat__keyboard-help__image--high-contrast"
+              fill="none"
+              height="200"
+              role="presentation"
+              viewBox="0 0 121 200"
+              width="121"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect height="199" stroke="white" width="109" x="0.5" y="0.5" />
+              <rect height="156" stroke="white" width="102" x="3.5" y="4.5" />
+              <rect height="42" stroke="white" strokeDasharray="2 2" width="93" x="7.5" y="8.5" />
+              <rect height="99" stroke="white" strokeDasharray="2 2" width="93" x="7.5" y="55.5" />
+              <rect height="13" stroke="white" width="102" x="3.5" y="182.5" />
+              <rect height="13" stroke="white" width="32" x="3.5" y="165.5" />
+              <rect height="13" stroke="white" width="32" x="38.5" y="165.5" />
+              <rect height="13" stroke="white" width="32" x="73.5" y="165.5" />
+              <path
+                clipRule="evenodd"
+                d="M116.328 7.64645C116.524 7.45118 116.84 7.45118 117.036 7.64645L120.218 10.8284C120.413 11.0237 120.413 11.3403 120.218 11.5355C120.022 11.7308 119.706 11.7308 119.51 11.5355L117.182 9.20711V156.793L119.51 154.464C119.706 154.269 120.022 154.269 120.218 154.464C120.413 154.66 120.413 154.976 120.218 155.172L117.036 158.354C116.84 158.549 116.524 158.549 116.328 158.354L113.146 155.172C112.951 154.976 112.951 154.66 113.146 154.464C113.342 154.269 113.658 154.269 113.854 154.464L116.182 156.793V9.20711L113.854 11.5355C113.658 11.7308 113.342 11.7308 113.146 11.5355C112.951 11.3403 112.951 11.0237 113.146 10.8284L116.328 7.64645Z"
+                fill="white"
+                fillRule="evenodd"
+              />
+            </svg>
+            <div className="webchat__keyboard-help__notes-pane">
+              <Notes header={chatHistoryMoveBetweenMessagesHeader} text={chatHistoryMoveBetweenMessagesBody} />
+              <Notes header={chatHistoryAccessItemsInMessageHeader} text={chatHistoryAccessItemsInMessageBody} />
+              <Notes header={chatHistoryMoveBetweenItemsHeader} text={chatHistoryMoveBetweenItemsBody} />
+              <Notes header={chatHistoryLeaveMessageHeader} text={chatHistoryLeaveMessageBody} />
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+  );
+};
+
+export default KeyboardHelp;

package/src/Transcript/LiveRegionTranscript.tsx

@@ -0,0 +1,181 @@
+import { hooks } from 'botframework-webchat-api';
+import PropTypes from 'prop-types';
+import random from 'math-random';
+import React, { useEffect, useMemo, useRef } from 'react';
+
+import type { DirectLineActivity } from 'botframework-webchat-core';
+import type { FC, RefObject, VFC } from 'react';
+
+import LiveRegionTwinComposer from '../providers/LiveRegionTwin/LiveRegionTwinComposer';
+import ScreenReaderActivity from '../ScreenReaderActivity';
+import tabbableElements from '../Utils/tabbableElements';
+import useActivityTreeWithRenderer from '../providers/ActivityTree/useActivityTreeWithRenderer';
+import useQueueStaticElement from '../providers/LiveRegionTwin/useQueueStaticElement';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+
+import type { ActivityElementMap } from './types';
+import classNames from 'classnames';
+
+const { useGetKeyByActivity, useLocalizer, useStyleOptions } = hooks;
+
+const ROOT_STYLE = {
+  '&.webchat__live-region-transcript': {
+    '& .webchat__live-region-transcript__interactive_note': {
+      color: 'transparent',
+      height: 1,
+      overflow: 'hidden',
+      position: 'absolute',
+      top: 0,
+      whiteSpace: 'nowrap',
+      width: 1
+    }
+  }
+};
+
+/**
+ * Checks if the rendering activity is presentational or not. Returns `true` if presentational, otherwise, `false`.
+ *
+ * Presentational activity, will be rendered visually but not going through screen reader.
+ */
+function isPresentational(activity: DirectLineActivity): boolean {
+  const { channelData }: { attachments?: []; channelData?: { messageBack?: { displayText?: string } }; text?: string } =
+    activity;
+
+  // "Fallback text" includes both message text and narratives for attachments.
+  // Emptying out "fallback text" essentially mute for both message and attachments.
+  const fallbackText = channelData?.['webchat:fallback-text'];
+
+  if (typeof fallbackText === 'string') {
+    return !fallbackText;
+  }
+
+  // If there are "displayText" (MessageBack), "text", or any attachments, there are something to narrate.
+  return !(channelData?.messageBack?.displayText || activity.text || activity.attachments?.length);
+}
+
+type RenderingActivities = Map<string, DirectLineActivity>;
+
+type LiveRegionTranscriptCoreProps = {
+  activityElementMapRef: RefObject<ActivityElementMap>;
+};
+
+const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityElementMapRef }) => {
+  const [flattenedActivityTree] = useActivityTreeWithRenderer({ flat: true });
+  const getKeyByActivity = useGetKeyByActivity();
+  const localize = useLocalizer();
+  const queueStaticElement = useQueueStaticElement();
+
+  const liveRegionInteractiveLabelAlt = localize('TRANSCRIPT_LIVE_REGION_INTERACTIVE_LABEL_ALT');
+  const liveRegionInteractiveWithLinkLabelAlt = localize('TRANSCRIPT_LIVE_REGION_INTERACTIVE_WITH_LINKS_LABEL_ALT');
+
+  const renderingActivities = useMemo<Readonly<RenderingActivities>>(
+    () =>
+      Object.freeze(
+        flattenedActivityTree.reduce<RenderingActivities>(
+          (intermediate, { activity }) => intermediate.set(getKeyByActivity(activity), activity),
+          new Map<string, DirectLineActivity>()
+        )
+      ),
+    [flattenedActivityTree, getKeyByActivity]
+  );
+
+  const prevRenderingActivitiesRef = useRef<Readonly<RenderingActivities>>();
+
+  useEffect(() => {
+    const { current: prevRenderingActivities } = prevRenderingActivitiesRef;
+    const appendedActivities: { activity: DirectLineActivity; key: string }[] = [];
+
+    // Bottom-up, find activities which are recently appended (i.e. new activity will have a new key).
+    // We only consider new activities added to the bottom of the chat history.
+    // Based on how `aria-relevant="additions"` works, activities that are updated, deleted, or reordered, should be ignored.
+    for (const [key, activity] of Array.from(renderingActivities.entries()).reverse()) {
+      if (prevRenderingActivities?.has(key)) {
+        break;
+      }
+
+      appendedActivities.unshift({ activity, key });
+
+      isPresentational(activity) || queueStaticElement(<ScreenReaderActivity activity={activity} />);
+    }
+
+    const hasNewLink = appendedActivities.some(({ key }) => activityElementMapRef.current.get(key)?.querySelector('a'));
+
+    const hasNewWidget = appendedActivities.some(
+      ({ key }) =>
+        !!tabbableElements(
+          activityElementMapRef.current.get(key)?.querySelector('.webchat__basic-transcript__activity-body')
+        ).length
+    );
+
+    if (hasNewLink || hasNewWidget) {
+      // eslint-disable-next-line no-magic-numbers
+      const labelId = `webchat__live-region-transcript__interactive_note--${random().toString(36).substr(2, 5)}`;
+
+      queueStaticElement(
+        // Inside ARIA live region:
+        // - Edge + Narrator:
+        //   - It read if `aria-labelledby` or `aria-label` is set;
+        //   - It read nothing if `aria-labelledby` or `aria-label` are not set (in this case, it read "note").
+        // - Safari + VoiceOver and Chrome + NVDA:
+        //   - They read its content and ignore `aria-labelledby` or `aria-label`
+        //   - They will not read if it is simply <div aria-label="Something" /> without content (self-closing tag).
+        // For best compatibility, we need both `aria-labelledby` and contented <div>.
+        <div
+          aria-atomic="true"
+          aria-labelledby={labelId}
+          className="webchat__live-region-transcript__interactive_note"
+          role="note"
+        >
+          {/* "id" is required for "aria-activedescendant" */}
+          {/* eslint-disable-next-line react/forbid-dom-props */}
+          <span id={labelId}>{hasNewLink ? liveRegionInteractiveWithLinkLabelAlt : liveRegionInteractiveLabelAlt}</span>
+        </div>
+      );
+    }
+
+    prevRenderingActivitiesRef.current = renderingActivities;
+  }, [
+    activityElementMapRef,
+    getKeyByActivity,
+    liveRegionInteractiveLabelAlt,
+    liveRegionInteractiveWithLinkLabelAlt,
+    prevRenderingActivitiesRef,
+    queueStaticElement,
+    renderingActivities
+  ]);
+
+  return null;
+};
+
+type LiveRegionTranscriptProps = {
+  activityElementMapRef: RefObject<ActivityElementMap>;
+};
+
+const LiveRegionTranscript: VFC<LiveRegionTranscriptProps> = ({ activityElementMapRef }) => {
+  const [{ internalLiveRegionFadeAfter }] = useStyleOptions();
+  const localize = useLocalizer();
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+
+  const transcriptRoleDescription = localize('TRANSCRIPT_ARIA_ROLE_ALT');
+
+  return (
+    <LiveRegionTwinComposer
+      aria-roledescription={transcriptRoleDescription}
+      className={classNames('webchat__live-region-transcript', rootClassName)}
+      fadeAfter={internalLiveRegionFadeAfter}
+      role="log"
+    >
+      <LiveRegionTranscriptCore activityElementMapRef={activityElementMapRef} />
+    </LiveRegionTwinComposer>
+  );
+};
+
+LiveRegionTranscript.propTypes = {
+  // PropTypes cannot be fully expressed in TypeScript.
+  // @ts-ignore
+  activityElementMapRef: PropTypes.shape({
+    current: PropTypes.instanceOf(Map)
+  }).isRequired
+};
+
+export default LiveRegionTranscript;

package/src/Transcript/types.ts

@@ -0,0 +1 @@
+export type ActivityElementMap = Map<string, HTMLElement>;

package/src/Transcript/useActivityAccessibleName.ts

@@ -0,0 +1,85 @@
+import { hooks } from 'botframework-webchat-api';
+import { useEffect, useMemo, useState } from 'react';
+
+import type { DirectLineActivity } from 'botframework-webchat-core';
+import type { RefObject } from 'react';
+
+import activityAltText from '../Utils/activityAltText';
+import tabbableElements from '../Utils/tabbableElements';
+import useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';
+import useValueRef from '../hooks/internal/useValueRef';
+
+enum InteractiveType {
+  LINK,
+  WIDGET
+}
+
+const { useAvatarForBot, useLocalizer } = hooks;
+
+const ACTIVITY_NUM_ATTACHMENTS_ALT_IDS = {
+  few: 'ACTIVITY_NUM_ATTACHMENTS_FEW_ALT',
+  many: 'ACTIVITY_NUM_ATTACHMENTS_MANY_ALT',
+  one: 'ACTIVITY_NUM_ATTACHMENTS_ONE_ALT',
+  other: 'ACTIVITY_NUM_ATTACHMENTS_OTHER_ALT',
+  two: 'ACTIVITY_NUM_ATTACHMENTS_TWO_ALT'
+};
+
+export default function useActivityAccessibleName(activity: DirectLineActivity, bodyRef: RefObject<HTMLElement>) {
+  const [{ initials: botInitials }] = useAvatarForBot();
+  const [interactiveType, setInteractiveType] = useState<InteractiveType | false>(false);
+  const fromSelf = activity.from?.role === 'user';
+  const localize = useLocalizer();
+  const localizeWithPlural = useLocalizer({ plural: true });
+  const numAttachments = activity.attachments?.length || 0;
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
+
+  const activityInteractiveAlt = localize('ACTIVITY_INTERACTIVE_LABEL_ALT'); // "Click to interact."
+  const activityInteractiveWithLinkAlt = localize('ACTIVITY_INTERACTIVE_WITH_LINKS_LABEL_ALT'); // "Click to interact."
+  const greetingAlt = useMemo(
+    () =>
+      (fromSelf ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')).replace(
+        /\s{2,}/gu,
+        ' '
+      ),
+    [botInitials, fromSelf, localize]
+  );
+  const interactiveTypeRef = useValueRef(interactiveType);
+  const messageTextAlt = useMemo(
+    () => activityAltText(activity, renderMarkdownAsHTML),
+    [activity, renderMarkdownAsHTML]
+  );
+  const numAttachmentsAlt = useMemo(
+    () => (numAttachments ? localizeWithPlural(ACTIVITY_NUM_ATTACHMENTS_ALT_IDS, numAttachments) : ''),
+    [localizeWithPlural, numAttachments]
+  );
+
+  const accessibleName = useMemo(
+    // We are concatenating in a single string for Safari. If we split it up, Safari will only narrate the first section.
+    () =>
+      `${greetingAlt} ${messageTextAlt} ${numAttachmentsAlt} ${
+        interactiveType === InteractiveType.LINK
+          ? activityInteractiveWithLinkAlt
+          : interactiveType === InteractiveType.WIDGET
+          ? activityInteractiveAlt
+          : ''
+      }`,
+    [
+      activityInteractiveAlt,
+      activityInteractiveWithLinkAlt,
+      greetingAlt,
+      interactiveType,
+      messageTextAlt,
+      numAttachmentsAlt
+    ]
+  );
+
+  useEffect(() => {
+    const hasLinks = !!bodyRef.current?.querySelector('a');
+    const hasWidgets = !!tabbableElements(bodyRef.current).length;
+
+    interactiveTypeRef.current !== hasWidgets &&
+      setInteractiveType(hasLinks ? InteractiveType.LINK : hasWidgets ? InteractiveType.WIDGET : false);
+  }, [bodyRef, interactiveTypeRef, setInteractiveType]);
+
+  return [accessibleName];
+}