Fix usability on accessibility (#3076)

* Experiment

* Clean up

* Clean up

* Add entry

* Fix ESLint

* Sorting

Co-authored-by: Corina <[email protected]>

Author: compulim

CHANGELOG.md

@@ -22,6 +22,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+-  Fixes [#3075](https://github.com/microsoft/BotFramework-WebChat/issues/3075). Fix usability issues around accessibility, by [@compulim](https://github.com/compulim) in PR [#3076](https://github.com/microsoft/BotFramework-WebChat/issue/3076)
+   -  Fix timestamp should not be narrated more than once.
+   -  Associate the activity text with its attachments, by adding a `role="region"` to the activity DOM element.
+
 ## [4.8.0] - 2020-03-05
 
 ### Breaking changes

packages/component/src/Activity/CarouselFilmStrip.js

@@ -13,6 +13,7 @@ import ScreenReaderText from '../ScreenReaderText';
 import textFormatToContentType from '../Utils/textFormatToContentType';
 import useAvatarForBot from '../hooks/useAvatarForBot';
 import useAvatarForUser from '../hooks/useAvatarForUser';
+import useDateFormatter from '../hooks/useDateFormatter';
 import useDirection from '../hooks/useDirection';
 import useLocalizer from '../hooks/useLocalizer';
 import useRenderActivityStatus from '../hooks/useRenderActivityStatus';
@@ -96,6 +97,7 @@ const WebChatCarouselFilmStrip = ({
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
   const [direction] = useDirection();
+  const formatDate = useDateFormatter();
   const localize = useLocalizer();
   const renderActivityStatus = useRenderActivityStatus({ activity, nextVisibleActivity });
   const renderAvatar = useRenderAvatar({ activity });
@@ -105,18 +107,28 @@ const WebChatCarouselFilmStrip = ({
     channelData: { messageBack: { displayText: messageBackDisplayText } = {} } = {},
     from: { role } = {},
     text,
-    textFormat
+    textFormat,
+    timestamp
   } = activity;
 
-  const fromUser = role === 'user';
   const activityDisplayText = messageBackDisplayText || text;
-  const strippedActivityDisplayText = remarkStripMarkdown(activityDisplayText);
+  const fromUser = role === 'user';
+
   const indented = fromUser ? bubbleFromUserNubSize : bubbleNubSize;
   const initials = fromUser ? userInitials : botInitials;
+  const plainText = remarkStripMarkdown(activityDisplayText);
   const roleLabel = localize(fromUser ? 'CAROUSEL_ATTACHMENTS_USER_ALT' : 'CAROUSEL_ATTACHMENTS_BOT_ALT');
 
+  const ariaLabel = localize(
+    fromUser ? 'ACTIVITY_USER_SAID' : 'ACTIVITY_BOT_SAID',
+    initials,
+    plainText,
+    formatDate(timestamp)
+  ).trim();
+
   return (
     <div
+      aria-label={ariaLabel}
       className={classNames(
         ROOT_CSS + '',
         carouselFilmStripStyleSet + '',
@@ -128,12 +140,12 @@ const WebChatCarouselFilmStrip = ({
         direction === 'rtl' ? 'webchat__carousel--rtl' : ''
       )}
       ref={scrollableRef}
+      role="region"
     >
       {renderAvatar && <div className="webchat__carouselFilmStrip__avatar">{renderAvatar()}</div>}
       <div className="content">
         {!!activityDisplayText && (
           <div className="message">
-            <ScreenReaderText text={roleLabel + ' ' + strippedActivityDisplayText} />
             <Bubble aria-hidden={true} className="bubble" fromUser={fromUser} nub={true}>
               {children({
                 activity,

packages/component/src/Activity/StackedLayout.js

@@ -103,11 +103,12 @@ const StackedLayout = ({ activity, children, nextVisibleActivity }) => {
 
   const activityDisplayText = messageBackDisplayText || text;
   const fromUser = role === 'user';
+
+  const indented = fromUser ? bubbleFromUserNubSize : bubbleNubSize;
   const initials = fromUser ? userInitials : botInitials;
   const plainText = remarkStripMarkdown(text);
-  const indented = fromUser ? bubbleFromUserNubSize : bubbleNubSize;
-
   const roleLabel = localize(fromUser ? 'CAROUSEL_ATTACHMENTS_USER_ALT' : 'CAROUSEL_ATTACHMENTS_BOT_ALT');
+
   const ariaLabel = localize(
     fromUser ? 'ACTIVITY_USER_SAID' : 'ACTIVITY_BOT_SAID',
     initials,
@@ -117,6 +118,7 @@ const StackedLayout = ({ activity, children, nextVisibleActivity }) => {
 
   return (
     <div
+      aria-label={ariaLabel}
       className={classNames(
         ROOT_CSS + '',
         stackedLayoutStyleSet + '',
@@ -133,12 +135,12 @@ const StackedLayout = ({ activity, children, nextVisibleActivity }) => {
           'webchat__stackedLayout--hasAvatar': renderAvatar && !!(fromUser ? bubbleFromUserNubSize : bubbleNubSize)
         }
       )}
+      role="region"
     >
       {renderAvatar && <div className="webchat__stackedLayout__avatar">{renderAvatar()}</div>}
       <div className="webchat__stackedLayout__content">
         {!!activityDisplayText && (
           <div className="webchat__row message">
-            <ScreenReaderText text={ariaLabel} />
             <Bubble aria-hidden={true} className="bubble" fromUser={fromUser} nub={!!indented}>
               {children({
                 activity,

packages/component/src/BasicTranscript.js

@@ -117,7 +117,7 @@ const BasicTranscript = ({ className }) => {
         <ul
           aria-atomic="false"
           aria-live="polite"
-          aria-relevant="additions text"
+          aria-relevant="additions"
           className={classNames(LIST_CSS + '', activitiesStyleSet + '')}
           role="list"
         >

packages/component/src/Middleware/ActivityStatus/createTimestampMiddleware.js

@@ -5,7 +5,7 @@ import Timestamp from './Timestamp';
 export default function createTimestampMiddleware() {
   return () => next => ({ activity, sameTimestampGroup, ...args }) => {
     if (!sameTimestampGroup) {
-      return <Timestamp activity={activity} />;
+      return <Timestamp activity={activity} aria-hidden={true} />;
     }
 
     return next({ activity, sameTimestampGroup, ...args });