microsoft · compulim · Nov 4, 2020 · Nov 3, 2020 · Nov 3, 2020 · Nov 3, 2020
@@ -43,7 +43,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#3371](https://github.com/microsoft/BotFramework-WebChat/issues/3371). [Accessibility]: Add alt property for image in HeroCards, by [@corinagum](https://github.com/corinagum) in PR [#3541](https://github.com/microsoft/BotFramework-WebChat/pull/3541)
 -  Fixes [#3310](https://github.com/microsoft/BotFramework-WebChat/issues/3310). Add quantity, tap and text field to ReceiptCards, by [@corinagum](https://github.com/corinagum) in PR [#3541](https://github.com/microsoft/BotFramework-WebChat/pull/3541)
 -  Fixes [#3514](https://github.com/microsoft/BotFramework-WebChat/issues/3514). Fix PoliCheck language errors, by [@corinagum](https://github.com/corinagum) in PR [#3545](https://github.com/microsoft/BotFramework-WebChat/pull/3545)
--  Fixes [#3537](https://github.com/microsoft/BotFramework-WebChat/issues/3537). [Accessibility]: Ensure `aria-roledescription` is only used on elements with implicit/explicit role based off of [WAI ARIA role attributes](https://www.w3.org/WAI/PF/aria/roles), by [@corinagum](https://github.com/corinagum) in PR [#3551](https://github.com/microsoft/BotFramework-WebChat/pull/3551)
+-  Fixes [#3537](https://github.com/microsoft/BotFramework-WebChat/issues/3537). [Accessibility]: Ensure `aria-roledescription` is only used on elements with implicit/explicit role based off of [WAI ARIA role attributes](https://www.w3.org/WAI/PF/aria/roles), by [@corinagum](https://github.com/corinagum) in PR [#3551](https://github.com/microsoft/BotFramework-WebChat/pull/3551) and [#3583](https://github.com/microsoft/BotFramework-WebChat/pull/3583)
 -  Fixes [#3431](https://github.com/microsoft/BotFramework-WebChat/issues/3431). Activities should not be delayed due to missing activity of type "typing", by [@compulim](https://github.com/compulim) in PR [#3554](https://github.com/microsoft/BotFramework-WebChat/pull/3554)
 -  Fixes [#3574](https://github.com/microsoft/BotFramework-WebChat/issues/3574). Creates workaround for Cognitive Services Speech SDK 1.13.1 regarding removed support of macOS/iOS, by [@compulim](https://github.com/compulim) in PR [#3576](https://github.com/microsoft/BotFramework-WebChat/pull/3576)
 -  Fixes [#3570](https://github.com/microsoft/BotFramework-WebChat/issues/3570). Adaptive Card `speak` property should be narrated by screen reader, by [@compulim](https://github.com/compulim) in PR [#3573](https://github.com/microsoft/BotFramework-WebChat/pull/3573) and PR [#3584](https://github.com/microsoft/BotFramework-WebChat/pull/3584)

@@ -3,6 +3,6 @@
  */
 
 describe('accessibility requirement', () => {
-  test('Activity container should have role="list", and message container role="listitem"', () =>
+  test('Activity container should have role="group", and message container role="group"', () =>
     runHTMLTest('accessibility.activity.stackedLayoutRole'));
 });
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        conditions,
+        createStore,
+        elements,
+        expect,
+        host,
+        pageObjects,
+        shareObservable,
+        timeouts,
+        token
+      } = window.WebChatTest;
+
+      const {
+        Components: { AdaptiveCardContent }
+      } = window.WebChat;
+
+      (async function () {
+        const store = createStore();
+        const directLine = window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() });
+        const baseProps = { directLine, store };
+        const webChatElement = document.getElementById('webchat');
+
+        window.WebChat.renderWebChat(baseProps, webChatElement);
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+
+        await pageObjects.sendMessageViaSendBox('carousel', { waitForSend: true });
+        await pageObjects.sendMessageViaSendBox('Hello world', { waitForSend: true });
+        await pageObjects.sendMessageViaSendBox('receiptcard', { waitForSend: true });
+        await pageObjects.wait(conditions.minNumActivitiesShown(6), timeouts.directLine);
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+
+        const invalidElements = [].filter.call(
+          document.querySelectorAll('[aria-roledescription]'),
+          element => !element.getAttribute('role')
+        );
+
+        invalidElements.length &&
+          console.error('Elements with "aria-roledescription" attribute but not "role" attribute', { invalidElements });
+
+        expect(invalidElements).toHaveProperty('length', 0);
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  test('All DOM elements with `aria-roledescription` must have an explicit role', () =>
+    runHTMLTest('accessibility.aria-roledescription'));
+});
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        conditions,
+        createStore,
+        elements,
+        expect,
+        host,
+        pageObjects,
+        shareObservable,
+        timeouts,
+        token
+      } = window.WebChatTest;
+
+      const {
+        Components: { AdaptiveCardContent }
+      } = window.WebChat;
+
+      (async function () {
+        const store = createStore();
+        const directLine = window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() });
+        const baseProps = { directLine, store };
+        const webChatElement = document.getElementById('webchat');
+
+        window.WebChat.renderWebChat(baseProps, webChatElement);
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+
+        await pageObjects.sendMessageViaSendBox('Hello, world', { waitForSend: true });
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+
+        const messageRole = document.querySelector('.webchat__stacked-layout__message-row').getAttribute('role');
+
+        expect(messageRole).toEqual('group');
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  test('Activity container should have role="group", and message container role="group"', () =>
+    runHTMLTest('accessibility.activity.stackedLayoutRole'));
+});
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        conditions,
+        createStore,
+        elements,
+        expect,
+        host,
+        pageObjects,
+        shareObservable,
+        timeouts,
+        token
+      } = window.WebChatTest;
+
+      const {
+        Components: { AdaptiveCardContent }
+      } = window.WebChat;
+
+      (async function () {
+        const store = createStore();
+        const directLine = window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() });
+        const baseProps = { directLine, store };
+        const webChatElement = document.getElementById('webchat');
+
+        window.WebChat.renderWebChat(baseProps, webChatElement);
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+
+        await pageObjects.sendMessageViaSendBox('carousel', { waitForSend: true });
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+
+        const attachmentRole = document.querySelector('.webchat__carousel-filmstrip__attachment').getAttribute('role');
+
+        expect(attachmentRole).toEqual('group');
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  test('Attachment container should have role="group", and message container role="group"', () =>
+    runHTMLTest('accessibility.attachment.stackedLayoutRole'));
+});
@@ -230,6 +230,7 @@ const CarouselFilmStrip = ({
                     /* Attachments do not have an ID, it is always indexed by number */
                     /* eslint-disable-next-line react/no-array-index-key */
                     key={index}
+                    role="group"
                   >
                     <ScreenReaderText text={attachedAlt} />
                     {/* eslint-disable-next-line react/no-array-index-key */}

@@ -189,6 +189,7 @@ const StackedLayout = ({
               /* attachments do not have an ID, it is always indexed by number */
               /* eslint-disable-next-line react/no-array-index-key */
               key={index}
+              role="group"
             >
               <ScreenReaderText text={attachedAlt} />
               <Bubble

@@ -500,6 +500,7 @@ const InternalTranscriptScrollable = ({ activities, children }) => {
       <ul
         aria-roledescription={transcriptRoleDescription}
         className={classNames(activitiesStyleSet + '', 'webchat__basic-transcript__transcript')}
+        role="log"
       >
         {React.Children.map(children, (child, index) => (
           <React.Fragment>