botframework-webchat-component 4.14.1 → 4.15.2-main.20220413.af6e8a3

package/src/Transcript/LiveRegionTranscript.tsx

@@ -0,0 +1,196 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import random from 'math-random';
+import React, { useEffect, useMemo, useRef } from 'react';
+import type { FC, RefObject, VFC } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+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 useTypistNames from './useTypistNames';
+
+import type { ActivityElementMap } from './types';
+
+const { useGetKeyByActivity, useLocalizer, useStyleOptions } = hooks;
+
+const ROOT_STYLE = {
+  '&.webchat__live-region-transcript': {
+    '& .webchat__live-region-transcript__interactive-note, & .webchat__live-region-transcript__text-element': {
+      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: WebChatActivity): boolean {
+  if (activity.type !== 'message') {
+    return;
+  }
+
+  const { channelData } = 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, WebChatActivity>;
+
+type LiveRegionTranscriptCoreProps = {
+  activityElementMapRef: RefObject<ActivityElementMap>;
+};
+
+const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityElementMapRef }) => {
+  const [flattenedActivityTree] = useActivityTreeWithRenderer({ flat: true });
+  const [typistNames] = useTypistNames();
+  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 typingIndicator =
+    !!typistNames.length &&
+    localize(
+      typistNames.length > 1 ? 'TYPING_INDICATOR_MULTIPLE_TEXT' : 'TYPING_INDICATOR_SINGLE_TEXT',
+      typistNames[0]
+    );
+
+  const renderingActivities = useMemo<Readonly<RenderingActivities>>(
+    () =>
+      Object.freeze(
+        flattenedActivityTree.reduce<RenderingActivities>(
+          (intermediate, { activity }) => intermediate.set(getKeyByActivity(activity), activity),
+          new Map<string, WebChatActivity>()
+        )
+      ),
+    [flattenedActivityTree, getKeyByActivity]
+  );
+
+  const prevRenderingActivitiesRef = useRef<Readonly<RenderingActivities>>();
+
+  useEffect(() => {
+    const { current: prevRenderingActivities } = prevRenderingActivitiesRef;
+    const appendedActivities: { activity: WebChatActivity; 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
+  ]);
+
+  useEffect(() => {
+    typingIndicator && queueStaticElement(typingIndicator);
+  }, [queueStaticElement, typingIndicator]);
+
+  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"
+      textElementClassName="webchat__live-region-transcript__text-element"
+    >
+      <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,84 @@
+import { hooks } from 'botframework-webchat-api';
+import { useEffect, useMemo, useState } from 'react';
+import type { RefObject } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+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: WebChatActivity, 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.type === 'message' ? activity.attachments?.length || 0 : 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];
+}

package/src/Transcript/useTypistNames.ts

@@ -0,0 +1,37 @@
+import { hooks } from 'botframework-webchat-api';
+import { useEffect, useRef } from 'react';
+
+const { useActiveTyping } = hooks;
+
+function arrayEquals<T>(x: readonly T[], y: readonly T[]): boolean {
+  return x.length === y.length && x.every((value, index) => y[+index] === value);
+}
+
+/** Gets names of users who are actively typing, sorted by the time they started typing. */
+export default function useTypistNames(): readonly [readonly string[]] {
+  const [activeTyping] = useActiveTyping();
+  const prevTypistNamesStateRef = useRef<readonly [readonly string[]]>(
+    Object.freeze([Object.freeze([] as string[])]) as [readonly string[]]
+  );
+
+  const activeTypingFromOthersValues = Object.values(activeTyping).filter(({ role }) => role !== 'user');
+
+  // Sort the list by the first typist.
+  const sortedActiveTypingFromOthersValues = activeTypingFromOthersValues.sort(({ at: x }, { at: y }) => x - y);
+
+  const typistNamesState: readonly [readonly string[]] = Object.freeze([
+    Object.freeze(sortedActiveTypingFromOthersValues.map(({ name }) => name))
+  ]) as readonly [readonly string[]];
+
+  const { current: prevTypistNamesState } = prevTypistNamesStateRef;
+
+  const nextTypistNamesState = arrayEquals(typistNamesState[0], prevTypistNamesState[0])
+    ? prevTypistNamesState
+    : typistNamesState;
+
+  useEffect(() => {
+    prevTypistNamesStateRef.current = nextTypistNamesState;
+  }, [prevTypistNamesStateRef, nextTypistNamesState]);
+
+  return nextTypistNamesState;
+}

package/src/Utils/{AccessibleButton.js → AccessibleButton.tsx}

@@ -1,10 +1,19 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
 import PropTypes from 'prop-types';
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, MouseEventHandler, ReactNode, useRef } from 'react';
 
 const PREVENT_DEFAULT_HANDLER = event => event.preventDefault();
 
