Fix ARIA role of transcript when connection is pending (#4420)

beyackle2 · beyackle · compulim · web-flow · commit 230327ee8f3e · 2022-11-08T19:12:48.000-08:00
* let load state change ARIA role of transcript

* fix some errors

* fix CHANGELOG.md

* fix changelog

* apply fixes from PR

* Hide element of role="feed" when empty

* Update entry

Co-authored-by: Benjamin Yackley &lt;beyackle@microsoft.com&gt;
Co-authored-by: William Wong &lt;compulim@users.noreply.github.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  Card action image alt text should use `imageAltText` field and fallback to `text` field, by [@compulim](https://github.com/compulim) in PR [#4333](https://github.com/microsoft/BotFramework-WebChat/pull/4333)
 -  Fixes [#4472](https://github.com/microsoft/BotFramework-WebChat/issues/4472). Removed `role` attributes for notification bar and use `<div>` instead of `<ul>`/`<li>`, by [@compulim](https://github.com/compulim) in PR [#4475](https://github.com/microsoft/BotFramework-WebChat/pull/4475)
+-  Fixes [#4393](https://github.com/microsoft/BotFramework-WebChat/issues/4393). Renders `<section role="feed">` only if there are one or more activities contained within, by [@beyackle2](https://github.com/beyackle2) and [@compulim](https://github.com/compulim), in PR [#4420](https://github.com/microsoft/BotFramework-WebChat/pull/4420)
 
 ### Changed
 
diff --git a/__tests__/html/accessibility.transcript.initialEmpty.html b/__tests__/html/accessibility.transcript.initialEmpty.html
@@ -0,0 +1,41 @@
+<!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 () {
+        const store = testHelpers.createStore();
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        // WHEN: Web Chat is rendered without any activities.
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // THEN: It should not have any role="feed".
+        expect(pageElements.transcript().querySelector('[role="feed"]')).toBeFalsy();
+
+        // THEN: It should not violating any accessibility rules.
+        pageObjects.verifyDOMIntegrity();
+
+        // WHEN: An activity "Hello, World!" arrive.
+        directLine.emulateIncomingActivity('Hello, World!');
+
+        // THEN: It should have 1 activity shown.
+        await pageConditions.numActivitiesShown(1);
+
+        // THEN: It should have role="feed".
+        expect(pageElements.transcript().querySelector('[role="feed"]')).toBeTruthy();
+
+        // THEN: The `role="feed"` element should have at least 1 <article> or `role="article"`.
+        pageObjects.verifyDOMIntegrity();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.transcript.initialEmpty.js b/__tests__/html/accessibility.transcript.initialEmpty.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  test('should always have at least one <article> under [role="feed"]', () =>
+    runHTML('accessibility.transcript.initialEmpty.html'));
+});
diff --git a/packages/component/src/BasicTranscript.tsx b/packages/component/src/BasicTranscript.tsx
@@ -15,7 +15,7 @@ import React, { forwardRef, Fragment, useCallback, useMemo, useRef } from 'react
 
 import type { ActivityComponentFactory } from 'botframework-webchat-api';
 import type { ActivityElementMap } from './Transcript/types';
-import type { FC, KeyboardEventHandler, MutableRefObject, ReactNode, VFC } from 'react';
+import type { FC, KeyboardEventHandler, MutableRefObject, ReactNode } from 'react';
 import type { WebChatActivity } from 'botframework-webchat-core';
 
 import { android } from './Utils/detectBrowser';
@@ -722,19 +722,23 @@ const InternalTranscriptScrollable: FC<InternalTranscriptScrollableProps> = ({
     unread
   });
 
+  const hasAnyChild = !!React.Children.count(children);
+
   return (
     <React.Fragment>
       {renderScrollToEndButton && renderScrollToEndButton({ onClick: handleScrollToEndButtonClick })}
-      {!!React.Children.count(children) && <FocusRedirector redirectRef={terminatorRef} />}
+      {hasAnyChild && <FocusRedirector redirectRef={terminatorRef} />}
       <ReactScrollToBottomPanel className="webchat__basic-transcript__scrollable">
         <div aria-hidden={true} className="webchat__basic-transcript__filler" onFocus={onFocusFiller} />
-        <section
-          aria-roledescription={transcriptRoleDescription}
-          className={classNames(activitiesStyleSet + '', 'webchat__basic-transcript__transcript')}
-          role="feed"
-        >
-          {children}
-        </section>
+        {hasAnyChild && (
+          <section
+            aria-roledescription={transcriptRoleDescription}
+            className={classNames(activitiesStyleSet + '', 'webchat__basic-transcript__transcript')}
+            role="feed"
+          >
+            {children}
+          </section>
+        )}
         <BasicTypingIndicator />
       </ReactScrollToBottomPanel>
     </React.Fragment>
@@ -869,7 +873,7 @@ type BasicTranscriptProps = {
   className?: string;
 };
 
-const BasicTranscript: VFC<BasicTranscriptProps> = ({ className }) => {
+const BasicTranscript: FC<BasicTranscriptProps> = ({ className }) => {
   const activityElementMapRef = useRef<ActivityElementMap>(new Map());
   const containerRef = useRef<HTMLDivElement>();
 
diff --git a/packages/test/page-object/src/globals/pageObjects/verifyDOMIntegrity.js b/packages/test/page-object/src/globals/pageObjects/verifyDOMIntegrity.js
@@ -60,4 +60,17 @@ export default function verifyDOMIntegrity() {
       throw new Error(message);
     }
   });
+
+  // Elements of `role="feed"` must have at least 1 child of <article> or `role="article"`
+  [].forEach.call(document.querySelectorAll('[role="feed"]'), element => {
+    const hasArticle = [].some.call(element.children, child => child.matches('article, [role="article"]'));
+
+    if (!hasArticle) {
+      const message = 'Elements of role="feed" must have at least 1 children of <article> or role="article".';
+
+      console.warn(message, element);
+
+      throw new Error(message);
+    }
+  });
 }
