botframework-webchat-component 4.13.0 → 4.15.0

package/src/Styles/StyleSet/SuggestedAction.ts

@@ -7,76 +7,163 @@ export default function createSuggestedActionStyle({
   paddingRegular,
   paddingWide,
   primaryFont,
-  suggestedActionBackground,
+  suggestedActionBorderRadius,
+
+  suggestedActionBackgroundColor,
   suggestedActionBorderColor,
   suggestedActionBorderStyle,
   suggestedActionBorderWidth,
-  suggestedActionBorderRadius,
-  suggestedActionImageHeight,
   suggestedActionTextColor,
-  suggestedActionDisabledBackground,
-  suggestedActionDisabledBorderColor,
-  suggestedActionDisabledBorderStyle,
-  suggestedActionDisabledBorderWidth,
-  suggestedActionDisabledTextColor,
+
+  suggestedActionBackgroundColorOnActive,
+  suggestedActionBorderColorOnActive,
+  suggestedActionBorderStyleOnActive,
+  suggestedActionBorderWidthOnActive,
+  suggestedActionTextColorOnActive,
+
+  suggestedActionBackgroundColorOnDisabled,
+  suggestedActionBorderColorOnDisabled,
+  suggestedActionBorderStyleOnDisabled,
+  suggestedActionBorderWidthOnDisabled,
+  suggestedActionTextColorOnDisabled,
+
+  suggestedActionBackgroundColorOnFocus,
+  suggestedActionBorderColorOnFocus,
+  suggestedActionBorderStyleOnFocus,
+  suggestedActionBorderWidthOnFocus,
+  suggestedActionTextColorOnFocus,
+
+  suggestedActionBackgroundColorOnHover,
+  suggestedActionBorderColorOnHover,
+  suggestedActionBorderStyleOnHover,
+  suggestedActionBorderWidthOnHover,
+  suggestedActionTextColorOnHover,
+
+  suggestedActionKeyboardFocusIndicatorBorderColor,
+  suggestedActionKeyboardFocusIndicatorBorderRadius,
+  suggestedActionKeyboardFocusIndicatorBorderStyle,
+  suggestedActionKeyboardFocusIndicatorBorderWidth,
+  suggestedActionKeyboardFocusIndicatorInset,
+
   suggestedActionHeight,
+  suggestedActionImageHeight,
   suggestedActionsStackedLayoutButtonMaxHeight,
-  subtle
+  subtle,
+
+  // Deprecated
+  suggestedActionActiveBackground,
+  suggestedActionBackground,
+  suggestedActionDisabledBackground,
+  suggestedActionFocusBackground,
+  suggestedActionHoverBackground
 }: StrictStyleOptions) {
   return {
     '&.webchat__suggested-action': {
-      display: 'flex',
+      alignItems: 'center',
+      background: suggestedActionBackground, // Deprecated as of 4.15.0. Remove on or after 2021-09-16.
+      backgroundColor: suggestedActionBackgroundColor,
+      borderColor: suggestedActionBorderColor || accent,
+      borderRadius: suggestedActionBorderRadius,
+      borderStyle: suggestedActionBorderStyle,
+      borderWidth: suggestedActionBorderWidth,
+      color: suggestedActionTextColor || accent,
+      fontFamily: primaryFont,
+      fontSize: 'inherit',
+      height: suggestedActionHeight,
+      justifyContent: 'center',
       maxWidth: '100%',
+      outline: 0,
+      paddingLeft: paddingWide,
+      paddingRight: paddingWide,
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      width: '100%',
+
+      // Order of style preferences (based on effort of user gesture): disabled > active > hover > focus.
+      // Keyboard focus indicator styles applied by :focus-visible do not conflict with :active/:hover/:focus, so it is not included here.
+      '&:disabled, &[aria-disabled="true"]': {
+        background: suggestedActionDisabledBackground,
+        backgroundColor: suggestedActionBackgroundColorOnDisabled,
+        borderColor: suggestedActionBorderColorOnDisabled,
+        borderStyle: suggestedActionBorderStyleOnDisabled,
+        borderWidth: suggestedActionBorderWidthOnDisabled,
+        color: suggestedActionTextColorOnDisabled || subtle
+      },
 
-      '& .webchat__suggested-action__button': {
-        alignItems: 'center',
-        borderRadius: suggestedActionBorderRadius,
-        fontFamily: primaryFont,
-        fontSize: 'inherit',
-        height: suggestedActionHeight,
-        justifyContent: 'center',
-        maxWidth: '100%',
-        paddingLeft: paddingWide,
-        paddingRight: paddingWide,
-        whiteSpace: 'nowrap',
-        width: '100%',
-
-        '&:disabled, &[aria-disabled="true"]': {
-          background: suggestedActionDisabledBackground || suggestedActionBackground,
-          borderColor: suggestedActionDisabledBorderColor,
-          borderStyle: suggestedActionDisabledBorderStyle,
-          borderWidth: suggestedActionDisabledBorderWidth,
-          color: suggestedActionDisabledTextColor || subtle
+      '&:not(:disabled):not([aria-disabled="true"])': {
+        '&:active': {
+          background: suggestedActionActiveBackground,
+          backgroundColor: suggestedActionBackgroundColorOnActive,
+          borderColor: suggestedActionBorderColorOnActive,
+          borderStyle: suggestedActionBorderStyleOnActive,
+          borderWidth: suggestedActionBorderWidthOnActive,
+          color: suggestedActionTextColorOnActive
         },
 
-        '&:not(:disabled):not([aria-disabled="true"])': {
-          background: suggestedActionBackground,
-          borderColor: suggestedActionBorderColor || accent,
-          borderStyle: suggestedActionBorderStyle,
-          borderWidth: suggestedActionBorderWidth,
-          color: suggestedActionTextColor || accent
+        '&:not(:active)': {
+          '&:hover': {
+            background: suggestedActionHoverBackground,
+            backgroundColor: suggestedActionBackgroundColorOnHover,
+            borderColor: suggestedActionBorderColorOnHover,
+            borderStyle: suggestedActionBorderStyleOnHover,
+            borderWidth: suggestedActionBorderWidthOnHover,
+            color: suggestedActionTextColorOnHover
+          },
+
+          '&:not(:hover)': {
+            '&:focus': {
+              background: suggestedActionFocusBackground,
+              backgroundColor: suggestedActionBackgroundColorOnFocus,
+              borderColor: suggestedActionBorderColorOnFocus,
+              borderStyle: suggestedActionBorderStyleOnFocus,
+              borderWidth: suggestedActionBorderWidthOnFocus,
+              color: suggestedActionTextColorOnFocus
+            }
+          }
         }
       },
 
-      '& .webchat__suggested-action__image': {
-        height: suggestedActionImageHeight
+      // On unsupported browser, :focus-visible and :not(:focus-visible) is always false.
+      // And it will turn the whole CSS selector ":unsupported, .truthy" to false.
+      '&:not(:focus-visible) .webchat__suggested-action__keyboard-focus-indicator': {
+        display: 'none'
+      },
+
+      '&:not(.webchat__suggested-action--focus-visible) .webchat__suggested-action__keyboard-focus-indicator': {
+        display: 'none'
+      },
+
+      '&:not(.webchat__suggested-action--rtl) .webchat__suggested-action__image + .webchat__suggested-action__text': {
+        paddingLeft: paddingRegular
+      },
+
+      '&.webchat__suggested-action--rtl .webchat__suggested-action__image + .webchat__suggested-action__text': {
+        paddingRight: paddingRegular
       },
 
-      '& .webchat__suggested-action--wrapping': {
+      '&.webchat__suggested-action--wrapping': {
         height: 'auto',
         maxHeight: suggestedActionsStackedLayoutButtonMaxHeight || '100%',
         minHeight:
-          typeof suggestedActionsStackedLayoutButtonMaxHeight === 'number'
+          typeof suggestedActionsStackedLayoutButtonMaxHeight === 'number' && typeof suggestedActionHeight === 'number'
             ? Math.min(suggestedActionsStackedLayoutButtonMaxHeight, suggestedActionHeight)
             : suggestedActionHeight
       },
 
-      '&:not(.webchat__suggested-action--rtl) .webchat__suggested-action__image + .webchat__suggested-action__text': {
-        paddingLeft: paddingRegular
+      '& .webchat__suggested-action__image': {
+        height: suggestedActionImageHeight
       },
 
-      '&.webchat__suggested-action--rtl .webchat__suggested-action__image + .webchat__suggested-action__text': {
-        paddingRight: paddingRegular
+      '& .webchat__suggested-action__keyboard-focus-indicator': {
+        borderColor: suggestedActionKeyboardFocusIndicatorBorderColor,
+        borderRadius: suggestedActionKeyboardFocusIndicatorBorderRadius,
+        borderStyle: suggestedActionKeyboardFocusIndicatorBorderStyle,
+        borderWidth: suggestedActionKeyboardFocusIndicatorBorderWidth,
+        bottom: suggestedActionKeyboardFocusIndicatorInset,
+        left: suggestedActionKeyboardFocusIndicatorInset,
+        position: 'absolute',
+        right: suggestedActionKeyboardFocusIndicatorInset,
+        top: suggestedActionKeyboardFocusIndicatorInset
       }
     }
   };

package/src/Styles/StyleSet/SuggestedActions.ts

@@ -25,7 +25,7 @@ export default function createSuggestedActionsStyle({
           paddingBottom: paddingRegular / 2,
           paddingTop: paddingRegular / 2,
 
-          '& .webchat__suggested-actions__button': {
+          '& .webchat__suggested-actions__item-box': {
             paddingBottom: paddingRegular / 2,
             paddingLeft: paddingRegular / 2,
             paddingRight: paddingRegular / 2,
@@ -113,13 +113,16 @@ export default function createSuggestedActionsStyle({
           paddingTop: paddingRegular / 2
         },
 
-        '& .webchat__suggested-actions__item': {
+        '& .webchat__suggested-actions__flow-item-box': {
           maxWidth: '100%',
           overflow: 'hidden' // This is required in IE11
         },
 
-        '& .webchat__suggested-actions__button': {
-          padding: paddingRegular / 2
+        '& .webchat__suggested-actions__item-box': {
+          paddingBottom: paddingRegular / 2,
+          paddingLeft: paddingRegular / 2,
+          paddingRight: paddingRegular / 2,
+          paddingTop: paddingRegular / 2
         }
       },
 
@@ -133,7 +136,7 @@ export default function createSuggestedActionsStyle({
           paddingTop: paddingRegular / 2
         },
 
-        '& .webchat__suggested-actions__button': {
+        '& .webchat__suggested-actions__item-box': {
           paddingBottom: paddingRegular / 2,
           paddingLeft: paddingRegular / 2,
           paddingRight: paddingRegular / 2,
@@ -152,6 +155,11 @@ export default function createSuggestedActionsStyle({
           display: 'flex',
           whiteSpace: 'normal'
         }
+      },
+
+      '& .webchat__suggested-actions__item-box': {
+        display: 'flex',
+        maxWidth: '100%'
       }
     }
   };

package/src/Styles/createStyleSet.ts

@@ -1,4 +1,3 @@
-/* eslint-disable complexity */
 import { normalizeStyleOptions, StyleOptions } from 'botframework-webchat-api';
 
 import createActivitiesStyle from './StyleSet/Activities';
@@ -9,6 +8,7 @@ import createAvatarStyle from './StyleSet/Avatar';
 import createBasicTranscriptStyle from './StyleSet/BasicTranscript';
 import createBubbleStyle from './StyleSet/Bubble';
 import createCarouselFilmStrip from './StyleSet/CarouselFilmStrip';
+import createCarouselFilmStripAttachment from './StyleSet/CarouselFilmStripAttachment';
 import createCarouselFlipper from './StyleSet/CarouselFlipper';
 import createConnectivityNotification from './StyleSet/ConnectivityNotification';
 import createDictationInterimsStyle from './StyleSet/DictationInterims';
@@ -17,6 +17,7 @@ import createErrorNotificationStyle from './StyleSet/ErrorNotification';
 import createFileContentStyle from './StyleSet/FileContent';
 import createImageAvatarStyle from './StyleSet/ImageAvatar';
 import createInitialsAvatarStyle from './StyleSet/InitialsAvatar';
+import createKeyboardHelpStyle from './StyleSet/KeyboardHelp';
 import createMicrophoneButtonStyle from './StyleSet/MicrophoneButton';
 import createRootStyle from './StyleSet/Root';
 import createScrollToEndButtonStyle from './StyleSet/ScrollToEndButton';
@@ -45,49 +46,51 @@ import createYouTubeContentStyle from './StyleSet/YouTubeContent';
 //       "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
 //       DOM tree may change from time to time, thus, maintaining "styleSet" becomes a constant effort.
 
-export default function createStyleSet(options: StyleOptions) {
-  options = normalizeStyleOptions(options);
+export default function createStyleSet(styleOptions: StyleOptions) {
+  const strictStyleOptions = normalizeStyleOptions(styleOptions);
 
   return {
     activities: createActivitiesStyle(),
-    audioAttachment: createAudioAttachmentStyle(options),
+    audioAttachment: createAudioAttachmentStyle(strictStyleOptions),
     audioContent: createAudioContentStyle(),
-    autoResizeTextArea: createAutoResizeTextAreaStyle(options),
-    avatar: createAvatarStyle(options),
-    basicTranscript: createBasicTranscriptStyle(options),
-    bubble: createBubbleStyle(options),
-    carouselFilmStrip: createCarouselFilmStrip(options),
-    carouselFlipper: createCarouselFlipper(options),
-    connectivityNotification: createConnectivityNotification(options),
-    dictationInterims: createDictationInterimsStyle(options),
-    errorBox: createErrorBoxStyle(options),
-    errorNotification: createErrorNotificationStyle(options),
-    fileContent: createFileContentStyle(options),
-    imageAvatar: createImageAvatarStyle(options),
-    initialsAvatar: createInitialsAvatarStyle(options),
-    microphoneButton: createMicrophoneButtonStyle(options),
-    options: { ...options }, // Cloned to make sure no additional modifications will propagate up.
-    root: createRootStyle(options),
-    scrollToEndButton: createScrollToEndButtonStyle(options),
-    sendBox: createSendBoxStyle(options),
-    sendBoxButton: createSendBoxButtonStyle(options),
-    sendBoxTextBox: createSendBoxTextBoxStyle(options),
-    sendStatus: createSendStatusStyle(options),
-    singleAttachmentActivity: createSingleAttachmentActivityStyle(options),
-    spinnerAnimation: createSpinnerAnimationStyle(options),
-    stackedLayout: createStackedLayoutStyle(options),
-    suggestedAction: createSuggestedActionStyle(options),
-    suggestedActions: createSuggestedActionsStyle(options),
-    textContent: createTextContentStyle(options),
-    toast: createToastStyle(options),
-    toaster: createToasterStyle(options),
-    typingAnimation: createTypingAnimationStyle(options),
-    typingIndicator: createTypingIndicatorStyle(options),
-    uploadButton: createUploadButtonStyle(options),
+    autoResizeTextArea: createAutoResizeTextAreaStyle(strictStyleOptions),
+    avatar: createAvatarStyle(strictStyleOptions),
+    basicTranscript: createBasicTranscriptStyle(strictStyleOptions),
+    bubble: createBubbleStyle(strictStyleOptions),
+    carouselFilmStrip: createCarouselFilmStrip(strictStyleOptions),
+    carouselFilmStripAttachment: createCarouselFilmStripAttachment(strictStyleOptions),
+    carouselFlipper: createCarouselFlipper(strictStyleOptions),
+    connectivityNotification: createConnectivityNotification(strictStyleOptions),
+    dictationInterims: createDictationInterimsStyle(strictStyleOptions),
+    errorBox: createErrorBoxStyle(strictStyleOptions),
+    errorNotification: createErrorNotificationStyle(strictStyleOptions),
+    fileContent: createFileContentStyle(strictStyleOptions),
+    imageAvatar: createImageAvatarStyle(strictStyleOptions),
+    initialsAvatar: createInitialsAvatarStyle(strictStyleOptions),
+    keyboardHelp: createKeyboardHelpStyle(strictStyleOptions),
+    microphoneButton: createMicrophoneButtonStyle(strictStyleOptions),
+    options: { ...strictStyleOptions }, // Cloned to make sure no additional modifications will propagate up.
+    root: createRootStyle(strictStyleOptions),
+    scrollToEndButton: createScrollToEndButtonStyle(strictStyleOptions),
+    sendBox: createSendBoxStyle(strictStyleOptions),
+    sendBoxButton: createSendBoxButtonStyle(strictStyleOptions),
+    sendBoxTextBox: createSendBoxTextBoxStyle(strictStyleOptions),
+    sendStatus: createSendStatusStyle(strictStyleOptions),
+    singleAttachmentActivity: createSingleAttachmentActivityStyle(strictStyleOptions),
+    spinnerAnimation: createSpinnerAnimationStyle(strictStyleOptions),
+    stackedLayout: createStackedLayoutStyle(strictStyleOptions),
+    suggestedAction: createSuggestedActionStyle(strictStyleOptions),
+    suggestedActions: createSuggestedActionsStyle(strictStyleOptions),
+    textContent: createTextContentStyle(strictStyleOptions),
+    toast: createToastStyle(strictStyleOptions),
+    toaster: createToasterStyle(strictStyleOptions),
+    typingAnimation: createTypingAnimationStyle(strictStyleOptions),
+    typingIndicator: createTypingIndicatorStyle(strictStyleOptions),
+    uploadButton: createUploadButtonStyle(strictStyleOptions),
     videoAttachment: createVideoAttachmentStyle(),
-    videoContent: createVideoContentStyle(options),
-    vimeoContent: createVimeoContentStyle(options),
-    warningNotification: createWarningNotificationStyle(options),
-    youTubeContent: createYouTubeContentStyle(options)
+    videoContent: createVideoContentStyle(strictStyleOptions),
+    vimeoContent: createVimeoContentStyle(strictStyleOptions),
+    warningNotification: createWarningNotificationStyle(strictStyleOptions),
+    youTubeContent: createYouTubeContentStyle(strictStyleOptions)
   };
 }

package/src/Styles/mirrorStyle.js

@@ -1,3 +1,5 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
 export default function mirrorStyle(mirrorSelector, styles) {
   const mirrored = {};
 
@@ -7,8 +9,14 @@ export default function mirrorStyle(mirrorSelector, styles) {
         match === 'Left' ? 'Right' : match === 'left' ? 'right' : match === 'Right' ? 'Left' : 'left'
       );
 
-      mirrored[patchedKey] = value;
-    } else {
+      if (!isForbiddenPropertyName(patchedKey)) {
+        // Mitigated through denylisting.
+        // eslint-disable-next-line security/detect-object-injection
+        mirrored[patchedKey] = value;
+      }
+    } else if (!isForbiddenPropertyName(key)) {
+      // Mitigated through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
       mirrored[key] = mirrorStyle('', value);
     }
   }

package/src/Toast/CollapseIcon.js

@@ -2,7 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const CollapseIcon = ({ className }) => (
-  <svg className={(className || '') + ''} height="9" viewBox="0 0 16 9" width="16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={(className || '') + ''}
+    focusable={false}
+    height="9"
+    role="presentation"
+    viewBox="0 0 16 9"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M15.2734 8.97656L8 1.71094L0.726563 8.97656L0.0234375 8.27344L8 0.289062L15.9766 8.27344L15.2734 8.97656Z" />
   </svg>
 );

package/src/Toast/DismissIcon.js

@@ -2,7 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const DismissIcon = ({ className }) => (
-  <svg className={(className || '') + ''} height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={(className || '') + ''}
+    focusable={false}
+    height="14"
+    role="presentation"
+    viewBox="0 0 14 14"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M7.71094 7L13.1016 12.3984L12.3984 13.1016L7 7.71094L1.60156 13.1016L0.898438 12.3984L6.28906 7L0.898438 1.60156L1.60156 0.898438L7 6.28906L12.3984 0.898438L13.1016 1.60156L7.71094 7Z" />
   </svg>
 );

package/src/Toast/ExpandIcon.js

@@ -2,7 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const ExpandIcon = ({ className }) => (
-  <svg className={(className || '') + ''} height="10" viewBox="0 0 16 10" width="16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={(className || '') + ''}
+    focusable={false}
+    height="10"
+    role="presentation"
+    viewBox="0 0 16 10"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M15.1484 0.648437L15.8516 1.35156L8 9.20312L0.148438 1.35156L0.851563 0.648438L8 7.79687L15.1484 0.648437Z" />
   </svg>
 );

package/src/Toast/NotificationIcon.js

@@ -1,4 +1,5 @@
 import { hooks } from 'botframework-webchat-api';
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -17,7 +18,9 @@ const NotificationIcon = ({ className, level }) => {
     warn: localize('TOAST_ALT_WARN')
   };
 
-  const prefix = prefixes[level] || '';
+  // Mitigated through denylisting.
+  // eslint-disable-next-line security/detect-object-injection
+  const prefix = (!isForbiddenPropertyName(level) && prefixes[level]) || '';
 
   return (
     <React.Fragment>

package/src/Toast/createToastMiddleware.tsx

@@ -0,0 +1,15 @@
+/* eslint react/prop-types: "off" */
+
+import { ToastMiddleware } from 'botframework-webchat-api';
+import React from 'react';
+
+import BasicToast from '../BasicToast';
+
+function createToastMiddleware(): ToastMiddleware {
+  return () =>
+    () =>
+    ({ notification }) =>
+      <BasicToast notification={notification} />;
+}
+
+export default createToastMiddleware;

package/src/Transcript/ActivityRow.tsx

@@ -0,0 +1,124 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useRef } from 'react';
+
+import type { DirectLineActivity } from 'botframework-webchat-core';
+import type { MouseEventHandler, PropsWithChildren } from 'react';
+
+import { android } from '../Utils/detectBrowser';
+import FocusTrap from './FocusTrap';
+import ScreenReaderText from '../ScreenReaderText';
+import SpeakActivity from '../Activity/Speak';
+import useActiveDescendantId from '../providers/TranscriptFocus/useActiveDescendantId';
+import useActivityAccessibleName from './useActivityAccessibleName';
+import useFocusByActivityKey from '../providers/TranscriptFocus/useFocusByActivityKey';
+import useGetDescendantIdByActivityKey from '../providers/TranscriptFocus/useGetDescendantIdByActivityKey';
+import useValueRef from '../hooks/internal/useValueRef';
+
+const { useActivityKeysByRead, useGetHasAcknowledgedByActivityKey, useGetKeyByActivity } = hooks;
+
+type ActivityRowProps = PropsWithChildren<{
+  activity: DirectLineActivity;
+}>;
+
+const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, children }, ref) => {
+  const [activeDescendantId] = useActiveDescendantId();
+  const [readActivityKeys] = useActivityKeysByRead();
+  const bodyRef = useRef<HTMLDivElement>();
+  const focusByActivityKey = useFocusByActivityKey();
+  const getKeyByActivity = useGetKeyByActivity();
+  // TODO: [P2] #2858 We should use core/definitions/speakingActivity for this predicate instead
+  const shouldSpeak = activity.channelData?.speak;
+
+  const [accessibleName] = useActivityAccessibleName(activity, bodyRef);
+  const activityKey = getKeyByActivity(activity);
+
+  const acknowledged = useGetHasAcknowledgedByActivityKey()(activityKey);
+  const activityKeyRef = useValueRef<string>(activityKey);
+  const descendantId = useGetDescendantIdByActivityKey()(activityKey);
+  const descendantLabelId = `webchat__basic-transcript__active-descendant-label--${activityKey}`;
+
+  const isActiveDescendant = descendantId === activeDescendantId;
+  const read = readActivityKeys.includes(activityKey);
+
+  const focusSelf = useCallback<(withFocus?: boolean) => void>(
+    (withFocus?: boolean) => focusByActivityKey(activityKeyRef.current, withFocus),
+    [activityKeyRef, focusByActivityKey]
+  );
+
+  // When a child of the activity receives focus, notify the transcript to set the `aria-activedescendant` to this activity.
+  const handleDescendantFocus: () => void = useCallback(() => focusSelf(false), [focusSelf]);
+
+  // When receive Escape key from descendant, focus back to the activity.
+  const handleLeaveFocusTrap = useCallback(() => focusSelf(), [focusSelf]);
+
+  // When the user press UP/DOWN arrow keys, we put a visual focus indicator around the focused activity.
+  // We should do the same for mouse, when the user click on the activity, we should also put a visual focus indicator around the activity.
+  // We are doing it in event capture phase to prevent descendants from stopping event propagation to us.
+  const handleMouseDownCapture: MouseEventHandler = useCallback(() => focusSelf(false), [focusSelf]);
+
+  return (
+    // TODO: [P2] Add `aria-roledescription="message"` for better AX, need localization strings.
+    <article
+      aria-hidden={activity.channelData?.['webchat:fallback-text'] === ''}
+      className={classNames('webchat__basic-transcript__activity', {
+        'webchat__basic-transcript__activity--acknowledged': acknowledged,
+        'webchat__basic-transcript__activity--read': read
+      })}
+      // When NVDA is in browse mode, using up/down arrow key to "browse" will dispatch "click" and "mousedown" events for <article> element (inside <ScreenReaderActivity>).
+      onMouseDownCapture={handleMouseDownCapture}
+      ref={ref}
+    >
+      {/* TODO: [P1] File a crbug for TalkBack. It should not able to read the content twice when scanning. */}
+
+      {/* The following <div> is designed for active descendant only.
+          We want to prevent screen reader from scanning the content that is authored only for active descendant.
+          The specific content should only read when user press UP/DOWN arrow keys to change `aria-activedescendant`.
+          However, Android TalkBack 12.1 is buggy when the there is an element with ID of one of the `aria-activedescendant` potential candidates,
+          TalkBack will narrate the message content twice (i.e. content of `bodyRef`), regardless whether the ID is currently set as `aria-activedescendant` or not.
+          As Android does not support active descendant, we are hiding the whole DOM element altogether. */}
+
+      {!android && (
+        <div
+          aria-labelledby={descendantLabelId}
+          className="webchat__basic-transcript__activity-active-descendant"
+          // "id" is required for "aria-labelledby"
+          // eslint-disable-next-line react/forbid-dom-props
+          id={descendantId}
+          role="article"
+        >
+          <ScreenReaderText aria-hidden={true} id={descendantLabelId} text={accessibleName} />
+        </div>
+      )}
+      {/* Add tests for focus trap */}
+      <FocusTrap onFocus={handleDescendantFocus} onLeave={handleLeaveFocusTrap}>
+        <div className="webchat__basic-transcript__activity-body" ref={bodyRef}>
+          {children}
+        </div>
+      </FocusTrap>
+      {shouldSpeak && <SpeakActivity activity={activity} />}
+      <div
+        className={classNames('webchat__basic-transcript__activity-indicator', {
+          'webchat__basic-transcript__activity-indicator--focus': isActiveDescendant
+        })}
+      />
+    </article>
+  );
+});
+
+ActivityRow.defaultProps = {
+  children: undefined
+};
+
+ActivityRow.propTypes = {
+  activity: PropTypes.shape({
+    channelData: PropTypes.shape({
+      speak: PropTypes.bool,
+      'webchat:fallback-text': PropTypes.string
+    })
+  }).isRequired,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
+};
+
+export default ActivityRow;

package/src/Transcript/ActivityTextAlt.tsx

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import type { DirectLineActivity } from 'botframework-webchat-core';
+import type { RefObject, VFC } from 'react';
+
+import ScreenReaderText from '../ScreenReaderText';
+import useActivityAccessibleName from './useActivityAccessibleName';
+
+type ActivityTextAltProps = {
+  activity: DirectLineActivity;
+  bodyRef: RefObject<HTMLDivElement>;
+  id: string;
+};
+
+const ActivityTextAlt: VFC<ActivityTextAltProps> = ({ activity, bodyRef, id }) => {
+  const [accessibleName] = useActivityAccessibleName(activity, bodyRef);
+
+  return <ScreenReaderText aria-hidden={true} id={id} text={accessibleName} />;
+};
+
+ActivityTextAlt.propTypes = {
+  activity: PropTypes.any.isRequired,
+  // PropTypes is not fully compatible with TypeScript
+  // @ts-ignore
+  bodyRef: PropTypes.shape({
+    current: PropTypes.any
+  }).isRequired,
+  id: PropTypes.string.isRequired
+};
+
+export default ActivityTextAlt;