Remove bogus aria-labelledby (#3697)

* Remove bogus aria-labelledby * Add test * Update entry * Update __tests__/html/accessibility.stackedLayout.withoutText.html Co-authored-by: Corina <[email protected]> * Update accessibility.stackedLayout.withoutText.html Co-authored-by: Corina <[email protected]>
microsoft · Feb 4, 2021 · 2910c5b · 2910c5b
1 parent c6de770
commit 2910c5b
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -42,6 +42,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#3565](https://github.com/microsoft/BotFramework-WebChat/issues/3565). Allow strikethrough `<s>` on sanitize markdown, by [@corinagum](https://github.com/corinagum) in PR [#3646](https://github.com/microsoft/BotFramework-WebChat/pull/3646)
 -  Fixes [#3672](https://github.com/microsoft/BotFramework-WebChat/issues/3672). Center the icon of send box buttons vertically and horizontally, by [@compulim](https://github.com/compulim) in PR [#3673](https://github.com/microsoft/BotFramework-WebChat/pull/3673)
 -  Fixes [#3683](https://github.com/microsoft/BotFramework-WebChat/issues/3683). Activities should be acknowledged when user scrolls to bottom, by [@compulim](https://github.com/compulim) in PR [#3684](https://github.com/microsoft/BotFramework-WebChat/pull/3684)
+-  Fixes [#3676](https://github.com/microsoft/BotFramework-WebChat/issues/3676). Activities without text should not generate bogus `aria-labelledby`, by [@compulim](https://github.com/compulim) in PR [#3697](https://github.com/microsoft/BotFramework-WebChat/pull/3697)
 
 ### Changed
 

diff --git a/__tests__/html/accessibility.stackedLayout.withoutText.html b/__tests__/html/accessibility.stackedLayout.withoutText.html
@@ -0,0 +1,73 @@
+<!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 {
+        WebChatTest: { conditions, createDirectLineWithTranscript, createStore, host, pageObjects, timeouts, token }
+      } = window;
+
+      (async function () {
+        window.WebChat.renderWebChat(
+          {
+            directLine: createDirectLineWithTranscript([
+              {
+                attachments: [
+                  {
+                    content: 'Attachment 1',
+                    contentType: 'text/plain'
+                  },
+                  {
+                    content: 'Attachment 2',
+                    contentType: 'text/plain'
+                  }
+                ],
+                type: 'message',
+                id: 'CONVERSATION_ID-o|00000',
+                timestamp: '2000-01-23T12:34:56.12345Z',
+                channelId: 'directline',
+                from: {
+                  id: 'webchat-mockbot',
+                  name: 'webchat-mockbot'
+                },
+                conversation: {
+                  id: 'CONVERSATION_ID-o'
+                },
+                locale: 'en-US'
+              }
+            ]),
+            store: createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+
+        // This test is to verify that all elements with aria-labelledby have a corresponding element with the same ID.
+
+        const labelledBys = [].map.call(document.querySelectorAll('[aria-labelledby]'), element => ({
+          element,
+          id: element.getAttribute('aria-labelledby')
+        }));
+
+        for (let { element, id } of labelledBys) {
+          if (!document.getElementById(id)) {
+            console.warn(`Cannot find element with ID of ${id}`, { element });
+
+            throw new Error(`Cannot find element with ID of ${id}`);
+          }
+        }
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.stackedLayout.withoutText.js b/__tests__/html/accessibility.stackedLayout.withoutText.js
@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  test('should not inject "aria-labelledby" for activities without text content in stacked layout', () =>
+    runHTMLTest('accessibility.stackedLayout.withoutText.html'));
+});
diff --git a/packages/component/src/Activity/StackedLayout.js b/packages/component/src/Activity/StackedLayout.js
@@ -138,7 +138,7 @@ const StackedLayout = ({
 
   return (
     <div
-      aria-labelledby={ariaLabelId}
+      aria-labelledby={activityDisplayText ? ariaLabelId : undefined}
       aria-roledescription="activity"
       className={classNames('webchat__stacked-layout', rootClassName, stackedLayoutStyleSet + '', {
         'webchat__stacked-layout--extra-trailing': extraTrailing,