microsoft · corinagum · Apr 11, 2021 · Apr 6, 2021 · Apr 7, 2021 · Apr 7, 2021
@@ -109,6 +109,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
 

@@ -14,7 +14,6 @@
         expect,
         host,
         pageObjects,
-        shareObservable,
         timeouts,
         token
       } = window.WebChatTest;

@@ -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>
@@ -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'));
+});
@@ -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';
@@ -171,7 +169,6 @@ const CarouselFilmStrip = ({
 
   return (
     <div
-      aria-labelledby={ariaLabelId}
       className={classNames(
         'webchat__carousel-filmstrip',
         {
@@ -196,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"

@@ -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>
       ) : (

@@ -83,7 +83,6 @@
             VideoCardContent
           },
           createStore,
-          createStyleSet,
           ReactWebChat
         } = window.WebChat;
         const { useCallback, useMemo, useState } = window.React;