+type AccessibleButtonProps = {
+  'aria-hidden'?: boolean;
+  children?: ReactNode;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  tabIndex?: number;
+  type: 'button';
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
 // Differences between <button> and <AccessibleButton>:
 // - Disable behavior
 //   - When the widget is disabled
@@ -23,8 +32,8 @@ const PREVENT_DEFAULT_HANDLER = event => event.preventDefault();
 //   - aria-disabled="true" is the source of truth
 // - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
 
-const AccessibleButton = forwardRef(
-  ({ 'aria-hidden': ariaHidden, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
+const AccessibleButton = forwardRef<HTMLButtonElement, AccessibleButtonProps>(
+  ({ 'aria-hidden': ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
     const targetRef = useRef();
 
     const ref = forwardedRef || targetRef;
@@ -38,13 +47,16 @@ const AccessibleButton = forwardRef(
         tabIndex={disabled ? -1 : tabIndex}
         {...props}
         type="button"
-      />
+      >
+        {children}
+      </button>
     );
   }
 );
 
 AccessibleButton.defaultProps = {
   'aria-hidden': undefined,
+  children: undefined,
   disabled: undefined,
   onClick: undefined,
   tabIndex: undefined
@@ -54,9 +66,12 @@ AccessibleButton.displayName = 'AccessibleButton';
 
 AccessibleButton.propTypes = {
   'aria-hidden': PropTypes.bool,
+  children: PropTypes.any,
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
   tabIndex: PropTypes.number,
+  // TypeScript class is not mappable to PropTypes.oneOf(['button'])
+  // @ts-ignore
   type: PropTypes.oneOf(['button']).isRequired
 };
 

package/src/Utils/{FocusRedirector.js → FocusRedirector.tsx}

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
 
+import type { FC, MutableRefObject } from 'react';
+
 // This is an element, when focused, will send the focus to the ref specified in "redirectRef".
 // Although the focus is being redirected, browser will scroll this redirector element into view.
 
@@ -10,28 +12,39 @@ import React, { useCallback } from 'react';
 // When this focus redirector is put inside a scrollable container, you may want to resize or reposition
 // it to prevent unintentional scroll done by the browser default behavior.
 
-const FocusRedirector = ({ className, onFocus, redirectRef }) => {
-  const handleFocus = useCallback(() => {
-    const { current } = redirectRef;
+type FocusRedirectorProps = {
+  className?: string;
+  onFocus?: () => void;
+  redirectRef?: MutableRefObject<HTMLElement>;
+};
 
-    current && current.focus();
+const FocusRedirector: FC<FocusRedirectorProps> = ({ className, onFocus, redirectRef }) => {
+  const handleFocus = useCallback(() => {
+    redirectRef?.current?.focus();
     onFocus && onFocus();
   }, [onFocus, redirectRef]);
 
-  return <div className={className} onFocus={handleFocus} tabIndex={0} />;
+  // For NVDA, we should set aria-hidden="true".
+  // When using NVDA in browse mode, press up/down arrow keys will focus on this redirector.
+  // This redirector is designed to capture TAB only and should not react on browse mode.
+  // However, reacting with browse mode is currently okay. Just better to leave it alone.
+  return <div aria-hidden="true" className={className} onFocus={handleFocus} tabIndex={0} />;
 };
 
 FocusRedirector.defaultProps = {
   className: undefined,
-  onFocus: undefined
+  onFocus: undefined,
+  redirectRef: undefined
 };
 
 FocusRedirector.propTypes = {
   className: PropTypes.string,
   onFocus: PropTypes.func,
+  // PropTypes is not fully compatible with TypeScript.
+  // @ts-ignore
   redirectRef: PropTypes.shape({
-    current: PropTypes.any
-  }).isRequired
+    current: PropTypes.instanceOf(HTMLElement)
+  })
 };
 
 export default FocusRedirector;

package/src/Utils/InlineMarkdown.js

@@ -1,6 +1,7 @@
 /* eslint react/no-danger: "off" */
 
 import { hooks } from 'botframework-webchat-api';
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo } from 'react';
 import updateIn from 'simple-update-in';
@@ -89,7 +90,13 @@ const InlineMarkdown = ({ children, onReference, references }) => {
 
   const html = useMemo(() => {
     const tree = markdownIt.parseInline(children, {
-      references: references.reduce((references, key) => ({ ...references, [key]: { href: `#${refToHref[key]}` } }), {})
+      references: references.reduce(
+        (references, key) =>
+          // Mitigated through denylisting.
+          // eslint-disable-next-line security/detect-object-injection
+          isForbiddenPropertyName(key) ? references : { ...references, [key]: { href: `#${refToHref[key]}` } },
+        {}
+      )
     });
 
     // Turn "<a href="#retry">Retry</a>" into "<button data-ref="retry" type="button">Retry</button>"
@@ -104,7 +111,16 @@ const InlineMarkdown = ({ children, onReference, references }) => {
 
       const href = event.target.getAttribute('data-markdown-href');
 
-      href && onReference && onReference(createCustomEvent('reference', { data: hrefToRef[href] }));
+      href &&
+        onReference &&
+        onReference(
+          createCustomEvent(
+            'reference',
+            // Mitigated through denylisting.
+            // eslint-disable-next-line security/detect-object-injection
+            isForbiddenPropertyName(href) ? {} : { data: hrefToRef[href] }
+          )
+        );
     },
     [hrefToRef, onReference]
   );

package/src/Utils/TypeFocusSink/inputtableKey.ts

@@ -10,6 +10,10 @@ const INPUTTABLE_KEY = {
   Subtract: '-' // Numpad subtract key
 };
 
+const INPUTTABLE_KEY_KEYS = Object.keys(INPUTTABLE_KEY);
+
 export default function inputtableKey(key) {
-  return key.length === 1 ? key : INPUTTABLE_KEY[key];
+  // Mitigated through allowlisting.
+  // eslint-disable-next-line security/detect-object-injection
+  return key.length === 1 ? key : INPUTTABLE_KEY_KEYS.includes(key) ? INPUTTABLE_KEY[key] : undefined;
 }

package/src/Utils/createCustomEvent.js

@@ -1,3 +1,5 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
 export default function createCustomEvent(name, eventInitDict) {
   let event;
 
@@ -10,7 +12,11 @@ export default function createCustomEvent(name, eventInitDict) {
   }
 
   Object.entries(eventInitDict).forEach(([key, value]) => {
-    event[key] = value;
+    if (!isForbiddenPropertyName(key)) {
+      // Mitigated through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
+      event[key] = value;
+    }
   });
 
   return event;

package/src/Utils/detectBrowser.js

@@ -1,6 +1,7 @@
 const { userAgent } = navigator;
 
 // not DRY so that list can be alphabetical
+const android = /Linux; Android/u.test(userAgent);
 const chromium = !/Edge\//u.test(userAgent) && /Chrome\//u.test(userAgent);
 const edgeAnaheim = /Edg\//u.test(userAgent);
 const edgeUWP = /Edge\//u.test(userAgent);
@@ -10,4 +11,4 @@ const ie11 = /Trident\/7.0/u.test(userAgent);
 const chrome = chromium && !edgeAnaheim;
 const safari = !(chrome || edgeUWP || ie11 || firefox);
 
-export { chrome, chromium, edgeAnaheim, edgeUWP, firefox, ie11, safari };
+export { android, chrome, chromium, edgeAnaheim, edgeUWP, firefox, ie11, safari };

package/src/Utils/findAncestor.ts

@@ -0,0 +1,12 @@
+export default function findAncestor(
+  node: HTMLElement,
+  predicate: (ancestor: HTMLElement) => boolean
+): HTMLElement | undefined {
+  let ancestor = node;
+
+  while ((ancestor = ancestor.parentElement)) {
+    if (predicate(ancestor)) {
+      return ancestor;
+    }
+  }
+}

package/src/Utils/getActivityUniqueId.ts

@@ -0,0 +1,5 @@
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+export default function getActivityUniqueId(activity: WebChatActivity): string {
+  return activity?.channelData?.clientActivityID || activity?.id;
+}

package/src/Utils/intersectionOf.ts

@@ -0,0 +1,14 @@
+/**
+ * Intersects 2 or more arrays and return an array of values which are common to all of them.
+ */
+export default function intersectionOf<T>(arg0: readonly T[], ...args: readonly (readonly T[])[]): T[] {
+  return args.reduce<T[]>(
+    (interim: T[], arg: readonly T[]) =>
+      interim.reduce((intersection: T[], item: T) => {
+        arg.includes(item) && intersection.push(item);
+
+        return intersection;
+      }, []),
+    [...arg0]
+  );
+}

package/src/Utils/isZeroOrPositive.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns `true`, if the number is zero or positive, otherwise, `false`, including minus zeroes.
+ */
+export default function isZeroOrPositive(value: number): boolean {
+  // This will handle minus-zero.
+  return 1 / value >= 0;
+}

package/src/Utils/mapMap.js

@@ -1,6 +1,12 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
 export default function mapMap(map, mapper) {
   return Object.entries(map).reduce((result, [key, value]) => {
-    result[key] = mapper(value, key);
+    if (!isForbiddenPropertyName(key)) {
+      // Mitigated through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
+      result[key] = mapper(value, key);
+    }
 
     return result;
   }, {});

package/src/Utils/scrollIntoViewWithBlockNearest.ts

@@ -0,0 +1,20 @@
+import computeScrollIntoView from 'compute-scroll-into-view';
+
+/**
+ * Calls `targetElement.scrollIntoView({ block: 'nearest' })`.
+ *
+ * If browser do not support options for `scrollIntoView`, fallback to polyfill.
+ */
+export default function scrollIntoViewWithBlockNearest(targetElement: HTMLElement): void {
+  // Checks if `scrollIntoView` support options or not.
+  // - https://github.com/Modernizr/Modernizr/issues/1568#issuecomment-419457972
+  // - https://stackoverflow.com/questions/46919627/is-it-possible-to-test-for-scrollintoview-browser-compatibility
+  if ('scrollBehavior' in document.documentElement.style) {
+    return targetElement.scrollIntoView({ block: 'nearest' });
+  }
+
+  // We should only move transcript scrollable, and not other scrollable, such as document.body which is from the hosting page.
+  const [action] = computeScrollIntoView(targetElement, { block: 'nearest' });
+
+  action.el.scrollTop = action.top;
+}

package/src/Utils/shallowEquals.js

@@ -1,3 +1,5 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
 export default function shallowEquals(x, y) {
   if (x === y) {
     return true;
@@ -6,5 +8,10 @@ export default function shallowEquals(x, y) {
   const xKeys = Object.keys(x);
   const yKeys = Object.keys(y);
 
-  return xKeys.length === yKeys.length && xKeys.every(key => yKeys.includes(key) && x[key] === y[key]);
+  return (
+    xKeys.length === yKeys.length &&
+    // Mitigated through denylisting.
+    // eslint-disable-next-line security/detect-object-injection
+    xKeys.every(key => !isForbiddenPropertyName(key) && yKeys.includes(key) && x[key] === y[key])
+  );
 }

package/src/Utils/supportPseudoClass.ts

@@ -0,0 +1,17 @@
+// This function is adopted from https://stackoverflow.com/questions/8531940/how-to-detect-if-browser-support-specified-css-pseudo-class
+export default function supportPseudoClass(pseudoClass: string, nonce?: string): boolean {
+  const styleElement = document.createElement('style');
+
+  nonce && styleElement.setAttribute('nonce', nonce);
+  document.head.appendChild(styleElement);
+
+  try {
+    styleElement.sheet.insertRule('html' + pseudoClass + '{}', 0);
+
+    return true;
+  } catch (error) {
+    return false;
+  } finally {
+    document.head.removeChild(styleElement);
+  }
+}

package/src/Utils/{tabbableElements.js → tabbableElements.ts}

@@ -1,11 +1,12 @@
-export default function tabbableElements(element) {
+export default function tabbableElements(element?: HTMLElement): HTMLElement[] {
   // This is an incomplete list, due to the complexity of testing for every scenario.
   // For full-list, please refer to https://allyjs.io/data-tables/focusable.html
-  const candidates = element.querySelectorAll(
-    'a[href], area[href], audio[controls], button:not(:disabled), iframe, input:not(:disabled), keygen, select:not(:disabled), summary, textarea:not(:disabled), video[controls], [contenteditable], [tabindex]'
-  );
+  const candidates: ArrayLike<HTMLElement> =
+    element?.querySelectorAll(
+      'a[href], area[href], audio[controls], button:not(:disabled), iframe, input:not(:disabled), keygen, select:not(:disabled), summary, textarea:not(:disabled), video[controls], [contenteditable], [tabindex]'
+    ) || [];
 
-  return [].filter.call(candidates, element => {
+  return ([] as HTMLElement[]).filter.call(candidates, (element: HTMLElement) => {
     const tabIndexAttribute = element.attributes.getNamedItem('tabindex');
 
     if (tabIndexAttribute && tabIndexAttribute.specified) {