microsoft · corinagum · Apr 16, 2021 · Apr 9, 2021 · Apr 9, 2021 · Apr 9, 2021
@@ -1,3 +1,3 @@
 # https://blog.github.com/2017-07-06-introducing-code-owners/
 
-* @a-b-r-o-w-n @amal-khalaf @compulim @corinagum @cwhitten @srinaath @tdurnford @tonyanziano @beyackle
+* @a-b-r-o-w-n @compulim @corinagum @cwhitten @srinaath @tdurnford @tonyanziano @beyackle
@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+-  Fixes [#3814](https://github.com/microsoft/BotFramework-WebChat/issues/3814). Allow carousel's scrollable content to be tabbable, by [@corinagum](https://github.com/corinagum) in PR [#3841](https://github.com/microsoft/BotFramework-WebChat/pull/3841)
+-  Fixes [#3834](https://github.com/microsoft/BotFramework-WebChat/issues/3834). Ensure carousel attachments are read by AT on tab focus, by [@corinagum](https://github.com/corinagum) in PR [#3841](https://github.com/microsoft/BotFramework-WebChat/pull/3841)
+
 ### Changed
 
 -  Bumped all dependencies to the latest versions and sample bumps, by [@compulim](https://github.com/compulim) in PR [#3831](https://github.com/microsoft/BotFramework-WebChat/pull/3831) and PR [#3846](https://github.com/microsoft/BotFramework-WebChat/pull/3846)

@@ -42,7 +42,7 @@ window.WebChat.renderWebChat(
 
 ## Visual focus changes to transcript in Web Chat 4.12.0
 
-A new accessibility update has been added to Web Chat from PR [#3703](https://github.com/microsoft/BotFramework-WebChat/pull/3703). This change creates visual focus for the transcript (bold black border) and `aria-activedescendent` focused activity (black dashed border) by default.
+A new accessibility update has been added to Web Chat from PR [#3703](https://github.com/microsoft/BotFramework-WebChat/pull/3703). This change creates visual focus for the transcript (bold black border) and `aria-activedescendent` focused activity (black dashed border) by default. Where applicable, `transcriptVisualKeyboardIndicator...` values will also be applied to carousel (`CarouselFilmStrip.js`) children. This is done in order to match current default focus styling for Adaptive Cards, which may be a child of a carousel.
 
 To modify these styles, you can change the following props via `styleOptions`:
 
@@ -55,7 +55,7 @@ To modify these styles, you can change the following props via `styleOptions`:
   transcriptVisualKeyboardIndicatorWidth: 2,
 ```
 
-The above code shows the default values you will see on Web Chat.
+The above code shows the default values you will see in Web Chat.
 
 ## API refactor into new package in Web Chat 4.11.0
 

@@ -37,7 +37,7 @@
         await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
         await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);
 
-        const attachmentRole = document.querySelector('.webchat__carousel-filmstrip__attachment').getAttribute('role');
+        const attachmentRole = document.querySelector('.webchat__carousel-filmstrip-attachment').getAttribute('role');
 
         expect(attachmentRole).toBeTruthy();
 

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script crossorigin="anonymous" src="assets/transcript.navigation.js" type="text/babel"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        TestAsset: { waitForFocusedActivityInView },
+        WebChatTest: { conditions, createDirectline, createStore, host, pageObjects, timeouts, token }
+      } = window;
+
+      (async function () {
+        window.WebChat.renderWebChat(
+          {
+            directLine: createDirectLine({ token: await token.fetchDirectLineToken() }),
+            store: createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+
+        await pageObjects.sendMessageViaSendBox('carousel', { waitForSend: true });
+
+        // Move focus to carousel activity
+        await host.sendShiftTab();
+        await host.sendShiftTab();
+        await host.sendShiftTab();
+        await waitForFocusedActivityInView();
+
+        await host.sendKeys('ENTER');
+        // focus on first card button
+        await host.sendTab();
+        await host.snapshot();
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,9 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('carousel navigation', () => {
+  describe('should focus on card button when present', () => {
+    test('carousel', () => runHTMLTest('carousel.navigation.tab.cardInput.html'));
+  });
+});
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script crossorigin="anonymous" src="assets/transcript.navigation.js" type="text/babel"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        TestAsset: { waitForFocusedActivityInView },
+        WebChatTest: { conditions, createDirectline, createStore, host, pageObjects, timeouts, token }
+      } = window;
+
+      (async function () {
+        window.WebChat.renderWebChat(
+          {
+            directLine: createDirectLine({ token: await token.fetchDirectLineToken() }),
+            store: createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+
+        await pageObjects.sendMessageViaSendBox('layout carousel', { waitForSend: true });
+
+        // Move focus to carousel activity
+        await host.sendShiftTab();
+        await host.sendShiftTab();
+        await host.sendShiftTab();
+        await waitForFocusedActivityInView();
+
+        await host.sendKeys('ENTER');
+        // first focus inside carousel
+        await host.snapshot();
+
+        // second focus inside carousel
+        await host.sendTab();
+        // Wait for carousel flippers to disappear.
+        await new Promise(resolve => setTimeout(resolve, 4000));
+        await host.snapshot();
+
+        // third focus inside carousel
+        await host.sendTab();
+        // Wait for carousel flippers to disappear.
+        await new Promise(resolve => setTimeout(resolve, 4000));
+        await host.snapshot();
+
+        // Press ESCAPE key should focus the activity.
+        await host.sendKeys('ESCAPE');
+        await host.snapshot();
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,7 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('carousel navigation', () => {
+  test('should show focus when tabbing inside carousel', () => runHTMLTest('carousel.navigation.tab.html'));
+});
@@ -8,7 +8,6 @@
   <body>
     <div id="webchat"></div>
     <script type="text/babel" data-presets="env,stage-3,react">
-      const { Simulate } = window.ReactTestUtils;
       const { conditions, createStore, elements, expect, host, pageObjects, timeouts, token } = window.WebChatTest;
 
       (async function() {

@@ -265,7 +265,7 @@ describe('transcript', () => {
   test('with activity grouping test 46', () =>
     runHTMLTest(
       'transcript.activityGrouping#bi=1&bn=1&bt=1&g=status&l=carousel&rtl=0&t=markdown-message.json&ui=1&un=1&ut=1&w=1',
-      { height: 1280, width: 720 }
+      { height: 1280, ignoreConsoleError: true, width: 720 }
     ));
 
   test('with activity grouping test 47', () =>

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Bubble from './Bubble';
+import CarouselFilmStripAttachment from './CarouselFilmStripAttachment';
 import connectToWebChat from '../connectToWebChat';
 import isZeroOrPositive from '../Utils/isZeroOrPositive';
 import ScreenReaderText from '../ScreenReaderText';
@@ -35,7 +36,7 @@ const ROOT_STYLE = {
       flexShrink: 0
     },
 
-    '& .webchat__carousel-filmstrip__attachment': {
+    '& .webchat__carousel-filmstrip-attachment': {
       flex: 1
     },
 
@@ -144,7 +145,6 @@ const CarouselFilmStrip = ({
   const activityDisplayText = messageBackDisplayText || text;
   const fromUser = role === 'user';
 
-  const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
   const greetingAlt = (fromUser
     ? localize('ACTIVITY_YOU_SAID_ALT')
     : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
@@ -219,20 +219,18 @@ const CarouselFilmStrip = ({
                 ref={itemContainerCallbackRef}
               >
                 {attachments.map((attachment, index) => (
-                  <li
-                    aria-roledescription="attachment"
-                    className="webchat__carousel-filmstrip__attachment react-film__filmstrip__item"
+                  <CarouselFilmStripAttachment
+                    activity={activity}
+                    attachment={attachment}
+                    fromUser={fromUser}
+                    hasAvatar={hasAvatar}
+                    index={index}
                     /* Attachments do not have an ID; it is always indexed by number */
-                    /* eslint-disable-next-line react/no-array-index-key */
+                    // eslint-disable-next-line react/no-array-index-key
                     key={index}
-                    role="listitem"
-                  >
-                    <ScreenReaderText text={attachedAlt} />
-                    {/* eslint-disable-next-line react/no-array-index-key */}
-                    <Bubble fromUser={fromUser} key={index} nub={false}>
-                      {renderAttachment({ activity, attachment })}
-                    </Bubble>
-                  </li>
+                    renderAttachment={renderAttachment}
+                    showAvatar={showAvatar}
+                  />
                 ))}
               </ul>
             </div>

@@ -0,0 +1,86 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Bubble from './Bubble';
+import ScreenReaderText from '../ScreenReaderText';
+import useStyleSet from '../hooks/useStyleSet';
+
+const { useDirection, useLocalizer } = hooks;
+
+const CarouselFilmStripAttachment = ({
+  activity,
+  attachment,
+  className,
+  fromUser,
+  hasAvatar,
+  index,
+  renderAttachment,
+  showAvatar
+}) => {
+  const [direction] = useDirection();
+  const localize = useLocalizer();
+  const [{ carouselFilmStripAttachment: carouselFilmStripAttachmentStyleSet }] = useStyleSet();
+
+  const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
+
+  return (
+    <li
+      aria-roledescription="attachment"
+      className={classNames(
+        'webchat__carousel-filmstrip-attachment',
+        {
+          'webchat__carousel-filmstrip-attachment--hide-avatar': hasAvatar && !showAvatar,
+          'webchat__carousel-filmstrip-attachment--rtl': direction === 'rtl',
+          'webchat__carousel-filmstrip-attachment--show-avatar': showAvatar
+        },
+        'react-film__filmstrip__item',
+        carouselFilmStripAttachmentStyleSet + '',
+        (className || '') + ''
+      )}
+      role="listitem"
+      tabIndex={0}
+    >
+      <ScreenReaderText text={attachedAlt} />
+      {/* eslint-disable-next-line react/no-array-index-key */}
+      <Bubble fromUser={fromUser} key={index} nub={false}>
+        {renderAttachment({ activity, attachment })}
+        <div className="webchat__carousel-filmstrip-attachment--focus" />
+      </Bubble>
+    </li>
+  );
+};
+
+CarouselFilmStripAttachment.defaultProps = {
+  className: ''
+};
+
+CarouselFilmStripAttachment.propTypes = {
+  activity: PropTypes.shape({
+    attachments: PropTypes.array,
+    channelData: PropTypes.shape({
+      messageBack: PropTypes.shape({
+        displayText: PropTypes.string
+      }),
+      state: PropTypes.string
+    }),
+    from: PropTypes.shape({
+      role: PropTypes.string.isRequired
+    }).isRequired,
+    text: PropTypes.string,
+    textFormat: PropTypes.string,
+    timestamp: PropTypes.string
+  }).isRequired,
+  attachment: PropTypes.shape({
+    content: PropTypes.any.isRequired
+  }).isRequired,
+  className: PropTypes.string,
+  fromUser: PropTypes.any.isRequired,
+  hasAvatar: PropTypes.any.isRequired,
+  index: PropTypes.number.isRequired,
+  renderAttachment: PropTypes.func.isRequired,
+  showAvatar: PropTypes.bool.isRequired
+};
+
+export default CarouselFilmStripAttachment;
@@ -6,7 +6,6 @@ import mirrorStyle from '../mirrorStyle';
 export default function CarouselFilmStrip({
   avatarSize,
   bubbleMaxWidth,
-  bubbleMinWidth,
   paddingRegular,
   transitionDuration
 }: StrictStyleOptions) {
@@ -18,13 +17,6 @@ export default function CarouselFilmStrip({
         marginBottom: -17
       },
 
-      '& .webchat__carousel-filmstrip__attachment': {
-        minWidth: bubbleMinWidth,
-        maxWidth: bubbleMaxWidth,
-        transitionDuration,
-        transitionProperty: 'max-width, min-width'
-      },
-
       '& .webchat__carousel-filmstrip__message': {
         maxWidth: bubbleMaxWidth,
         transitionDuration,
@@ -88,28 +80,16 @@ export default function CarouselFilmStrip({
           marginLeft: -paddingRegular
         },
 
-        '& .webchat__carousel-filmstrip__attachment': {
-          paddingLeft: paddingRegular
-        },
-
         '&.webchat__carousel-filmstrip--hide-avatar, &.webchat__carousel-filmstrip--show-avatar': {
           '& .webchat__carousel-filmstrip__attachments': {
             marginLeft: -(avatarSize + paddingRegular * 2)
-          },
-
-          '& .webchat__carousel-filmstrip__attachment:first-child': {
-            paddingLeft: avatarSize + paddingRegular * 2
           }
         },
 
         '&.webchat__carousel-filmstrip--hide-nub, &.webchat__carousel-filmstrip--show-nub': {
           '&:not(.webchat__carousel-filmstrip--hide-avatar.webchat__carousel-filmstrip--show-avatar)': {
             '& .webchat__carousel-filmstrip__attachments': {
               marginLeft: -paddingRegular * 2
-            },
-
-            '& .webchat__carousel-filmstrip__attachment:first-child': {
-              paddingLeft: paddingRegular * 2
             }
           }
         }