Add axe-core and fix tests

CHANGELOG.md

@@ -22,15 +22,27 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Breaking changes
+
+-  When `activity.channelData['webchat:fallback-text']` is present but empty, it will no longer applies `aria-hidden` to the activity
+   -  The activity will not be narrated through live region. However, when navigating the transcript, it will be narrated as empty
+   -  To make an activity presentational or hide from screen reader, please use `activityMiddleware` to customize the rendering
+
 ### Added
 
 -  Resolved [#4643](https://github.com/microsoft/BotFramework-WebChat/issues/4643). Decoupling `botframework-directlinejs` from business logic of Web Chat for better tree-shaking, by [@compulim](https://github.com/compulim), in PR [#4645](https://github.com/microsoft/BotFramework-WebChat/pull/4645) and PR [#4648](https://github.com/microsoft/BotFramework-WebChat/pull/4648)
--  Related to [#4650](https://github.com/microsoft/BotFramework-WebChat/issues/4650). Added automated accessibility check using [`axe-core`](https://npmjs.com/package/axe-core)
-   -  HTML test: using `<main>` for the root container, by [@compulim](https://github.com/compulim), in PR [#4684](https://github.com/microsoft/BotFramework-WebChat/pull/4684)
-   -  HTML test: changed contrast ratio in tests that use different background colors, by [@compulim](https://github.com/compulim), in PR [#4686](https://github.com/microsoft/BotFramework-WebChat/pull/4686)
+-  Resolved [#4650](https://github.com/microsoft/BotFramework-WebChat/issues/4650). Added automated accessibility check using [`axe-core`](https://npmjs.com/package/axe-core)
+   -  Add `axe-core` in end-to-end tests, by [@compulim](https://github.com/compulim), in PR [#4704](https://github.com/microsoft/BotFramework-WebChat/pull/4704)
+   -  HTML test: using `<main>` for the root container, by [@compulim](https://github.com/compulim), in PR [#4684](https://github.com/microsoft/BotFramework-WebChat/pull/4684) and PR [#4704](https://github.com/microsoft/BotFramework-WebChat/pull/4704)
+   -  HTML test: changed contrast ratio in tests that use different background colors, by [@compulim](https://github.com/compulim), in PR [#4686](https://github.com/microsoft/BotFramework-WebChat/pull/4686) and PR [#4704](https://github.com/microsoft/BotFramework-WebChat/pull/4704)
    -  Added `ponyfill` prop to `<ReactWebChat>`/`<Composer>` and `createStoreWithOptions`, by [@compulim](https://github.com/compulim), in PR [#4662](https://github.com/microsoft/BotFramework-WebChat/pull/4662)
       -  This is for development scenarios where fake timer is needed and will only applies to Web Chat only
    -  HTML test: fix accessibility issues on HTML file, by [@compulim](https://github.com/compulim), in PR [#4685](https://github.com/microsoft/BotFramework-WebChat/pull/4685)
+   -  HTML test: ensure all images has alternate text, by [@compulim](https://github.com/compulim), in PR [#4704](https://github.com/microsoft/BotFramework-WebChat/pull/4704)
+   -  Adaptive Cards: always set `role` attribute, by [@compulim](https://github.com/compulim), in PR [#4704](https://github.com/microsoft/BotFramework-WebChat/pull/4704)
+   -  Adaptive Cards: update host config to use lighter color for disabled inputs, by [@compulim](https://github.com/compulim), in PR [#4704](https://github.com/microsoft/BotFramework-WebChat/pull/4704)
+   -  Keyboard help screen: remove `<header>` container, by [@compulim](https://github.com/compulim), in PR [#4704](https://github.com/microsoft/BotFramework-WebChat/pull/4704)
+   -  Live region: added `<label>` for input fields in Adaptive Cards, by [@compulim](https://github.com/compulim), in PR [#4704](https://github.com/microsoft/BotFramework-WebChat/pull/4704)
 
 ### Fixed
 

__tests__/html/accessibility.delayActivity.withoutReplyToId.html

@@ -20,7 +20,7 @@
           {
             directLine,
             ponyfill: clock,
-            store: testHelpers.createStore({ ponyfill: clock })
+            store: testHelpers.createStoreWithOptions({ ponyfill: clock })
           },
           document.getElementById('webchat')
         );

__tests__/html/accessibility.landmarkRole.valid.html

@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <main id="webchat"></main>
+    <div id="webchat"></div>
     <script>
       run(async function () {
         WebChat.renderWebChat(

__tests__/html/activityGrouping.avatarMiddleware.atBottom.html

@@ -25,15 +25,20 @@
         const PortraitAvatar = ({ fromUser }) => {
           const style = useMemo(() => ({ borderRadius: 4, width: '100%' }), []);
 
-          return <img src={fromUser ? '/assets/user-avatar.jpg' : '/assets/bot-avatar.jpg'} style={style} />;
+          return (
+            <img alt="Rinna" src={fromUser ? '/assets/user-avatar.jpg' : '/assets/bot-avatar.jpg'} style={style} />
+          );
         };
 
-        const avatarMiddleware = () => next => (...args) => {
-          const [{ activity, fromUser, ...otherArgs }] = args;
-          const { id } = activity;
+        const avatarMiddleware =
+          () =>
+          next =>
+          (...args) => {
+            const [{ activity, fromUser, ...otherArgs }] = args;
+            const { id } = activity;
 
-          return <PortraitAvatar fromUser={fromUser} />;
-        };
+            return <PortraitAvatar fromUser={fromUser} />;
+          };
 
         WebChat.renderWebChat(
           {
@@ -75,17 +80,20 @@
                   {
                     contentType: 'image/jpeg',
                     contentUrl:
-                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg'
+                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg',
+                    name: 'front of Surface Pro'
                   },
                   {
                     contentType: 'image/jpeg',
                     contentUrl:
-                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg'
+                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg',
+                    name: 'back of Surface Pro'
                   },
                   {
                     contentType: 'image/jpeg',
                     contentUrl:
-                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface3.jpg'
+                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface3.jpg',
+                    name: 'side of Surface Pro'
                   }
                 ],
                 from: { role: 'bot' },

__tests__/html/activityGrouping.avatarMiddleware.html

@@ -68,25 +68,30 @@
         const PortraitAvatar = ({ fromUser }) => {
           const style = useMemo(() => ({ borderRadius: 4, width: '100%' }), []);
 
-          return <img src={fromUser ? '/assets/user-avatar.jpg' : '/assets/bot-avatar.jpg'} style={style} />;
+          return (
+            <img alt="Rinna" src={fromUser ? '/assets/user-avatar.jpg' : '/assets/bot-avatar.jpg'} style={style} />
+          );
         };
 
-        const avatarMiddleware = () => next => (...args) => {
-          const [{ activity, fromUser, ...otherArgs }] = args;
-          const { id } = activity;
-
-          if (/^(1|2)/.test(id)) {
-            return <PortraitAvatar fromUser={fromUser} />;
-          } else if (/^3/.test(id)) {
-            const renderNext = next({ activity, fromUser, ...otherArgs });
-
-            return renderNext && (() => <AvatarWithOnlineStatus>{renderNext()}</AvatarWithOnlineStatus>);
-          } else if (id === '4.0' || id === '5.0') {
-            return false;
-          }
+        const avatarMiddleware =
+          () =>
+          next =>
+          (...args) => {
+            const [{ activity, fromUser, ...otherArgs }] = args;
+            const { id } = activity;
+
+            if (/^(1|2)/.test(id)) {
+              return <PortraitAvatar fromUser={fromUser} />;
+            } else if (/^3/.test(id)) {
+              const renderNext = next({ activity, fromUser, ...otherArgs });
+
+              return renderNext && (() => <AvatarWithOnlineStatus>{renderNext()}</AvatarWithOnlineStatus>);
+            } else if (id === '4.0' || id === '5.0') {
+              return false;
+            }
 
-          return next(...args);
-        };
+            return next(...args);
+          };
 
         WebChat.renderWebChat(
           {
@@ -148,8 +153,7 @@
                 channelData: { state: 'sent' },
                 from: { role: 'user' },
                 id: '4.1',
-                text:
-                  'Although this activity has avatar, it is in the same group of activities with avatar disabled. So no avatar will be shown. A blank gutter space is expected.',
+                text: 'Although this activity has avatar, it is in the same group of activities with avatar disabled. So no avatar will be shown. A blank gutter space is expected.',
                 timestamp: 0,
                 type: 'message'
               },
@@ -159,12 +163,14 @@
                   {
                     contentType: 'image/jpeg',
                     contentUrl:
-                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg'
+                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg',
+                    name: 'front of Surface Pro'
                   },
                   {
                     contentType: 'image/jpeg',
                     contentUrl:
-                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg'
+                      'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg',
+                    name: 'back of Surface Pro'
                   }
                 ],
                 from: { role: 'bot' },
@@ -176,8 +182,7 @@
               {
                 from: { role: 'bot' },
                 id: '5.1',
-                text:
-                  'Although this activity has avatar, it is in the same group of activities with avatar disabled. So no avatar will be shown. A blank gutter space is expected.',
+                text: 'Although this activity has avatar, it is in the same group of activities with avatar disabled. So no avatar will be shown. A blank gutter space is expected.',
                 timestamp: 0,
                 type: 'message'
               }

__tests__/html/assets/transcripts/carousel-hero-cards.json

@@ -1,4 +1,4 @@
-[
+  [
   {
     "attachmentLayout": "carousel",
     "attachments": [
@@ -10,6 +10,7 @@
           "text": "Price: $XXX.XX USD",
           "images": [
             {
+              "alt": "front of Surface Pro",
               "url": "https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg"
             }
           ],
@@ -35,6 +36,7 @@
           "text": "Price: $XXX.XX USD",
           "images": [
             {
+              "alt": "back of Surface Pro",
               "url": "https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg"
             }
           ],

__tests__/html/autoScroll.snap.default.html

@@ -60,7 +60,7 @@
           {
             directLine,
             store,
-            styleOptions: { subtle: '#666' }
+            styleOptions: { subtle: 'Black' }
           },
           webChatElement
         );
@@ -89,8 +89,8 @@
         await pageConditions.minNumActivitiesShown(4);
         await pageConditions.scrollStabilized();
 
-        expect(scrollable.scrollTop).toBe(
-          scrollable.scrollHeight - scrollable.offsetHeight,
+        expect(Math.abs(scrollable.scrollTop - (scrollable.scrollHeight - scrollable.offsetHeight)) < 1).toBe(
+          true,
           'scrollable should be at bottom'
         );
 

__tests__/html/customization.basicWebChat.restructure.html

@@ -10,12 +10,19 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <main id="webchat"></main>
+    <div id="webchat"></div>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         ReactDOM: { render },
         WebChat: {
-          Components: { AccessKeySinkSurface, BasicToaster, BasicTranscript, BasicConnectivityStatus, BasicSendBox, Composer },
+          Components: {
+            AccessKeySinkSurface,
+            BasicToaster,
+            BasicTranscript,
+            BasicConnectivityStatus,
+            BasicSendBox,
+            Composer
+          },
           createDirectLine
         }
       } = window;
@@ -25,12 +32,13 @@
         const store = testHelpers.createStore();
 
         const classes = {
-          surface: "surface-class-name",
-          sendBox: "send-box-class-name",
-          transcript: "transcript-class-name",
-          customComponent: "custom-component-class-name"
-        }
-        const role = "main";
+          surface: 'surface-class-name',
+          sendBox: 'send-box-class-name',
+          transcript: 'transcript-class-name',
+          customComponent: 'custom-component-class-name'
+        };
+
+        const role = 'main';
 
         render(
           <Composer directLine={directLine} store={store}>
@@ -55,11 +63,11 @@
         expect(surface.role).toEqual(role);
 
         const components = surface.childNodes;
-        expect(components[0].className).toContain("toaster");
+        expect(components[0].className).toContain('toaster');
         expect(components[1].className).toContain(classes.sendBox);
-        expect(components[2].textContent).toContain("Connectivity Status");
+        expect(components[2].textContent).toContain('Connectivity Status');
         expect(components[3].className).toContain(classes.customComponent);
-        expect(components[4].className).toContain("keyboard-help");
+        expect(components[4].className).toContain('keyboard-help');
         expect(components[5].className).toContain(classes.transcript);
 
         await host.snapshot();

__tests__/html/hooks.useActiveTyping.html

@@ -10,7 +10,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         WebChat: {

__tests__/html/hooks.useActiveTyping.setter.html

@@ -10,7 +10,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         WebChat: {

__tests__/html/hooks.useActiveTyping.variable.html

@@ -10,7 +10,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         WebChat: {

__tests__/html/hooks.useTrackTiming.async.html

@@ -10,7 +10,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         WebChat: {

__tests__/html/hooks.useTrackTiming.sync.html

@@ -10,7 +10,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
         WebChat: {

__tests__/html/ponyfill.html

@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const clock = lolex.createClock();

__tests__/html/ponyfill.reactOnly.html

@@ -7,7 +7,7 @@
     <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
   </head>
   <body>
-    <div id="webchat"></div>
+    <main id="webchat"></main>
     <script>
       run(async function () {
         const clock = lolex.createClock();
@@ -18,7 +18,7 @@
         WebChat.renderWebChat(
           {
             directLine,
-            ponyfill: { clock },
+            ponyfill: clock,
             store
           },
           document.getElementById('webchat')