Merge branch 'master' into 3814

microsoft · Apr 11, 2021 · ac7cda1 · ac7cda1
2 parents 8161ac3 + 0cc5bec
commit ac7cda1
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -113,6 +113,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  Resolves [#3087](https://github.com/microsoft/BotFramework-WebChat/issues/3087). External links in Markdown will now be appended with an "open in new window" icon and accessibility label, by [@compulim](https://github.com/compulim) in PR [#3817](https://github.com/microsoft/BotFramework-WebChat/pull/3817)
 -  Resolves [#2100](https://github.com/microsoft/BotFramework-WebChat/issues/2100). Add types declarations for Style Options in api bundle, by [@corinagum](https://github.com/corinagum), in PR [#3818](https://github.com/microsoft/BotFramework-WebChat/pull/3818)
+-  Fixes [#3810](https://github.com/microsoft/BotFramework-WebChat/issues/3810). Removes `aria-hidden` from elements that have a focusable child, by [@corinagum](https://github.com/corinagum) in PR [#3836](https://github.com/microsoft/BotFramework-WebChat/pull/3836)
+-  Fixes [#3811](https://github.com/microsoft/BotFramework-WebChat/issues/3811). Removes erroneous `aria-labelledby` from carousel, by [@corinagum](https://github.com/corinagum) in PR [#3836](https://github.com/microsoft/BotFramework-WebChat/pull/3836)
 
 ### Changed
 

diff --git a/...ty-requirement-non-interactive-adaptive-card-should-not-be-focusable-1-snap.png b/...ty-requirement-non-interactive-adaptive-card-should-not-be-focusable-1-snap.png
diff --git a/...tachments-in-live-region-should-narrate-speak-property-adaptive-card-1-snap.png b/...tachments-in-live-region-should-narrate-speak-property-adaptive-card-1-snap.png
diff --git a/...ould-not-move-after-adaptive-card-is-disable-after-manually-disabled-1-snap.png b/...ould-not-move-after-adaptive-card-is-disable-after-manually-disabled-1-snap.png
diff --git a/...ould-not-move-after-adaptive-card-is-disable-after-manually-disabled-2-snap.png b/...ould-not-move-after-adaptive-card-is-disable-after-manually-disabled-2-snap.png
diff --git a/...ould-not-move-after-adaptive-card-is-disable-after-manually-disabled-3-snap.png b/...ould-not-move-after-adaptive-card-is-disable-after-manually-disabled-3-snap.png
diff --git a/__tests__/html/accessibility.activity.stackedLayoutRole.html b/__tests__/html/accessibility.activity.stackedLayoutRole.html
@@ -14,7 +14,6 @@
         expect,
         host,
         pageObjects,
-        shareObservable,
         timeouts,
         token
       } = window.WebChatTest;

diff --git a/__tests__/html/accessibility.attachment.aria.html b/__tests__/html/accessibility.attachment.aria.html
@@ -0,0 +1,56 @@
+<!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, expect, host, pageObjects, 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('document-word', { waitForSend: true });
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+
+        const fileContentAriaHidden = document.querySelector('.webchat__fileContent').getAttribute('aria-hidden');
+
+        expect(fileContentAriaHidden).toBeFalsy();
+
+        const fileContentButtonLinkLabel = document
+          .querySelector('.webchat__fileContent__buttonLink')
+          .getAttribute('aria-label');
+
+        expect(fileContentButtonLinkLabel).toBeTruthy();
+
+        await pageObjects.sendMessageViaSendBox('carousel', { waitForSend: true });
+        await pageObjects.wait(conditions.minNumActivitiesShown(4), timeouts.directLine);
+        await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
+
+        const carouselContainer = document.querySelector('.webchat__carousel-filmstrip').getAttribute('aria-labelledby');
+
+        expect(carouselContainer).toBeFalsy();
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.attachment.aria.js b/__tests__/html/accessibility.attachment.aria.js
@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  test('Element with aria-label should not have parent aria-hidden', () =>
+    runHTMLTest('accessibility.attachment.aria'));
+});
diff --git a/packages/component/src/Activity/CarouselFilmStrip.js b/packages/component/src/Activity/CarouselFilmStrip.js
@@ -13,7 +13,6 @@ import ScreenReaderText from '../ScreenReaderText';
 import textFormatToContentType from '../Utils/textFormatToContentType';
 import useStyleSet from '../hooks/useStyleSet';
 import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
-import useUniqueId from '../hooks/internal/useUniqueId';
 
 const { useAvatarForBot, useAvatarForUser, useDirection, useLocalizer, useStyleOptions } = hooks;
 
@@ -127,7 +126,6 @@ const CarouselFilmStrip = ({
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
   const [direction] = useDirection();
-  const ariaLabelId = useUniqueId('webchat__carousel-filmstrip__id');
   const localize = useLocalizer();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const showActivityStatus = typeof renderActivityStatus === 'function';
@@ -195,14 +193,7 @@ const CarouselFilmStrip = ({
         <div className="webchat__carousel-filmstrip__avatar-gutter">{showAvatar && renderAvatar({ activity })}</div>
         <div className="webchat__carousel-filmstrip__content">
           {!!activityDisplayText && (
-            <div
-              aria-roledescription="message"
-              className="webchat__carousel-filmstrip__message"
-              // Disable "Prop `id` is forbidden on DOM Nodes" rule because we are using the ID prop for accessibility.
-              /* eslint-disable-next-line react/forbid-dom-props */
-              id={ariaLabelId}
-              role="group"
-            >
+            <div aria-roledescription="message" className="webchat__carousel-filmstrip__message" role="group">
               <ScreenReaderText text={greetingAlt} />
               <Bubble
                 className="webchat__carousel-filmstrip__bubble"

diff --git a/packages/component/src/Attachment/FileContent.js b/packages/component/src/Attachment/FileContent.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import DownloadIcon from './Assets/DownloadIcon';
-import ScreenReaderText from '../ScreenReaderText';
 import useStyleSet from '../hooks/useStyleSet';
 import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 
@@ -83,20 +82,17 @@ const FileContent = ({ className, href, fileName, size }) => {
 
   return (
     <div
-      aria-hidden={true}
       className={classNames('webchat__fileContent', rootClassName, fileContentStyleSet + '', (className || '') + '')}
     >
-      <ScreenReaderText text={alt} />
       {href ? (
         <a
-          aria-hidden={true}
+          aria-label={alt}
           className="webchat__fileContent__buttonLink"
           download={fileName}
           href={href}
           rel="noopener noreferrer"
           target="_blank"
         >
-          {/* Although nested, Chrome v75 does not respect the above aria-hidden and makes the below aria-hidden in FileContentBadge necessary */}
           <FileContentBadge downloadIcon={true} fileName={fileName} size={size} />
         </a>
       ) : (

diff --git a/samples/05.custom-components/l.disable-adaptive-cards/index.html b/samples/05.custom-components/l.disable-adaptive-cards/index.html
@@ -83,7 +83,6 @@
             VideoCardContent
           },
           createStore,
-          createStyleSet,
           ReactWebChat
         } = window.WebChat;
         const { useCallback, useMemo, useState } = window.React;