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

package/src/ScreenReaderActivity.js

@@ -9,7 +9,13 @@ import activityAltText from './Utils/activityAltText';
 import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
 import useRenderMarkdownAsHTML from './hooks/useRenderMarkdownAsHTML';
 
-const { useAvatarForBot, useCreateAttachmentForScreenReaderRenderer, useDateFormatter, useLocalizer } = hooks;
+const {
+  useAvatarForBot,
+  useCreateAttachmentForScreenReaderRenderer,
+  useDateFormatter,
+  useGetKeyByActivity,
+  useLocalizer
+} = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__screen-reader-activity': {
@@ -76,6 +82,7 @@ ScreenReaderAttachments.propTypes = {
 const ScreenReaderActivity = ({ activity, children, id, renderAttachments }) => {
   const [{ initials: botInitials }] = useAvatarForBot();
   const formatDate = useDateFormatter();
+  const getKeyByActivity = useGetKeyByActivity();
   const localize = useLocalizer();
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
@@ -90,18 +97,26 @@ const ScreenReaderActivity = ({ activity, children, id, renderAttachments }) =>
   ).replace(/\s{2,}/gu, ' ');
 
   const timestampAlt = localize('ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT', formatDate(timestamp));
+  const labelId = useMemo(
+    () => `webchat__screen-reader-activity__label-${getKeyByActivity(activity)}`,
+    [activity, getKeyByActivity]
+  );
 
   return (
     <article
       aria-atomic={true}
+      // Narrator requires the "aria-labelledby" attribute, otherwise, it will only read "aria-roledescription".
+      // However, iOS VoiceOver and NVDA both ignore the "aria-labelledby" and read out the whole content, including timestamp.
+      aria-labelledby={labelId}
       aria-roledescription="message"
       className={classNames('webchat__screen-reader-activity', rootClassName)}
       // "id" attribute is used by `aria-labelledby`.
       // eslint-disable-next-line react/forbid-dom-props
       id={id}
-      role="region"
     >
-      <p>
+      {/* "id" attribute is used by `aria-labelledby`. */}
+      {/* eslint-disable-next-line react/forbid-dom-props */}
+      <p id={labelId}>
         <span>{greetingAlt}</span>
         <span>{textAlt}</span>
       </p>

package/src/{ScreenReaderText.js → ScreenReaderText.tsx}

@@ -1,7 +1,9 @@
 /* eslint react/forbid-dom-props: ["off"] */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { forwardRef } from 'react';
+
+import type { VFC } from 'react';
 
 import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
 
@@ -21,21 +23,37 @@ const ROOT_STYLE = {
   width: 1
 };
 
-const ScreenReaderText = ({ id, text }) => {
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  return (
-    <div className={rootClassName} id={id}>
-      {text}
-    </div>
-  );
+type ScreenReaderTextProps = {
+  'aria-hidden'?: boolean;
+  id?: string;
+  text: string;
 };
 
+const ScreenReaderText: VFC<ScreenReaderTextProps> = forwardRef<HTMLDivElement, ScreenReaderTextProps>(
+  ({ 'aria-hidden': ariaHidden, id, text }, ref) => {
+    const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+
+    if (ariaHidden && !id) {
+      console.warn(
+        'botframework-webchat assertion: when "aria-hidden" is set, the screen reader text should be read by "aria-labelledby". Thus, "id" must be set.'
+      );
+    }
+
+    return (
+      <div aria-hidden={ariaHidden} className={rootClassName} id={id} ref={ref}>
+        {text}
+      </div>
+    );
+  }
+);
+
 ScreenReaderText.defaultProps = {
+  'aria-hidden': undefined,
   id: undefined
 };
 
 ScreenReaderText.propTypes = {
+  'aria-hidden': PropTypes.bool,
   id: PropTypes.string,
   text: PropTypes.string.isRequired
 };

package/src/SendBox/{IconButton.js → IconButton.tsx}

@@ -1,16 +1,28 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC, MouseEventHandler, ReactNode, useRef } from 'react';
 
 import AccessibleButton from '../Utils/AccessibleButton';
+import useFocusVisible from '../hooks/internal/useFocusVisible';
 import useStyleSet from '../hooks/useStyleSet';
 
 const { useStyleOptions } = hooks;
 
-const IconButton = ({ alt, children, className, disabled, onClick }) => {
-  const [{ sendBoxButtonAlignment }] = useStyleOptions();
+type IconButtonProps = {
+  alt?: string;
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+};
+
+const IconButton: FC<IconButtonProps> = ({ alt, children, className, disabled, onClick }) => {
   const [{ sendBoxButton: sendBoxButtonStyleSet }] = useStyleSet();
+  const [{ sendBoxButtonAlignment }] = useStyleOptions();
+  const buttonRef = useRef<HTMLButtonElement>();
+
+  const [focusVisible] = useFocusVisible(buttonRef);
 
   return (
     <AccessibleButton
@@ -18,16 +30,20 @@ const IconButton = ({ alt, children, className, disabled, onClick }) => {
         sendBoxButtonStyleSet + '',
         'webchat__icon-button',
         {
+          'webchat__icon-button--focus-visible': focusVisible,
           'webchat__icon-button--stretch': sendBoxButtonAlignment !== 'bottom' && sendBoxButtonAlignment !== 'top'
         },
         className + ''
       )}
       disabled={disabled}
       onClick={disabled ? undefined : onClick}
+      ref={buttonRef}
       title={alt}
       type="button"
     >
+      <div className="webchat__icon-button__shade" />
       {children}
+      <div className="webchat__icon-button__keyboard-focus-indicator" />
     </AccessibleButton>
   );
 };

package/src/SendBox/{SuggestedAction.js → SuggestedAction.tsx}

@@ -1,12 +1,14 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useCallback, useRef } from 'react';
+import React, { MouseEventHandler, useCallback, useRef, VFC } from 'react';
+import type { DirectLineCardAction } from 'botframework-webchat-core';
 
 import AccessibleButton from '../Utils/AccessibleButton';
 import connectToWebChat from '../connectToWebChat';
 import useFocus from '../hooks/useFocus';
 import useFocusAccessKeyEffect from '../Utils/AccessKeySink/useFocusAccessKeyEffect';
+import useFocusVisible from '../hooks/internal/useFocusVisible';
 import useLocalizeAccessKey from '../hooks/internal/useLocalizeAccessKey';
 import useScrollToEnd from '../hooks/useScrollToEnd';
 import useSuggestedActionsAccessKey from '../hooks/internal/useSuggestedActionsAccessKey';
@@ -17,10 +19,8 @@ const { useDirection, useDisabled, usePerformCardAction, useStyleOptions, useSug
 
 const ROOT_STYLE = {
   '&.webchat__suggested-action': {
-    '& .webchat__suggested-action__button': {
-      display: 'flex',
-      overflow: 'hidden' // Prevent image from leaking; object-fit does not work with IE11
-    }
+    display: 'flex',
+    overflow: 'hidden' // Prevent image from leaking; object-fit does not work with IE11
   }
 };
 
@@ -37,7 +37,39 @@ const connectSuggestedAction = (...selectors) =>
     ...selectors
   );
 
-const SuggestedAction = ({ buttonText, className, displayText, image, imageAlt, text, textClassName, type, value }) => {
+type SuggestedActionProps = {
+  buttonText: string;
+  className?: string;
+  displayText?: string;
+  image?: string;
+  imageAlt?: string;
+  text?: string;
+  textClassName?: string;
+  type?:
+    | 'call'
+    | 'downloadFile'
+    | 'imBack'
+    | 'messageBack'
+    | 'openUrl'
+    | 'playAudio'
+    | 'playVideo'
+    | 'postBack'
+    | 'showImage'
+    | 'signin';
+  value?: any;
+};
+
+const SuggestedAction: VFC<SuggestedActionProps> = ({
+  buttonText,
+  className,
+  displayText,
+  image,
+  imageAlt,
+  text,
+  textClassName,
+  type,
+  value
+}) => {
   const [_, setSuggestedActions] = useSuggestedActions();
   const [{ suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
@@ -48,12 +80,16 @@ const SuggestedAction = ({ buttonText, className, displayText, image, imageAlt,
   const focusRef = useRef();
   const localizeAccessKey = useLocalizeAccessKey();
   const performCardAction = usePerformCardAction();
-  const scrollToEnd = useScrollToEnd();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  const scrollToEnd = useScrollToEnd();
 
-  const handleClick = useCallback(
+  const [focusVisible] = useFocusVisible(focusRef);
+
+  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
     ({ target }) => {
-      performCardAction({ displayText, text, type, value }, { target });
+      // TODO: [P3] #XXX We should not destruct DirectLineCardAction into React props and pass them in. It makes typings difficult.
+      //       Instead, we should pass a "cardAction" props.
+      performCardAction({ displayText, text, type, value } as DirectLineCardAction, { target });
 
       // Since "openUrl" action do not submit, the suggested action buttons do not hide after click.
       type === 'openUrl' && setSuggestedActions([]);
@@ -67,38 +103,37 @@ const SuggestedAction = ({ buttonText, className, displayText, image, imageAlt,
   useFocusAccessKeyEffect(accessKey, focusRef);
 
   return (
-    <div
+    <AccessibleButton
+      {...(accessKey ? { 'aria-keyshortcuts': localizeAccessKey(accessKey) } : {})}
       className={classNames(
         'webchat__suggested-action',
-        { 'webchat__suggested-action--rtl': direction === 'rtl' },
+        {
+          'webchat__suggested-action--focus-visible': focusVisible,
+          'webchat__suggested-action--rtl': direction === 'rtl',
+          'webchat__suggested-action--wrapping': suggestedActionsStackedLayoutButtonTextWrap
+        },
         rootClassName,
         suggestedActionStyleSet + '',
         (className || '') + ''
       )}
+      disabled={disabled}
+      onClick={handleClick}
+      ref={focusRef}
+      type="button"
     >
-      <AccessibleButton
-        {...(accessKey ? { 'aria-keyshortcuts': localizeAccessKey(accessKey) } : {})}
-        className={classNames('webchat__suggested-action__button', {
-          'webchat__suggested-action--wrapping': suggestedActionsStackedLayoutButtonTextWrap
-        })}
-        disabled={disabled}
-        onClick={handleClick}
-        ref={focusRef}
-        type="button"
-      >
-        {image && (
-          <img
-            alt={imageAlt}
-            className={classNames(
-              'webchat__suggested-action__image',
-              direction === 'rtl' && 'webchat__suggested-action__image--rtl'
-            )}
-            src={image}
-          />
-        )}
-        <span className={classNames('webchat__suggested-action__text', (textClassName || '') + '')}>{buttonText}</span>
-      </AccessibleButton>
-    </div>
+      {image && (
+        <img
+          alt={imageAlt}
+          className={classNames(
+            'webchat__suggested-action__image',
+            direction === 'rtl' && 'webchat__suggested-action__image--rtl'
+          )}
+          src={image}
+        />
+      )}
+      <span className={classNames('webchat__suggested-action__text', (textClassName || '') + '')}>{buttonText}</span>
+      <div className="webchat__suggested-action__keyboard-focus-indicator" />
+    </AccessibleButton>
   );
 };
 
@@ -109,7 +144,7 @@ SuggestedAction.defaultProps = {
   imageAlt: undefined,
   text: '',
   textClassName: '',
-  type: '',
+  type: undefined,
   value: undefined
 };
 
@@ -121,6 +156,8 @@ SuggestedAction.propTypes = {
   imageAlt: PropTypes.string,
   text: PropTypes.string,
   textClassName: PropTypes.string,
+  // TypeScript class is not mappable to PropTypes.
+  // @ts-ignore
   type: PropTypes.string,
   value: PropTypes.any
 };

package/src/SendBox/SuggestedActions.tsx

@@ -1,11 +1,11 @@
 /* eslint react/no-array-index-key: "off" */
 
-import { DirectLineCardAction } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import BasicFilm, { createBasicStyleSet as createBasicStyleSetForReactFilm } from 'react-film';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { FC, useMemo } from 'react';
+import React, { FC, useMemo, useRef } from 'react';
+import type { DirectLineCardAction } from 'botframework-webchat-core';
 
 import connectToWebChat from '../connectToWebChat';
 import ScreenReaderText from '../ScreenReaderText';
@@ -151,7 +151,7 @@ const SuggestedActionFlowContainer = ({ children, className, screenReaderText })
       {!!children && !!React.Children.count(children) && (
         <div className="webchat__suggested-actions__flow-box">
           {React.Children.map(children, child => (
-            <div className="webchat__suggested-actions__item">{child}</div>
+            <div className="webchat__suggested-actions__flow-item-box">{child}</div>
           ))}
         </div>
       )}
@@ -215,6 +215,7 @@ type SuggestedActionsProps = {
 const SuggestedActions: FC<SuggestedActionsProps> = ({ className, suggestedActions = [] }) => {
   const [{ suggestedActionLayout, suggestedActionsStackedLayoutButtonTextWrap }] = useStyleOptions();
   const [accessKey] = useSuggestedActionsAccessKey();
+  const hideEmptyRef = useRef(true);
   const localize = useLocalizer();
   const localizeAccessKey = useLocalizeAccessKey();
 
@@ -234,30 +235,57 @@ const SuggestedActions: FC<SuggestedActionsProps> = ({ className, suggestedActio
       imageAltText?: string;
       text?: string;
       title?: string;
-      type: string;
+      type:
+        | 'call'
+        | 'downloadFile'
+        | 'imBack'
+        | 'messageBack'
+        | 'openUrl'
+        | 'playAudio'
+        | 'playVideo'
+        | 'postBack'
+        | 'showImage'
+        | 'signin';
       value?: { [key: string]: any } | string;
     };
 
     return (
-      <SuggestedAction
-        buttonText={suggestedActionText({ displayText, title, type, value })}
-        className="webchat__suggested-actions__button"
-        displayText={displayText}
-        image={image}
-        imageAlt={imageAltText}
-        key={index}
-        text={text}
-        textClassName={
-          suggestedActionLayout === 'stacked' && suggestedActionsStackedLayoutButtonTextWrap
-            ? 'webchat__suggested-actions__button-text-stacked-text-wrap'
-            : 'webchat__suggested-actions__button-text'
-        }
-        type={type}
-        value={value}
-      />
+      <div className="webchat__suggested-actions__item-box" key={index}>
+        <SuggestedAction
+          buttonText={suggestedActionText({ displayText, title, type, value })}
+          className="webchat__suggested-actions__button"
+          displayText={displayText}
+          image={image}
+          imageAlt={imageAltText}
+          text={text}
+          textClassName={
+            suggestedActionLayout === 'stacked' && suggestedActionsStackedLayoutButtonTextWrap
+              ? 'webchat__suggested-actions__button-text-stacked-text-wrap'
+              : 'webchat__suggested-actions__button-text'
+          }
+          type={type}
+          value={value}
+        />
+      </div>
     );
   });
 
+  // (Related to #4021)
+  //
+  // To improve accessibility UX, if there are no suggested actions, and this container was never shown.
+  // Then, avoid rendering the alt-text "Suggested Actions Container: Is empty".
+  //
+  // This is to reduce the narration of "Is empty".
+  //
+  // After any suggested actions were shown during the lifetime of this container, then we will
+  // continue to start showing "Suggested Actions Container: Is empty" when the container is empty.
+  if (!children.length && hideEmptyRef.current) {
+    return null;
+  }
+
+  // Otherwise, if we have rendered once, we will continue to render "Is empty".
+  hideEmptyRef.current = false;
+
   if (suggestedActionLayout === 'flow') {
     return (
       <SuggestedActionFlowContainer className={className} screenReaderText={screenReaderText}>
@@ -287,7 +315,6 @@ SuggestedActions.propTypes = {
   className: PropTypes.string,
 
   // TypeScript class is not mappable to PropTypes.func
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   suggestedActions: PropTypes.arrayOf(
     PropTypes.shape({

package/src/Styles/StyleSet/BasicTranscript.ts

@@ -26,9 +26,12 @@ export default function createBasicTranscriptStyleSet({
           borderStyle: transcriptActivityVisualKeyboardIndicatorStyle,
           borderWidth: transcriptActivityVisualKeyboardIndicatorWidth,
           boxSizing: 'border-box',
-          height: `calc(100% - ${paddingRegular}px)`,
+          height: `calc(100% - ${paddingRegular / 2}px)`,
           left: 0,
-          margin: paddingRegular / 2,
+          marginBottom: 0,
+          marginLeft: paddingRegular / 2,
+          marginRight: paddingRegular / 2,
+          marginTop: 0,
           pointerEvents: 'none',
           position: 'absolute',
           top: 0,
@@ -36,40 +39,51 @@ export default function createBasicTranscriptStyleSet({
         }
       },
 
-      '&:focus .webchat__basic-transcript__focus-indicator, .webchat__basic-transcript__terminator:focus + .webchat__basic-transcript__focus-indicator': {
-        height: '100%',
-        borderColor: transcriptVisualKeyboardIndicatorColor,
-        borderStyle: transcriptVisualKeyboardIndicatorStyle,
-        borderWidth: transcriptVisualKeyboardIndicatorWidth,
-        boxSizing: 'border-box',
-        pointerEvents: 'none',
-        position: 'absolute',
-        top: 0,
-        width: '100%'
-      },
+      '&:focus .webchat__basic-transcript__focus-indicator, .webchat__basic-transcript__terminator:focus + .webchat__basic-transcript__focus-indicator':
+        {
+          height: '100%',
+          borderColor: transcriptVisualKeyboardIndicatorColor,
+          borderStyle: transcriptVisualKeyboardIndicatorStyle,
+          borderWidth: transcriptVisualKeyboardIndicatorWidth,
+          boxSizing: 'border-box',
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: 0,
+          width: '100%'
+        },
 
       '& .webchat__basic-transcript__activity': {
-        paddingTop: paddingRegular,
+        paddingTop: paddingRegular / 2,
         position: 'relative',
 
+        '&:first-child': {
+          marginTop: paddingRegular / 2
+        },
+
         '&:not(:first-child)': {
-          marginTop: -paddingRegular
+          marginTop: -paddingRegular / 2
         }
       },
 
-      '& .webchat__basic-transcript__activity-box:not(:empty)': {
-        paddingBottom: paddingRegular
-      },
-
-      '& .webchat__basic-transcript__activity-sentinel': {
+      // When the activity is focused as active descendant, `scrollIntoView()` will scroll this invisible <div> into view.
+      '& .webchat__basic-transcript__activity-active-descendant': {
         height: '100%',
         left: 0,
+        marginTop: -paddingRegular / 2,
+        paddingBottom: paddingRegular / 2,
+        // The bounding box is expanded to both top and bottom to scroll focus indicator into view.
+        // We should ignore clicks to make sure this expansion don't register click as focus.
+        // Otherwise, when clicking on the very bottom edge of the activity, it will focus on next activity instead.
         pointerEvents: 'none',
         position: 'absolute',
         top: 0,
         width: '100%'
       },
 
+      '& .webchat__basic-transcript__activity-body:not(:empty)': {
+        paddingBottom: paddingRegular
+      },
+
       '& .webchat__basic-transcript__terminator': {
         bottom: 0,
         height: 0,

package/src/Styles/StyleSet/Bubble.ts

@@ -1,4 +1,3 @@
-/* eslint-disable prettier/prettier */
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 2] }] */
 import { StrictStyleOptions } from 'botframework-webchat-api';
 

package/src/Styles/StyleSet/CarouselFilmStrip.ts

@@ -23,11 +23,12 @@ export default function CarouselFilmStrip({
         transitionProperty: 'max-width'
       },
 
-      '&.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub, &.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar': {
-        '& .webchat__carousel-filmstrip__message': {
-          maxWidth: bubbleMaxWidth + paddingRegular
-        }
-      },
+      '&.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub, &.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar':
+        {
+          '& .webchat__carousel-filmstrip__message': {
+            maxWidth: bubbleMaxWidth + paddingRegular
+          }
+        },
 
       '& .webchat__carousel-filmstrip__alignment-pad': {
         transitionDuration,
@@ -61,11 +62,12 @@ export default function CarouselFilmStrip({
         }
       },
 
-      '&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar, &.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub': {
-        '& .webchat__carousel-filmstrip__nub-pad': {
-          width: paddingRegular
-        }
-      },
+      '&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar, &.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub':
+        {
+          '& .webchat__carousel-filmstrip__nub-pad': {
+            width: paddingRegular
+          }
+        },
 
       '&:not(.webchat__carousel-filmstrip--top-callout) .webchat__carousel-filmstrip__avatar-gutter': {
         justifyContent: 'flex-end'

package/src/Styles/StyleSet/CarouselFilmStripAttachment.ts

@@ -47,9 +47,10 @@ export default function CarouselFilmStripAttachment({
       },
 
       '&.webchat__carousel-filmstrip-attachment--hide-nub, &.webchat__carousel-filmstrip-attachment--show-nub': {
-        '&:not(.webchat__carousel-filmstrip-attachment--hide-avatar.webchat__carousel-filmstrip-attachment--show-avatar):first-child': {
-          paddingLeft: paddingRegular * 2
-        }
+        '&:not(.webchat__carousel-filmstrip-attachment--hide-avatar.webchat__carousel-filmstrip-attachment--show-avatar):first-child':
+          {
+            paddingLeft: paddingRegular * 2
+          }
       }
     })
   };