microsoft · compulim · Oct 26, 2020 · Oct 19, 2020 · Oct 20, 2020 · Oct 20, 2020
@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 
 -  Fixes [#3489](https://github.com/microsoft/BotFramework-WebChat/issues/3489). Fix AT saying 'Bot undefined said', by [@corinagum](https://github.com/corinagum) in PR [#3524](https://github.com/microsoft/BotFramework-WebChat/pull/3524)
+-  Fixes [#3547](https://github.com/microsoft/BotFramework-WebChat/issues/3547). Add attachment middleware for screen reader, by [@compulim](https://github.com/compulim) in PR [#3548](https://github.com/microsoft/BotFramework-WebChat/pull/3548)
 
 ### Changed
 

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <link href="assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        React: { useEffect },
+        ReactDOM: { render },
+        WebChat: {
+          Components: { BasicWebChat, Composer },
+          createDirectLine,
+          hooks: { useConnectivityStatus, useSendMessage }
+        },
+        WebChatTest: { conditions, createStore, host, pageObjects, timeouts, token }
+      } = window;
+
+      (async function () {
+        const SendOnConnect = () => {
+          const [connectivityStatus] = useConnectivityStatus();
+          const sendMessage = useSendMessage();
+
+          useEffect(() => {
+            connectivityStatus === 'connected' && sendMessage('card inputs');
+          }, [connectivityStatus, sendMessage]);
+
+          return false;
+        };
+
+        render(
+          <Composer
+            directLine={window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() })}
+            store={createStore()}
+          >
+            <BasicWebChat />
+            <SendOnConnect />
+          </Composer>,
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,9 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  describe('attachments in live region', () => {
+    test('Adaptive Card', () => runHTMLTest('accessibility.liveRegionAttachment.adaptiveCard.html'));
+  });
+});
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <link href="assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        React: { useEffect },
+        ReactDOM: { render },
+        WebChat: {
+          Components: { BasicWebChat, Composer },
+          createDirectLine,
+          hooks: { useConnectivityStatus, useSendMessage }
+        },
+        WebChatTest: { conditions, createStore, host, pageObjects, timeouts, token }
+      } = window;
+
+      (async function () {
+        const SendOnConnect = () => {
+          const [connectivityStatus] = useConnectivityStatus();
+          const sendMessage = useSendMessage();
+
+          useEffect(() => {
+            connectivityStatus === 'connected' && sendMessage('animationcard');
+          }, [connectivityStatus, sendMessage]);
+
+          return false;
+        };
+
+        render(
+          <Composer
+            directLine={window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() })}
+            store={createStore()}
+          >
+            <BasicWebChat />
+            <SendOnConnect />
+          </Composer>,
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+
+        // Replace the animation with a static image.
+        document
+          .querySelector('.webchat__bubble__content img')
+          .setAttribute(
+            'src',
+            'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg'
+          );
+
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+        await pageObjects.wait(conditions.allImagesLoaded(), timeouts.fetch);
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,9 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  describe('attachments in live region', () => {
+    test('animation card', () => runHTMLTest('accessibility.liveRegionAttachment.animationCard.html'));
+  });
+});
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <link href="assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        React: { useEffect },
+        ReactDOM: { render },
+        WebChat: {
+          Components: { BasicWebChat, Composer },
+          createDirectLine,
+          hooks: { useConnectivityStatus, useSendMessage }
+        },
+        WebChatTest: { conditions, createStore, host, pageObjects, timeouts, token }
+      } = window;
+
+      (async function () {
+        const SendOnConnect = () => {
+          const [connectivityStatus] = useConnectivityStatus();
+          const sendMessage = useSendMessage();
+
+          useEffect(() => {
+            connectivityStatus === 'connected' && sendMessage('audio');
+          }, [connectivityStatus, sendMessage]);
+
+          return false;
+        };
+
+        render(
+          <Composer
+            directLine={window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() })}
+            store={createStore()}
+          >
+            <BasicWebChat />
+            <SendOnConnect />
+          </Composer>,
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+        await pageObjects.wait(
+          conditions.mediaBuffered(document.getElementsByTagName('audio')[0]),
+          timeouts.fetchImage
+        );
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,9 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  describe('attachments in live region', () => {
+    test('audio', () => runHTMLTest('accessibility.liveRegionAttachment.audio.html'));
+  });
+});
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <link href="assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        React: { useEffect },
+        ReactDOM: { render },
+        WebChat: {
+          Components: { BasicWebChat, Composer },
+          createDirectLine,
+          hooks: { useConnectivityStatus, useSendMessage }
+        },
+        WebChatTest: { conditions, createStore, host, pageObjects, timeouts, token }
+      } = window;
+
+      (async function () {
+        const SendOnConnect = () => {
+          const [connectivityStatus] = useConnectivityStatus();
+          const sendMessage = useSendMessage();
+
+          useEffect(() => {
+            connectivityStatus === 'connected' && sendMessage('audiocard');
+          }, [connectivityStatus, sendMessage]);
+
+          return false;
+        };
+
+        render(
+          <Composer
+            directLine={window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() })}
+            store={createStore()}
+          >
+            <BasicWebChat />
+            <SendOnConnect />
+          </Composer>,
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+        await pageObjects.wait(
+          conditions.mediaBuffered(document.getElementsByTagName('audio')[0]),
+          timeouts.fetchImage
+        );
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,9 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  describe('attachments in live region', () => {
+    test('audio card', () => runHTMLTest('accessibility.liveRegionAttachment.audioCard.html'));
+  });
+});
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <link href="assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        React: { useEffect },
+        ReactDOM: { render },
+        WebChat: {
+          Components: { BasicWebChat, Composer },
+          createDirectLine,
+          hooks: { useConnectivityStatus, useSendFiles }
+        },
+        WebChatTest: { conditions, createStore, host, pageObjects, stringToArrayBuffer, timeouts, token }
+      } = window;
+
+      (async function () {
+        const SendOnConnect = () => {
+          const [connectivityStatus] = useConnectivityStatus();
+          const sendFiles = useSendFiles();
+
+          useEffect(() => {
+            if (connectivityStatus === 'connected') {
+              const blob = new Blob([stringToArrayBuffer('Hello, World!')]);
+
+              blob.name = 'hello.zip';
+
+              sendFiles([blob]);
+            }
+          }, [connectivityStatus, sendFiles]);
+
+          return false;
+        };
+
+        render(
+          <Composer
+            directLine={window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() })}
+            store={createStore()}
+          >
+            <BasicWebChat />
+            <SendOnConnect />
+          </Composer>,
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,9 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  describe('attachments in live region', () => {
+    test('file', () => runHTMLTest('accessibility.liveRegionAttachment.file.html'));
+  });
+});