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

package/src/Toast/createToastMiddleware.tsx

@@ -6,7 +6,10 @@ import React from 'react';
 import BasicToast from '../BasicToast';
 
 function createToastMiddleware(): ToastMiddleware {
-  return () => () => ({ notification }) => <BasicToast notification={notification} />;
+  return () =>
+    () =>
+    ({ notification }) =>
+      <BasicToast notification={notification} />;
 }
 
 export default createToastMiddleware;

package/src/Transcript/ActivityRow.tsx

@@ -0,0 +1,123 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useRef } from 'react';
+import type { MouseEventHandler, PropsWithChildren } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+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: WebChatActivity }>;
+
+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 = {
+  // PropTypes cannot fully capture TypeScript type.
+  // @ts-ignore
+  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,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import type { RefObject, VFC } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+import ScreenReaderText from '../ScreenReaderText';
+import useActivityAccessibleName from './useActivityAccessibleName';
+
+type ActivityTextAltProps = {
+  activity: WebChatActivity;
+  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;

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;