Redo accessibility for transcript

.eslintrc.yml

@@ -54,6 +54,9 @@ overrides:
       no-empty-function: off
       '@typescript-eslint/no-empty-function': error
 
+      no-duplicate-imports: off
+      '@typescript-eslint/no-duplicate-imports': error
+
       # TODO #4003: We will rework on these rules
       '@typescript-eslint/ban-ts-comment': off
       '@typescript-eslint/ban-types': off

CHANGELOG.md

@@ -48,6 +48,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4081](https://github.com/microsoft/BotFramework-WebChat/issues/4081). Updated typing for `StyleOptions.suggestedActionsStackedOverflow`, by [@compulim](https://github.com/compulim), in PR [#4083](https://github.com/microsoft/BotFramework-WebChat/pull/4083)
 -  Fixes [#4075](https://github.com/microsoft/BotFramework-WebChat/issues/4075). Added `box-sizing: border-box` to all descendants under Adaptive Cards, by [@compulim](https://github.com/compulim), in PR [#4084](https://github.com/microsoft/BotFramework-WebChat/pull/4084)
 -  Fixes [#4104](https://github.com/microsoft/BotFramework-WebChat/issues/4104) and [#4105](https://github.com/microsoft/BotFramework-WebChat/issues/4105). Fixed invalid entry in `core/package-lock.json`, removed `playground/host`, and added script to rebase URLs in `package-lock.json`, by [@compulim](https://github.com/compulim), in PR [#4106](https://github.com/microsoft/BotFramework-WebChat/pull/4106)
+-  Fixes [#3933](https://github.com/microsoft/BotFramework-WebChat/issues/3933), [#3934](https://github.com/microsoft/BotFramework-WebChat/issues/3934), [#3994](https://github.com/microsoft/BotFramework-WebChat/issues/3994) and [#4019](https://github.com/microsoft/BotFramework-WebChat/issues/4019), for various accessibility improvements, by [@compulim](https://github.com/compulim), in PR [#4108](https://github.com/microsoft/BotFramework-WebChat/pull/4108)
+   -  Added a new keyboard help screen
+   -  Reduce repetitions when reading message content and briefier readings
+   -  Separated hints for links and interactive widgets
+   -  Focus trap when focus is on interactive attachments or Adaptive Cards
+   -  Using `role="feed"`/`role="article"` for chat history and its messages
+   -  Always assign a message to `aria-activedescendant` for chat history
+   -  Updated verbiage from "transcript" to "chat history"
+   -  Fixed overlapping hit zone causing clicking on bottom edge of message bubble may focus on the next activity instead
+   -  Fixed typings of `useFocus` and `useLocalizer`
 
 ### Changed
 

__tests__/clockSkew.js

@@ -103,7 +103,7 @@ describe('Clock skew', () => {
     await driver.wait(minNumActivitiesShown(3), timeouts.directLine);
 
     const activityElements = await getActivityElements(driver);
-    const lastActivityParagraphElement = await activityElements[activityElements.length - 1].findElement(By.css('.webchat__basic-transcript__activity-box p'));
+    const lastActivityParagraphElement = await activityElements[activityElements.length - 1].findElement(By.css('.webchat__basic-transcript__activity-body p'));
 
     await expect(lastActivityParagraphElement.getText()).resolves.toBe(
       'echo This outgoing activity should be the last in the list.'
@@ -146,7 +146,7 @@ describe('Clock skew', () => {
     await driver.wait(minNumActivitiesShown(3), timeouts.directLine);
 
     const activityElements = await getActivityElements(driver);
-    const firstActivityParagraphElement = await activityElements[0].findElement(By.css('.webchat__basic-transcript__activity-box p'));
+    const firstActivityParagraphElement = await activityElements[0].findElement(By.css('.webchat__basic-transcript__activity-body p'));
 
     await expect(firstActivityParagraphElement.getText()).resolves.toBe(
       'echo This outgoing activity should be the first in the list before echo back, and last after the echo back.'

__tests__/html/accessibility.adaptiveCard.withoutTapAction.html

@@ -24,10 +24,25 @@
         await pageConditions.minNumActivitiesShown(2);
         await pageConditions.scrollToBottomCompleted();
 
+        // SETUP: Focus on the first <select> inside the Adaptive Cards.
         document.querySelector('select.ac-input').focus();
 
+        // WHEN: SHIFT-TAB key is pressed.
         await host.sendShiftTab();
 
+        // THEN: It should focus on the last control inside the Adaptive Cards.
+        expect(document.activeElement.innerText).toBe('Dismiss');
+
+        // WHEN: TAB is pressed.
+        await host.sendTab();
+
+        // THEN: It should focus on the first control inside the Adaptive Cards.
+        expect(document.activeElement).toBe(document.querySelector('select.ac-input'));
+
+        // WHEN: ESCAPE key is pressed.
+        await host.sendKeys('ESCAPE');
+
+        // THEN: It should send the focus back to the transcript.
         await pageConditions.became(
           'focus is on the transcript',
           () => document.activeElement === pageElements.transcript(),

__tests__/html/accessibility.liveRegionActivity.htmlInMarkdown.html

@@ -62,19 +62,20 @@
 
         await pageConditions.uiConnected();
         await pageConditions.numActivitiesShown(6);
+        await pageConditions.liveRegionStabilized();
 
         const screenReaderTexts = [].map.call(pageElements.transcriptLiveRegion().children, child =>
           testHelpers.getAllTextContents(child).join('\n')
         );
 
-        expect(screenReaderTexts).toHaveLength(6);
+        expect(screenReaderTexts).toHaveLength(7);
 
         expect(screenReaderTexts[0]).toBe('Bot said:\nExclamation mark Warning.\nSent at January 1 at 12:34 PM');
         expect(screenReaderTexts[1]).toBe('Bot said:\nHello\nWorld\nAloha\nSent at January 1 at 12:34 PM');
         expect(screenReaderTexts[2]).toBe('Bot said:\nHello\nWorld\nSent at January 1 at 12:34 PM');
         expect(screenReaderTexts[3]).toBe('Bot said:\nUSD\n1.00\nJPY\n0.91\nSent at January 1 at 12:34 PM');
         expect(screenReaderTexts[4]).toBe('Bot said:\nHello, World!\nSent at January 1 at 12:34 PM');
-        expect(screenReaderTexts[5]).toBe('Bot said:\nHello, Bing!\nSent at January 1 at 12:34 PM');
+        expect(screenReaderTexts[6]).toBe('One or more links in the message. Press shift tab key 2 to 3 times to switch to the chat history. Then click on the message to interact.');
 
         // The screenshot should show the message in Markdown format, i.e. <strong> and <code>.
         await host.snapshot();

__tests__/html/accessibility.liveRegionActivity.performance.html

@@ -50,6 +50,7 @@
 
         await pageConditions.uiConnected();
         await pageConditions.numActivitiesShown(10);
+        await pageConditions.liveRegionStabilized();
 
         // Unmount Web Chat, and re-render everything.
         ReactDOM.unmountComponentAtNode(container);

__tests__/html/accessibility.liveRegionActivity.speakOverrideAttachments.html

@@ -63,6 +63,7 @@
 
         await pageConditions.uiConnected();
         await pageConditions.numActivitiesShown(4);
+        await pageConditions.liveRegionStabilized();
 
         const screenReaderTexts = [].map.call(pageElements.transcriptLiveRegion().children, child =>
           testHelpers.getAllTextContents(child).join('\n')
@@ -82,23 +83,20 @@
         );
         expect(screenReaderTexts[2]).toBe('Bot said:\nA text: Hello.\nA text: World!\nSent at January 1 at 12:34 PM');
 
-        const activityAlts = [].map.call(
-          document.querySelectorAll(
-            '.webchat__basic-transcript__activity .webchat__screen-reader-activity[aria-roledescription="message"]'
-          ),
-          element => testHelpers.getAllTextContents(element).join('\n')
+        const activityAlts = [].map.call(pageElements.transcriptLiveRegion().children, element =>
+          testHelpers.getAllTextContents(element).join('\n')
         );
 
         // The last activity have "webchat:fallback-text" field set to empty string. It is treated as role="presentation" and not emitted DOM element for screen reader.
         expect(screenReaderTexts).toHaveLength(3);
 
         // In interactive transcript, this is narrated as "2 attachments".
         expect(activityAlts[0]).toBe(
-          'Bot said:\nNo “webchat:fallback-text” field.\n2 attachments.\nSent at January 1 at 12:34 PM'
+          'Bot said:\nNo “webchat:fallback-text” field.\nA text: Hello.\nA text: World!\nSent at January 1 at 12:34 PM'
         );
 
         expect(activityAlts[1]).toBe('Bot said:\nWith "webchat:fallback-text" field.\nSent at January 1 at 12:34 PM');
-        expect(activityAlts[2]).toBe('Bot said:\n2 attachments.\nSent at January 1 at 12:34 PM');
+        expect(activityAlts[2]).toBe('Bot said:\nA text: Hello.\nA text: World!\nSent at January 1 at 12:34 PM');
       });
     </script>
   </body>

__tests__/html/accessibility.liveRegionActivity.text.html

@@ -88,6 +88,7 @@
 
         await pageConditions.uiConnected();
         await pageConditions.numActivitiesShown(7);
+        await pageConditions.liveRegionStabilized();
 
         const screenReaderTexts = [].map.call(pageElements.transcriptLiveRegion().children, child =>
           testHelpers.getAllTextContents(child).join('\n')

__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.html

@@ -52,6 +52,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         await pageObjects.focusSendBoxTextBox();
 

__tests__/html/accessibility.liveRegionAttachment.adaptiveCard.speakProperty.html

@@ -52,6 +52,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         await pageObjects.focusSendBoxTextBox();
 

__tests__/html/accessibility.liveRegionAttachment.animationCard.html

@@ -61,6 +61,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         await pageObjects.focusSendBoxTextBox();
 

__tests__/html/accessibility.liveRegionAttachment.audio.html

@@ -52,6 +52,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         const audioElement = document.getElementsByTagName('audio')[0];
 

__tests__/html/accessibility.liveRegionAttachment.audioCard.html

@@ -52,6 +52,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         const audioElement = document.getElementsByTagName('audio')[0];
 

__tests__/html/accessibility.liveRegionAttachment.file.html

@@ -58,6 +58,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         await pageObjects.focusSendBoxTextBox();
 

__tests__/html/accessibility.liveRegionAttachment.heroCard.html

@@ -52,6 +52,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         await pageObjects.focusSendBoxTextBox();
 

__tests__/html/accessibility.liveRegionAttachment.image.html

@@ -52,6 +52,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         await pageObjects.focusSendBoxTextBox();
 

__tests__/html/accessibility.liveRegionAttachment.receiptCard.html

@@ -54,6 +54,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         await pageObjects.focusSendBoxTextBox();
 

__tests__/html/accessibility.liveRegionAttachment.signInCard.html

@@ -52,6 +52,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         await pageObjects.focusSendBoxTextBox();
 

__tests__/html/accessibility.liveRegionAttachment.thumbnailCard.html

@@ -52,6 +52,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         await pageObjects.focusSendBoxTextBox();
 

__tests__/html/accessibility.liveRegionAttachment.unknownCard.html

@@ -53,6 +53,7 @@
           await pageConditions.allImagesLoaded();
           await pageConditions.allOutgoingActivitiesSent();
           await pageConditions.scrollToBottomCompleted();
+          await pageConditions.liveRegionStabilized();
 
           await pageObjects.focusSendBoxTextBox();
 

__tests__/html/accessibility.liveRegionAttachment.video.html

@@ -52,6 +52,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         const videoElement = document.getElementsByTagName('video')[0];
 

__tests__/html/accessibility.liveRegionAttachment.videoCard.html

@@ -52,6 +52,7 @@
         await pageConditions.allImagesLoaded();
         await pageConditions.allOutgoingActivitiesSent();
         await pageConditions.scrollToBottomCompleted();
+        await pageConditions.liveRegionStabilized();
 
         const videoElement = document.getElementsByTagName('video')[0];
 

__tests__/html/assets/accessibility.liveRegionAttachment.css

@@ -1,4 +1,4 @@
-.webchat__screen-reader-activity {
+.webchat__screen-reader-activity, .webchat__live-region-transcript__interactive_note {
   color: initial !important;
   height: initial !important;
   opacity: initial !important;

__tests__/html/autoScroll.acknowledgement.html

@@ -127,10 +127,10 @@
 
         expect(numActivitiesByAcknowledgement()).toEqual({ acknowledged: 4, unacknowledged: 3 });
 
-        const activityElementAtTopOfView = document.querySelectorAll('.webchat__basic-transcript__activity')[4];
-        const scrollable = document.querySelector('.webchat__basic-transcript__scrollable');
+        const { top: activityElementAtTopOfViewOffsetTop } = pageObjects.getActivityBoundingBoxes()[4];
+        const scrollable = pageElements.transcriptScrollable();
 
-        expect(scrollable.scrollTop).toBe(activityElementAtTopOfView.offsetTop);
+        expect(scrollable.scrollTop).toBe(activityElementAtTopOfViewOffsetTop);
 
         await pageObjects.sendMessageViaSendBox('Aloha!');
 
@@ -160,9 +160,7 @@
 
         expect(numActivitiesByAcknowledgement()).toEqual({ acknowledged: 9, unacknowledged: 3 });
 
-        expect(scrollable.scrollTop).toBe(
-          document.querySelectorAll('.webchat__basic-transcript__activity')[9].offsetTop
-        );
+        expect(scrollable.scrollTop).toBe(pageObjects.getActivityBoundingBoxes()[9].top);
 
         // Scroll to bottom
         scrollable.scrollTop = scrollable.scrollHeight;

__tests__/html/autoScroll.afterSend.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        WebChat.renderWebChat(
+          {
+            directLine: WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() }),
+            store: testHelpers.createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        // SETUP: Send "help" after connect.
+        await pageConditions.uiConnected();
+        await pageObjects.sendMessageViaSendBox('help');
+        await pageConditions.minNumActivitiesShown(2);
+        await pageConditions.scrollToBottomCompleted();
+
+        // WHEN: Scroll to top.
+        await pageObjects.scrollToTop();
+
+        // THEN: It should not show the "New messages" button.
+        await pageConditions.scrollToEndButtonHidden();
+
+        // WHEN: Send "Hello, World!" message.
+        await pageObjects.sendMessageViaSendBox('Hello, World!');
+
+        // THEN: It should scroll to bottom after send.
+        await pageConditions.scrollToBottomCompleted();
+        await pageConditions.minNumActivitiesShown(4);
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/html/autoScroll.afterSend.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Auto-scroll', () => {
+  test('should scroll to bottom on send', () => runHTML('autoScroll.afterSend.html'));
+});

__tests__/html/autoScroll.snap.activityAndPage.html

@@ -94,12 +94,10 @@
         await pageConditions.minNumActivitiesShown(5);
         await pageConditions.scrollStabilized();
 
-        const activityElementAtBottomOfView = document.querySelectorAll('.webchat__basic-transcript__activity')[3];
+        const { bottom: activityElementAtBottomOfViewOffsetBottom } = pageObjects.getActivityBoundingBoxes()[3];
 
         expect(scrollable.scrollTop).toBe(
-          activityElementAtBottomOfView.offsetTop +
-            activityElementAtBottomOfView.offsetHeight -
-            scrollable.offsetHeight,
+          activityElementAtBottomOfViewOffsetBottom - scrollable.offsetHeight,
           'scrollable should be at 1 activity + 100px'
         );
 
@@ -113,9 +111,9 @@
         await pageConditions.minNumActivitiesShown(7);
         await pageConditions.scrollStabilized();
 
-        const activityElementAtTopOfView = document.querySelector('.webchat__basic-transcript__activity:nth-child(7)');
+        const { top } = pageObjects.getActivityBoundingBoxes()[6];
 
-        expect(scrollable.scrollTop).toBe(activityElementAtTopOfView.offsetTop - 100);
+        expect(scrollable.scrollTop).toBe(top - 100);
 
         await host.snapshot();
       });

__tests__/html/autoScroll.snap.page.html

@@ -84,11 +84,11 @@
 
         expect(numActivitiesByAcknowledgement()).toEqual({ acknowledged: 3, unacknowledged: 1 });
 
-        const activityElementAtTopOfView = document.querySelector('.webchat__basic-transcript__activity:nth-child(4)');
+        const { top: activityElementAtTopOfViewOffsetTop } = pageObjects.getActivityBoundingBoxes()[3];
         const scrollable = document.querySelector('.webchat__basic-transcript__scrollable');
 
         expect(~~scrollable.scrollTop).toBeCloseTo(
-          ~~(activityElementAtTopOfView.offsetTop - scrollable.offsetHeight * 0.8)
+          ~~(activityElementAtTopOfViewOffsetTop - scrollable.offsetHeight * 0.8)
         );
 
         await host.snapshot();

__tests__/html/autoScroll.withPostBack.page.html

@@ -168,7 +168,7 @@
         await pageConditions.numActivitiesShown(8);
 
         // EXPECT: Pause scrolling when the "Minim voluptate" activity (index = 6) is at the top of the screen.
-        await pageConditions.scrollStabilized(pageElements.activities()[6].offsetTop);
+        await pageConditions.scrollStabilized(pageObjects.getActivityBoundingBoxes()[6].top);
 
         await host.snapshot();
       });

__tests__/html/focusManagement.disableAdaptiveCard.manual.html

@@ -46,7 +46,7 @@
 
         await host.snapshot();
 
-        await host.sendTab();
+        await host.sendKeys('ESCAPE');
 
         await host.snapshot();