diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c101fffe2..202ca9d040 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Added something, by [@johndoe](https://github.com/johndoe), in PR [#XXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXX)
 -->
 -  Fix [#2187](https://github.com/microsoft/BotFramework-WebChat/issues/2187). Bump core-js and update core-js modules on index-es5.js, by [@corinagum](https://github.com/corinagum) in PR [#2195](https://github.com/microsoft/BotFramework-WebChat/pull/2195)
+-  Fix [#2193](https://github.com/microsoft/BotFramework-WebChat/issues/2193). Fix Adaptive Card/attachments do not get read by Narrator, by [@corinagum](https://github.com/corinagum) in PR [#2226](https://github.com/microsoft/BotFramework-WebChat/pull/2226)
+-  Fix [#2150](https://github.com/microsoft/BotFramework-WebChat/issues/2193). Fix timestamps read by Narrator, by [@corinagum](https://github.com/corinagum) in PR [#2226](https://github.com/microsoft/BotFramework-WebChat/pull/2226)
 
 ## [4.5.0] - 2019-07-10
 
diff --git a/packages/component/src/Activity/Bubble.js b/packages/component/src/Activity/Bubble.js
index e4c1e2ad5b..d027713ad3 100644
--- a/packages/component/src/Activity/Bubble.js
+++ b/packages/component/src/Activity/Bubble.js
@@ -11,7 +11,7 @@ const Bubble = ({ 'aria-hidden': ariaHidden, children, className, fromUser, styl
 );
 
 Bubble.defaultProps = {
-  'aria-hidden': true,
+  'aria-hidden': false,
   children: undefined,
   className: '',
   fromUser: false
diff --git a/packages/component/src/Activity/CarouselFilmStrip.js b/packages/component/src/Activity/CarouselFilmStrip.js
index 629ecf211d..4b9f3dd379 100644
--- a/packages/component/src/Activity/CarouselFilmStrip.js
+++ b/packages/component/src/Activity/CarouselFilmStrip.js
@@ -123,7 +123,7 @@ const WebChatCarouselFilmStrip = ({
         <ul ref={itemContainerRef}>
           {attachments.map((attachment, index) => (
             <li key={index}>
-              <Bubble fromUser={fromUser} key={index}>
+              <Bubble aria-hidden={true} fromUser={fromUser} key={index}>
                 {children({ attachment })}
               </Bubble>
             </li>
@@ -133,7 +133,7 @@ const WebChatCarouselFilmStrip = ({
           {state === SENDING || state === SEND_FAILED ? (
             <SendStatus activity={activity} />
           ) : (
-            <Timestamp activity={activity} aria-hidden={true} className={timestampClassName} />
+            <Timestamp activity={activity} className={timestampClassName} />
           )}
         </div>
       </div>
diff --git a/packages/component/src/Activity/SendStatus.js b/packages/component/src/Activity/SendStatus.js
index 953d817d7b..2d7a2e139e 100644
--- a/packages/component/src/Activity/SendStatus.js
+++ b/packages/component/src/Activity/SendStatus.js
@@ -2,8 +2,8 @@ import { Constants } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { localize } from '../Localization/Localize';
 import connectToWebChat from '../connectToWebChat';
-import Localize, { localize } from '../Localization/Localize';
 
 const {
   ActivityClientState: { SEND_FAILED, SENDING }
@@ -29,31 +29,37 @@ const connectSendStatus = (...selectors) =>
 const SendStatus = ({ activity: { channelData: { state } = {} }, language, retrySend, styleSet }) => {
   // TODO: [P4] Currently, this is the only place which use a templated string
   //       We could refactor this into a general component if there are more templated strings
+  const localizedSending = localize('Sending', language);
+  const localizedSendStatus = localize('SendStatus', language);
   const sendFailedText = localize('SEND_FAILED_KEY', language);
   const sendFailedRetryMatch = /\{Retry\}/u.exec(sendFailedText);
 
   return (
-    <span className={styleSet.sendStatus}>
-      {state === SENDING ? (
-        <Localize text="Sending" />
-      ) : state === SEND_FAILED ? (
-        sendFailedRetryMatch ? (
-          <React.Fragment>
-            {sendFailedText.substr(0, sendFailedRetryMatch.index)}
+    <React.Fragment>
+      {/* Because of differences in browser implementations, <span aria-label> is used to make the screen reader perform the same on different browsers in Edge v44 */}
+      <span aria-label={localizedSendStatus + localizedSending} />
+      <span aria-hidden={true} className={styleSet.sendStatus}>
+        {state === SENDING ? (
+          localizedSending
+        ) : state === SEND_FAILED ? (
+          sendFailedRetryMatch ? (
+            <React.Fragment>
+              {sendFailedText.substr(0, sendFailedRetryMatch.index)}
+              <button onClick={retrySend} type="button">
+                {localize('Retry', language)}
+              </button>
+              {sendFailedText.substr(sendFailedRetryMatch.index + sendFailedRetryMatch[0].length)}
+            </React.Fragment>
+          ) : (
             <button onClick={retrySend} type="button">
-              {localize('Retry', language)}
+              {sendFailedText}
             </button>
-            {sendFailedText.substr(sendFailedRetryMatch.index + sendFailedRetryMatch[0].length)}
-          </React.Fragment>
+          )
         ) : (
-          <button onClick={retrySend} type="button">
-            {sendFailedText}
-          </button>
-        )
-      ) : (
-        false
-      )}
-    </span>
+          false
+        )}
+      </span>
+    </React.Fragment>
   );
 };
 
diff --git a/packages/component/src/Activity/StackedLayout.js b/packages/component/src/Activity/StackedLayout.js
index 14a9cb27c2..63aa900c2d 100644
--- a/packages/component/src/Activity/StackedLayout.js
+++ b/packages/component/src/Activity/StackedLayout.js
@@ -118,7 +118,9 @@ const StackedLayout = ({ activity, avatarInitials, children, language, styleSet,
           </div>
         ) : (
           !!activityDisplayText && (
-            <div aria-label={ariaLabel} className="webchat__row message">
+            <div className="webchat__row message">
+              {/* Because of differences in browser implementations, <span aria-label> is used to make the screen reader perform the same on different browsers in Edge v44 */}
+              <span aria-label={ariaLabel} />
               <Bubble aria-hidden={true} className="bubble" fromUser={fromUser}>
                 {children({
                   activity,
@@ -132,9 +134,16 @@ const StackedLayout = ({ activity, avatarInitials, children, language, styleSet,
             </div>
           )
         )}
+        {/* Because of differences in browser implementations, aria-label=" " is used to make the screen reader not repeat the same text multiple times in Chrome v75 */}
         {attachments.map((attachment, index) => (
-          <div className="webchat__row attachment" key={index}>
-            <Bubble aria-hidden={true} className="attachment bubble" fromUser={fromUser} key={index}>
+          <div
+            aria-label=" "
+            className={classNames('webchat__row attachment', { webchat__stacked_item_indented: indented })}
+            key={index}
+          >
+            {/* Because of differences in browser implementations, <span aria-label> is used to make the screen reader perform the same on different browsers in Edge v44 */}
+            <span aria-label={fromUser ? localize('UserSent', language) : localize('BotSent', language)} />
+            <Bubble className="attachment bubble" fromUser={fromUser} key={index}>
               {children({ attachment })}
             </Bubble>
           </div>
@@ -143,7 +152,7 @@ const StackedLayout = ({ activity, avatarInitials, children, language, styleSet,
           {showSendStatus ? (
             <SendStatus activity={activity} className="timestamp" />
           ) : (
-            <Timestamp activity={activity} aria-hidden={true} className={classNames('timestamp', timestampClassName)} />
+            <Timestamp activity={activity} className={classNames('timestamp', timestampClassName)} />
           )}
           <div className="filler" />
         </div>
diff --git a/packages/component/src/Activity/Timestamp.js b/packages/component/src/Activity/Timestamp.js
index 5c08af33d9..3d629f430d 100644
--- a/packages/component/src/Activity/Timestamp.js
+++ b/packages/component/src/Activity/Timestamp.js
@@ -5,14 +5,13 @@ import React from 'react';
 import connectToWebChat from '../connectToWebChat';
 import TimeAgo from '../Utils/TimeAgo';
 
-const Timestamp = ({ activity: { timestamp }, 'aria-hidden': ariaHidden, className, styleSet }) => (
-  <span aria-hidden={ariaHidden} className={classNames(styleSet.timestamp + '', className + '')}>
+const Timestamp = ({ activity: { timestamp }, className, styleSet }) => (
+  <span className={classNames(styleSet.timestamp + '', (className || '') + '')}>
     <TimeAgo value={timestamp} />
   </span>
 );
 
 Timestamp.defaultProps = {
-  'aria-hidden': true,
   className: ''
 };
 
@@ -20,7 +19,6 @@ Timestamp.propTypes = {
   activity: PropTypes.shape({
     timestamp: PropTypes.string.isRequired
   }).isRequired,
-  'aria-hidden': PropTypes.bool,
   className: PropTypes.string,
   styleSet: PropTypes.shape({
     timestamp: PropTypes.any.isRequired
diff --git a/packages/component/src/Attachment/Assets/DownloadIcon.js b/packages/component/src/Attachment/Assets/DownloadIcon.js
index d6e26c3e99..0f6323230f 100644
--- a/packages/component/src/Attachment/Assets/DownloadIcon.js
+++ b/packages/component/src/Attachment/Assets/DownloadIcon.js
@@ -3,27 +3,19 @@ import React from 'react';
 
 const ICON_SIZE_FACTOR = 22;
 
-const DownloadIcon = ({ className, label, size }) => (
-  <svg
-    aria-label={label}
-    className={className}
-    height={ICON_SIZE_FACTOR * size}
-    viewBox="0 0 31.8 46"
-    width={ICON_SIZE_FACTOR * size}
-  >
+const DownloadIcon = ({ className, size }) => (
+  <svg className={className} height={ICON_SIZE_FACTOR * size} viewBox="0 0 31.8 46" width={ICON_SIZE_FACTOR * size}>
     <path d="M26.8,23.8l-10.9,11L5,23.8l1.6-1.6l8.2,8.3V5H17v25.5l8.2-8.3L26.8,23.8z M5.8,41v-2.2H26V41H5.8z" />
   </svg>
 );
 
 DownloadIcon.defaultProps = {
   className: '',
-  label: '',
   size: 1
 };
 
 DownloadIcon.propTypes = {
   className: PropTypes.string,
-  label: PropTypes.string,
   size: PropTypes.number
 };
 
diff --git a/packages/component/src/Attachment/Assets/TypingAnimation.js b/packages/component/src/Attachment/Assets/TypingAnimation.js
index 95465d3777..8e4e7b6985 100644
--- a/packages/component/src/Attachment/Assets/TypingAnimation.js
+++ b/packages/component/src/Attachment/Assets/TypingAnimation.js
@@ -3,9 +3,15 @@ import React from 'react';
 
 import connectToWebChat from '../../connectToWebChat';
 
-const TypingAnimation = ({ styleSet }) => <div className={styleSet.typingAnimation} />;
+const TypingAnimation = ({ 'aria-label': ariaLabel, styleSet }) => (
+  <React.Fragment>
+    <span aria-label={ariaLabel} />
+    <div aria-hidden={true} className={styleSet.typingAnimation} />
+  </React.Fragment>
+);
 
 TypingAnimation.propTypes = {
+  'aria-label': PropTypes.string.isRequired,
   styleSet: PropTypes.shape({
     typingAnimation: PropTypes.any.isRequired
   }).isRequired
diff --git a/packages/component/src/Attachment/AudioContent.js b/packages/component/src/Attachment/AudioContent.js
index d2f7a739e1..bd4f92062b 100644
--- a/packages/component/src/Attachment/AudioContent.js
+++ b/packages/component/src/Attachment/AudioContent.js
@@ -3,17 +3,27 @@ import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 
-const AudioContent = ({ autoPlay, loop, poster, src, styleSet }) => (
-  <audio autoPlay={autoPlay} className={styleSet.audioContent} controls={true} loop={loop} poster={poster} src={src} />
+const AudioContent = ({ alt, autoPlay, loop, poster, src, styleSet }) => (
+  <audio
+    aria-label={alt}
+    autoPlay={autoPlay}
+    className={styleSet.audioContent}
+    controls={true}
+    loop={loop}
+    poster={poster}
+    src={src}
+  />
 );
 
 AudioContent.defaultProps = {
+  alt: '',
   autoPlay: false,
   loop: false,
   poster: ''
 };
 
 AudioContent.propTypes = {
+  alt: PropTypes.string,
   autoPlay: PropTypes.bool,
   loop: PropTypes.bool,
   poster: PropTypes.string,
diff --git a/packages/component/src/Attachment/DownloadAttachment.js b/packages/component/src/Attachment/DownloadAttachment.js
index 9124c3e75e..74170ab7f6 100644
--- a/packages/component/src/Attachment/DownloadAttachment.js
+++ b/packages/component/src/Attachment/DownloadAttachment.js
@@ -13,19 +13,30 @@ const DownloadAttachment = ({
   styleSet
 }) => {
   const attachmentIndex = attachments.indexOf(attachment);
-  const label = localize('Download file', language);
+  const downloadLabel = localize('Download file', language);
   const size = attachmentSizes[attachmentIndex];
-
+  const formattedSize = typeof size === 'number' && format(size);
+  const downloadFileWithFileSizeLabel = localize(
+    'DownloadFileWithFileSize',
+    language,
+    downloadLabel,
+    attachment.name,
+    formattedSize
+  );
   return (
-    <div className={styleSet.downloadAttachment}>
-      <a href={attachment.contentUrl} rel="noopener noreferrer" target="_blank">
-        <div className="details">
-          <div className="name">{attachment.name}</div>
-          {typeof size === 'number' && <div className="size">{format(size)}</div>}
-        </div>
-        <DownloadIcon className="icon" label={label} size={1.5} />
-      </a>
-    </div>
+    <React.Fragment>
+      {/* Because of differences in browser implementations, <span aria-label> is used to make the screen reader perform the same on different browsers in Edge v44 */}
+      <span aria-label={downloadFileWithFileSizeLabel} />
+      <div aria-hidden={true} className={styleSet.downloadAttachment}>
+        <a href={attachment.contentUrl} rel="noopener noreferrer" target="_blank">
+          <div className="details">
+            <div className="name">{attachment.name}</div>
+            <div className="size">{formattedSize}</div>
+          </div>
+          <DownloadIcon className="icon" size={1.5} />
+        </a>
+      </div>
+    </React.Fragment>
   );
 };
 
diff --git a/packages/component/src/Attachment/TextContent.js b/packages/component/src/Attachment/TextContent.js
index 05b42a0621..ec9112d786 100644
--- a/packages/component/src/Attachment/TextContent.js
+++ b/packages/component/src/Attachment/TextContent.js
@@ -10,15 +10,24 @@ import connectToWebChat from '../connectToWebChat';
 
 const TextContent = ({ contentType, renderMarkdown, styleSet, text }) =>
   contentType === 'text/markdown' && renderMarkdown ? (
-    <div
-      className={classNames('markdown', styleSet.textContent + '')}
-      dangerouslySetInnerHTML={{ __html: renderMarkdown(text || '') }}
-    />
+    <React.Fragment>
+      {/* Because of differences in browser implementations, <span aria-label> is used to make the screen reader perform the same on different browsers in Edge v44 */}
+      <span aria-label={text} />
+      <div
+        aria-hidden={true}
+        className={classNames('markdown', styleSet.textContent + '')}
+        dangerouslySetInnerHTML={{ __html: renderMarkdown(text || '') }}
+      />
+    </React.Fragment>
   ) : (
     (text || '').split('\n').map((line, index) => (
-      <p className={classNames('plain', styleSet.textContent + '')} key={index}>
-        {line.trim()}
-      </p>
+      <React.Fragment key={index}>
+        {/* Because of differences in browser implementations, <span aria-label> is used to make the screen reader perform the same on different browsers in Edge v44 */}
+        <span aria-label={text} />
+        <p aria-hidden={true} className={classNames('plain', styleSet.textContent + '')}>
+          {line.trim()}
+        </p>
+      </React.Fragment>
     ))
   );
 
diff --git a/packages/component/src/Attachment/TypingActivity.js b/packages/component/src/Attachment/TypingActivity.js
index b24603aa62..cbfe1a3707 100644
--- a/packages/component/src/Attachment/TypingActivity.js
+++ b/packages/component/src/Attachment/TypingActivity.js
@@ -1,16 +1,18 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { localize } from '../Localization/Localize';
 import connectToWebChat from '../connectToWebChat';
 import TypingAnimation from './Assets/TypingAnimation';
 
-const TypingActivity = ({ styleSet }) => (
+const TypingActivity = ({ language, styleSet }) => (
   <div className={styleSet.typingActivity}>
-    <TypingAnimation />
+    <TypingAnimation ariaLabel={localize('TypingIndicator', language)} />
   </div>
 );
 
 TypingActivity.propTypes = {
+  language: PropTypes.string.isRequired,
   styleSet: PropTypes.shape({
     typingActivity: PropTypes.any.isRequired
   }).isRequired
diff --git a/packages/component/src/BasicTranscript.js b/packages/component/src/BasicTranscript.js
index c6a8113479..99fc9d6159 100644
--- a/packages/component/src/BasicTranscript.js
+++ b/packages/component/src/BasicTranscript.js
@@ -95,6 +95,8 @@ const BasicTranscript = ({
           >
             {activityElements.map(({ activity, element }, index) => (
               <li
+                /* Because of differences in browser implementations, aria-label=" " is used to make the screen reader not repeat the same text multiple times in Chrome v75 */
+                aria-label=" "
                 className={classNames(styleSet.activity + '', {
                   // Hide timestamp if same timestamp group with the next activity
                   'hide-timestamp': sameTimestampGroup(
diff --git a/packages/component/src/BasicWebChat.js b/packages/component/src/BasicWebChat.js
index e76da46f1e..8e82a792e7 100644
--- a/packages/component/src/BasicWebChat.js
+++ b/packages/component/src/BasicWebChat.js
@@ -1,4 +1,5 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 2] }] */
+/* eslint react/no-unsafe: off */
 
 import { css } from 'glamor';
 import classNames from 'classnames';
@@ -80,7 +81,7 @@ export default class BasicWebChat extends React.Component {
   }
 
   // TODO: [P2] Move to React 16 APIs
-  componentWillReceiveProps({
+  UNSAFE_componentWillReceiveProps({
     activityMiddleware: nextActivityMiddleware,
     attachmentMiddleware: nextAttachmentMiddleware
   }) {
diff --git a/packages/component/src/Composer.js b/packages/component/src/Composer.js
index 7533fe891e..39b01dbeb9 100644
--- a/packages/component/src/Composer.js
+++ b/packages/component/src/Composer.js
@@ -1,3 +1,5 @@
+/* eslint react/no-unsafe: off */
+
 import {
   Composer as ScrollToBottomComposer,
   FunctionContext as ScrollToBottomFunctionContext
@@ -203,7 +205,7 @@ class Composer extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { props } = this;
     const { directLine, userID, username } = props;
 
diff --git a/packages/component/src/ErrorBox.js b/packages/component/src/ErrorBox.js
index fc0b97d63c..b6a3bd8f90 100644
--- a/packages/component/src/ErrorBox.js
+++ b/packages/component/src/ErrorBox.js
@@ -2,10 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import connectToWebChat from './connectToWebChat';
+import { localize } from './Localization/Localize';
 
-const ErrorBox = ({ children, message, styleSet }) => (
-  <div className={styleSet.errorBox}>
-    <div>{message}</div>
+const ErrorBox = ({ children, language, message, styleSet }) => (
+  <div aria-label={localize('ErrorMessage', language)} className={styleSet.errorBox}>
+    <div aria-label={message}>{message}</div>
     <div>{children}</div>
   </div>
 );
@@ -17,6 +18,7 @@ ErrorBox.defaultProps = {
 
 ErrorBox.propTypes = {
   children: PropTypes.any,
+  language: PropTypes.string.isRequired,
   message: PropTypes.string,
   styleSet: PropTypes.shape({
     errorBox: PropTypes.any.isRequired
diff --git a/packages/component/src/Localization/Localize.js b/packages/component/src/Localization/Localize.js
index b692b0e865..767c9c12e2 100644
--- a/packages/component/src/Localization/Localize.js
+++ b/packages/component/src/Localization/Localize.js
@@ -2,6 +2,7 @@
 /* eslint complexity: "off" */
 
 import connectToWebChat from '../connectToWebChat';
+import getLocaleString from './getLocaleString';
 
 import csCZ from './cs-CZ';
 import daDK from './da-DK';
@@ -150,4 +151,4 @@ export default connectToWebChat(({ language }) => ({ language }))(({ args, langu
   localize(text, language, ...(args || []))
 );
 
-export { localize };
+export { getLocaleString, localize };
diff --git a/packages/component/src/Localization/en-US.js b/packages/component/src/Localization/en-US.js
index d2c744b417..dff5b715b5 100644
--- a/packages/component/src/Localization/en-US.js
+++ b/packages/component/src/Localization/en-US.js
@@ -1,5 +1,7 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [1, 5, 24, 48, 60000, 3600000] }] */
 
+import getLocaleString from './getLocaleString';
+
 function xMinutesAgo(dateStr) {
   const date = new Date(dateStr);
   const dateTime = date.getTime();
@@ -27,24 +29,19 @@ function xMinutesAgo(dateStr) {
     return `Today`;
   } else if (deltaInHours <= 48) {
     return `Yesterday`;
-  } else if (window.Intl) {
-    return new Intl.DateTimeFormat('en-US').format(date);
   }
-
-  return date.toLocaleString('en-US', {
-    day: '2-digit',
-    hour: '2-digit',
-    hour12: false,
-    minute: '2-digit',
-    month: '2-digit',
-    year: 'numeric'
-  });
+  return getLocaleString(date, 'en-US');
 }
 
 function botSaidSomething(avatarInitials, text) {
   return `Bot ${avatarInitials} said, ${text}`;
 }
 
+function downloadFileWithFileSize(downloadFileText, fileName, size) {
+  // Full text should read: "Download file <filename> of size <filesize>"
+  return `${downloadFileText} ${fileName} of size ${size}`;
+}
+
 function userSaidSomething(avatarInitials, text) {
   return `User ${avatarInitials} said, ${text}`;
 }
@@ -64,8 +61,11 @@ export default {
   // '[Unknown Card '%1']': '[Unknown Card '%1']',
   'Adaptive Card parse error': 'Adaptive Card parse error',
   'Adaptive Card render error': 'Adaptive Card render error',
+  BotSent: 'Bot sent: ',
   Chat: 'Chat',
   'Download file': 'Download file',
+  DownloadFileWithFileSize: downloadFileWithFileSize,
+  ErrorMessage: 'Error message',
   'Microphone off': 'Microphone off',
   'Microphone on': 'Microphone on',
   Left: 'Left',
@@ -75,11 +75,15 @@ export default {
   Right: 'Right',
   Send: 'Send',
   Sending: 'Sending',
+  SendStatus: 'Send status: ',
+  SentAt: 'Sent at: ',
   Speak: 'Speak',
   'Starting…': 'Starting…',
   Tax: 'Tax',
   Total: 'Total',
   'Type your message': 'Type your message',
+  TypingIndicator: 'Showing typing indicator',
   'Upload file': 'Upload file',
+  UserSent: 'User sent: ',
   VAT: 'VAT'
 };
diff --git a/packages/component/src/Localization/getLocaleString.js b/packages/component/src/Localization/getLocaleString.js
new file mode 100644
index 0000000000..b6a64f0a72
--- /dev/null
+++ b/packages/component/src/Localization/getLocaleString.js
@@ -0,0 +1,15 @@
+export default function getLocaleString(value, language) {
+  const date = new Date(value);
+  const options = {
+    day: '2-digit',
+    hour: '2-digit',
+    hour12: false,
+    minute: '2-digit',
+    month: 'long'
+  };
+
+  if (window.Intl) {
+    return !!date && new Intl.DateTimeFormat(language, options).format(date);
+  }
+  return date.toLocaleDateString(language, options);
+}
diff --git a/packages/component/src/SendBox/ConnectivityStatus.js b/packages/component/src/SendBox/ConnectivityStatus.js
index 1b4159704a..8995398dea 100644
--- a/packages/component/src/SendBox/ConnectivityStatus.js
+++ b/packages/component/src/SendBox/ConnectivityStatus.js
@@ -1,3 +1,5 @@
+/* eslint react/no-unsafe: off */
+
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -19,7 +21,7 @@ class DebouncedConnectivityStatus extends React.Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { children, interval } = this.props;
     const { children: nextChildren, interval: nextInterval } = nextProps;
     const { since } = this.state;
diff --git a/packages/component/src/Utils/TimeAgo.js b/packages/component/src/Utils/TimeAgo.js
index 51b393e2a2..c27e8a61ad 100644
--- a/packages/component/src/Utils/TimeAgo.js
+++ b/packages/component/src/Utils/TimeAgo.js
@@ -1,7 +1,9 @@
+/* eslint react/no-unsafe: off */
+
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { localize } from '../Localization/Localize';
+import { getLocaleString, localize } from '../Localization/Localize';
 import connectToWebChat from '../connectToWebChat';
 import Timer from './Timer';
 
@@ -30,7 +32,7 @@ class TimeAgo extends React.Component {
     this.state = getStateFromProps(props);
   }
 
-  componentWillReceiveProps({ language, value }) {
+  UNSAFE_componentWillReceiveProps({ language, value }) {
     this.updateText({ language, value });
   }
 
@@ -47,9 +49,15 @@ class TimeAgo extends React.Component {
   render() {
     const { text, timer } = this.state;
 
+    const { language, value } = this.props;
+
+    const localizedSentAtTime = localize('SentAt', language) + getLocaleString(value, language);
+
     return (
       <React.Fragment>
-        {text}
+        {/* Because of differences in browser implementations, <span aria-label> is used to make the screen reader perform the same on different browsers in Edge v44 */}
+        <span aria-label={localizedSentAtTime} />
+        <span aria-hidden={true}>{text}</span>
         <Timer at={timer} onInterval={this.handleInterval} />
       </React.Fragment>
     );
diff --git a/packages/component/src/Utils/Timer.js b/packages/component/src/Utils/Timer.js
index c057b3e612..c7c864d46c 100644
--- a/packages/component/src/Utils/Timer.js
+++ b/packages/component/src/Utils/Timer.js
@@ -1,3 +1,5 @@
+/* eslint react/no-unsafe: off */
+
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -8,7 +10,7 @@ export default class Timer extends React.Component {
     this.schedule(at);
   }
 
-  componentWillReceiveProps({ at: nextAt }) {
+  UNSAFE_componentWillReceiveProps({ at: nextAt }) {
     const { at } = this.props;
 
     if (at !== nextAt) {
diff --git a/packages/playground/src/App.js b/packages/playground/src/App.js
index d01a58a2d6..0d9363c114 100644
--- a/packages/playground/src/App.js
+++ b/packages/playground/src/App.js
@@ -100,7 +100,8 @@ export default class extends React.Component {
       faulty: false,
       groupTimestamp: window.sessionStorage.getItem('PLAYGROUND_GROUP_TIMESTAMP'),
       hideSendBox: false,
-      language: window.sessionStorage.getItem('PLAYGROUND_LANGUAGE') || '',
+      language: window.sessionStorage.getItem('PLAYGROUND_LANGUAGE') || undefined,
+      richCardWrapTitle: false,
       sendTimeout: window.sessionStorage.getItem('PLAYGROUND_SEND_TIMEOUT') || '',
       sendTypingIndicator: true,
       userAvatarInitials: 'WC',