Use ScreenReaderText in favor of aria-label (#3097)

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

Author: compulim

CHANGELOG.md

@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  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.
 -  Fixes [#3074](https://github.com/microsoft/BotFramework-WebChat/issues/3074). Keep `props.locale` when sending to the bot, by [@compulim](https://github.com/compulim) in PR [#3095](https://github.com/microsoft/BotFramework-WebChat/issue/3095)
+-  Fixes [#3096](https://github.com/microsoft/BotFramework-WebChat/issues/3096). Use `<ScreenReaderText>` instead of `aria-label` for message bubbles, by [@compulim](https://github.com/compulim) in PR [#3097](https://github.com/microsoft/BotFramework-WebChat/issue/3097)
 
 ## [4.8.0] - 2020-03-05
 

packages/component/src/Activity/Bubble.js

@@ -102,7 +102,7 @@ const Bubble = ({ 'aria-hidden': ariaHidden, children, className, fromUser, nub
 };
 
 Bubble.defaultProps = {
-  'aria-hidden': false,
+  'aria-hidden': undefined,
   children: undefined,
   className: '',
   fromUser: false,

packages/component/src/Activity/CarouselFilmStrip.js

@@ -128,7 +128,6 @@ const WebChatCarouselFilmStrip = ({
 
   return (
     <div
-      aria-label={ariaLabel}
       className={classNames(
         ROOT_CSS + '',
         carouselFilmStripStyleSet + '',
@@ -142,6 +141,7 @@ const WebChatCarouselFilmStrip = ({
       ref={scrollableRef}
       role="group"
     >
+      <ScreenReaderText text={ariaLabel} />
       {renderAvatar && <div className="webchat__carouselFilmStrip__avatar">{renderAvatar()}</div>}
       <div className="content">
         {!!activityDisplayText && (
@@ -155,7 +155,7 @@ const WebChatCarouselFilmStrip = ({
                 }
               })}
             </Bubble>
-            <div className="filler" />
+            <div aria-hidden={true} className="filler" />
           </div>
         )}
         <ul className={classNames({ webchat__carousel__item_indented: indented })} ref={itemContainerRef}>

packages/component/src/Activity/StackedLayout.js

@@ -118,7 +118,6 @@ const StackedLayout = ({ activity, children, nextVisibleActivity }) => {
 
   return (
     <div
-      aria-label={ariaLabel}
       className={classNames(
         ROOT_CSS + '',
         stackedLayoutStyleSet + '',
@@ -137,11 +136,12 @@ const StackedLayout = ({ activity, children, nextVisibleActivity }) => {
       )}
       role="group"
     >
+      <ScreenReaderText text={ariaLabel} />
       {renderAvatar && <div className="webchat__stackedLayout__avatar">{renderAvatar()}</div>}
       <div className="webchat__stackedLayout__content">
         {!!activityDisplayText && (
-          <div className="webchat__row message">
-            <Bubble aria-hidden={true} className="bubble" fromUser={fromUser} nub={!!indented}>
+          <div aria-hidden={true} className="webchat__row message">
+            <Bubble className="bubble" fromUser={fromUser} nub={!!indented}>
               {children({
                 activity,
                 attachment: {
@@ -168,10 +168,10 @@ const StackedLayout = ({ activity, children, nextVisibleActivity }) => {
         ))}
         <div className={classNames('webchat__row', { webchat__stacked_item_indented: indented })}>
           {renderActivityStatus()}
-          <div className="filler" />
+          <div aria-hidden={true} className="filler" />
         </div>
       </div>
-      <div className="filler" />
+      <div aria-hidden={true} className="filler" />
     </div>
   );
 };

packages/component/src/BasicTranscript.js

@@ -113,7 +113,7 @@ const BasicTranscript = ({ className }) => {
   return (
     <div className={classNames(ROOT_CSS + '', className + '')} dir={direction} role="log">
       <ScrollToBottomPanel className={PANEL_CSS + ''}>
-        <div className={FILLER_CSS} />
+        <div aria-hidden={true} className={FILLER_CSS} />
         <ul
           aria-atomic="false"
           aria-live="polite"