fix: active descendant positioning

Author: OEvgeny

packages/component/src/Transcript/ActivityRow.tsx

@@ -113,27 +113,15 @@ const ActivityRow = forwardRef<HTMLElement, ActivityRowProps>(({ activity, child
 
   return (
     // TODO: [P2] Add `aria-roledescription="message"` for better AX, need localization strings.
+    /* TODO: [P1] File a crbug for TalkBack. It should not able to read the content twice when scanning. */
+    /* The following <div> is designed for active descendant only.
+        We want to prevent screen reader from scanning the content that is authored only for active descendant.
+        The specific content should only read when user press UP/DOWN arrow keys to change `aria-activedescendant`.
+        However, Android TalkBack 12.1 is buggy when the there is an element with ID of one of the `aria-activedescendant` potential candidates,
+        TalkBack will narrate the message content twice (i.e. content of `bodyRef`), regardless whether the ID is currently set as `aria-activedescendant` or not.
+        As Android does not support active descendant, we are hiding the whole DOM element altogether. */
     <TranscriptFocusContent
-      className={classNames('webchat__basic-transcript__activity', {
-        'webchat__basic-transcript__activity--acknowledged': acknowledged,
-        'webchat__basic-transcript__activity--read': read
-      })}
-      focused={isActiveDescendant}
-      onMouseDownCapture={handleMouseDownCapture}
-      // When NVDA is in browse mode, using up/down arrow key to "browse" will dispatch "click" and "mousedown" events for <article> element (inside <LiveRegionActivity>).
-      ref={wrappedRef}
-      tag="article"
-    >
-      {/* TODO: [P1] File a crbug for TalkBack. It should not able to read the content twice when scanning. */}
-
-      {/* The following <div> is designed for active descendant only.
-          We want to prevent screen reader from scanning the content that is authored only for active descendant.
-          The specific content should only read when user press UP/DOWN arrow keys to change `aria-activedescendant`.
-          However, Android TalkBack 12.1 is buggy when the there is an element with ID of one of the `aria-activedescendant` potential candidates,
-          TalkBack will narrate the message content twice (i.e. content of `bodyRef`), regardless whether the ID is currently set as `aria-activedescendant` or not.
-          As Android does not support active descendant, we are hiding the whole DOM element altogether. */}
-
-      {!android && (
+      activeDescendant={!android && (
         <TranscriptFocusContentActiveDescendant
           aria-labelledby={descendantLabelId}
           className="webchat__basic-transcript__activity-active-descendant"
@@ -144,6 +132,16 @@ const ActivityRow = forwardRef<HTMLElement, ActivityRowProps>(({ activity, child
           <ScreenReaderText aria-hidden={true} id={descendantLabelId} text={accessibleName} />
         </TranscriptFocusContentActiveDescendant>
       )}
+      className={classNames('webchat__basic-transcript__activity', {
+        'webchat__basic-transcript__activity--acknowledged': acknowledged,
+        'webchat__basic-transcript__activity--read': read
+      })}
+      focused={isActiveDescendant}
+      onMouseDownCapture={handleMouseDownCapture}
+      // When NVDA is in browse mode, using up/down arrow key to "browse" will dispatch "click" and "mousedown" events for <article> element (inside <LiveRegionActivity>).
+      ref={wrappedRef}
+      tag="article"
+    >
       <FocusTrap
         onFocus={handleDescendantFocus}
         onLeave={handleLeaveFocusTrap}

packages/component/src/Transcript/TranscriptFocus/TranscriptFocusContent.tsx

@@ -1,18 +1,19 @@
 import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import cx from 'classnames';
-import React, { forwardRef, type HTMLAttributes } from 'react';
+import React, { forwardRef, ReactNode, type HTMLAttributes } from 'react';
 
 import styles from './TranscriptFocus.module.css';
 import TranscriptFocusIndicator from './TranscriptFocusIndicator';
 
 type TranscriptFocusContentProps = HTMLAttributes<HTMLDivElement> &
   Readonly<{
+    activeDescendant?: ReactNode | undefined;
     tag?: React.ElementType;
     focused?: boolean;
   }>;
 
 const TranscriptFocusContent = forwardRef<HTMLDivElement, TranscriptFocusContentProps>(
-  ({ className, children, tag: Tag = 'div', focused = false, ...props }, ref) => {
+  ({ activeDescendant, className, children, tag: Tag = 'div', focused = false, ...props }, ref) => {
     const classNames = useStyles(styles);
 
     return (
@@ -25,6 +26,7 @@ const TranscriptFocusContent = forwardRef<HTMLDivElement, TranscriptFocusContent
         )}
         ref={ref}
       >
+        {activeDescendant}
         <div className={classNames['transcript-focus-area__content-root']}>{children}</div>
         <TranscriptFocusIndicator />
       </Tag>