component: basic transcript transcript focus and logical grouping adjustments

Author: OEvgeny

packages/component/src/BasicTranscript.tsx

@@ -43,7 +43,6 @@ import usePrevious from './hooks/internal/usePrevious';
 import useRegisterFocusTranscript from './hooks/internal/useRegisterFocusTranscript';
 import useRegisterScrollTo from './hooks/internal/useRegisterScrollTo';
 import useRegisterScrollToEnd from './hooks/internal/useRegisterScrollToEnd';
-import useUniqueId from './hooks/internal/useUniqueId';
 import useValueRef from './hooks/internal/useValueRef';
 import {
   useRegisterScrollRelativeTranscript,
@@ -60,8 +59,10 @@ import TranscriptFocusComposer from './providers/TranscriptFocus/TranscriptFocus
 import useActiveDescendantId from './providers/TranscriptFocus/useActiveDescendantId';
 import useFocusByActivityKey from './providers/TranscriptFocus/useFocusByActivityKey';
 import useFocusRelativeActivity from './providers/TranscriptFocus/useFocusRelativeActivity';
-import useFocusedActivityKey from './providers/TranscriptFocus/useFocusedActivityKey';
+import useFocusedKey from './providers/TranscriptFocus/useFocusedKey';
 import useFocusedExplicitly from './providers/TranscriptFocus/useFocusedExplicitly';
+import { ActivityLogicalGroupingComposer } from './providers/ActivityLogicalGrouping';
+import { TranscriptFocusArea, TranscriptFocusTerminator } from './Transcript/TranscriptFocus';
 
 const {
   useActivityKeys,
@@ -114,12 +115,11 @@ type InternalTranscriptProps = Readonly<{
 // TODO: [P1] #4133 Add telemetry for computing how many re-render done so far.
 const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
   ({ className, terminatorRef }: InternalTranscriptProps, ref) => {
-    const [{ basicTranscript: basicTranscriptStyleSet }] = useStyleSet();
     const [activeDescendantId] = useActiveDescendantId();
     const [direction] = useDirection();
-    const [focusedActivityKey] = useFocusedActivityKey();
+    const [focusedKey] = useFocusedKey();
     const [focusedExplicitly] = useFocusedExplicitly();
-    const activityElementMapRef = useActivityElementMapRef();
+    const focusElementMapRef = useActivityElementMapRef();
     const focus = useFocus();
     const focusByActivityKey = useFocusByActivityKey();
     const focusRelativeActivity = useFocusRelativeActivity();
@@ -128,10 +128,8 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
     const localize = useLocalizer();
     const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
     const rootElementRef = useRef<HTMLDivElement>(null);
-    const terminatorLabelId = useUniqueId('webchat__basic-transcript__terminator-label');
 
-    const focusedActivityKeyRef = useValueRef(focusedActivityKey);
-    const terminatorText = localize('TRANSCRIPT_TERMINATOR_TEXT');
+    const focusedKeyRef = useValueRef(focusedKey);
     const transcriptAriaLabel = localize('TRANSCRIPT_ARIA_LABEL_ALT');
 
     const callbackRef = useCallback(
@@ -165,7 +163,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
         if (typeof scrollTop !== 'undefined') {
           scrollToBottomScrollTo(scrollTop, { behavior });
         } else if (typeof activityId !== 'undefined') {
-          const activityBoundingBoxElement = activityElementMapRef.current
+          const activityBoundingBoxElement = focusElementMapRef.current
             .get(getKeyByActivityId(activityId))
             ?.querySelector('.webchat__basic-transcript__activity-active-descendant');
 
@@ -193,7 +191,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
           }
         }
       },
-      [activityElementMapRef, getKeyByActivityId, rootElementRef, scrollToBottomScrollTo]
+      [focusElementMapRef, getKeyByActivityId, rootElementRef, scrollToBottomScrollTo]
     );
 
     const scrollToEnd = useCallback(
@@ -266,7 +264,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
 
         // Find the activity just above scroll view bottom.
         // If the scroll view is already on top, get the first activity.
-        const activityElements = Array.from(activityElementMapRef.current.entries());
+        const activityElements = Array.from(focusElementMapRef.current.entries());
         const activityKeyJustAboveScrollBottom: string | undefined = (
           scrollableElement.scrollTop
             ? activityElements
@@ -293,7 +291,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
         }
       },
       [
-        activityElementMapRef,
+        focusElementMapRef,
         dispatchScrollPositionWithActivityId,
         getActivityByKey,
         markActivityKeyAsRead,
@@ -334,9 +332,10 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
             // This is capturing plain ENTER.
             // When screen reader is not running, or screen reader is running outside of scan mode, the ENTER key will be captured here.
             if (!fromEndOfTranscriptIndicator) {
-              const activityFocusTrapTarget: HTMLElement = activityElementMapRef.current
-                .get(focusedActivityKeyRef.current)
-                ?.querySelector('.webchat__basic-transcript__activity-focus-target');
+              const focusElement = focusElementMapRef.current?.get(focusedKeyRef.current);
+              const activityFocusTrapTarget: HTMLElement =
+                focusElement?.querySelector('.webchat__basic-transcript__group-focus-target') ??
+                focusElement?.querySelector('.webchat__basic-transcript__activity-focus-target');
               // TODO: review focus approach:
               // It is not clear how to handle focus without introducing something like context.
               // Ideally we would want a way to interact with focus outside of React
@@ -367,7 +366,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
           event.stopPropagation();
         }
       },
-      [activityElementMapRef, focus, focusedActivityKeyRef, focusRelativeActivity, terminatorRef]
+      [focusElementMapRef, focus, focusedKeyRef, focusRelativeActivity, terminatorRef]
     );
 
     const handleTranscriptKeyDownCapture = useCallback<KeyboardEventHandler<HTMLDivElement>>(
@@ -399,8 +398,8 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
     // Dispatch a "transcript focus" event based on user selection.
     // We should not dispatch "transcript focus" when a new activity come. Although the selection change, it is not initiated from the user.
     useMemo(
-      () => dispatchTranscriptFocusByActivityKey(focusedExplicitly ? focusedActivityKey : undefined),
-      [dispatchTranscriptFocusByActivityKey, focusedActivityKey, focusedExplicitly]
+      () => dispatchTranscriptFocusByActivityKey(focusedExplicitly ? focusedKey : undefined),
+      [dispatchTranscriptFocusByActivityKey, focusedKey, focusedExplicitly]
     );
 
     // When the transcript is being focused on, we should dispatch a "transcriptfocus" event.
@@ -426,17 +425,12 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
     const hasAnyChild = !!numRenderingActivities;
 
     return (
-      <div
+      <TranscriptFocusArea
         // Although Android TalkBack 12.1 does not support `aria-activedescendant`, when used, it become buggy and will narrate content twice.
         // We are disabling `aria-activedescendant` for Android. See <ActivityRow> for details.
         aria-activedescendant={android ? undefined : activeDescendantId}
         aria-label={transcriptAriaLabel}
-        className={classNames(
-          'webchat__basic-transcript',
-          basicTranscriptStyleSet + '',
-          rootClassName,
-          (className || '') + ''
-        )}
+        className={classNames('webchat__basic-transcript', rootClassName, (className || '') + '')}
         dir={direction}
         onFocus={handleFocus}
         onKeyDown={handleTranscriptKeyDown}
@@ -450,33 +444,18 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
         // https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant
         tabIndex={0}
       >
-        <LiveRegionTranscript activityElementMapRef={activityElementMapRef} />
+        <LiveRegionTranscript activityElementMapRef={focusElementMapRef} />
         {hasAnyChild && <FocusRedirector redirectRef={terminatorRef} />}
         <InternalTranscriptScrollable onFocusFiller={handleFocusFiller}>
           {hasAnyChild && <ActivityTree />}
         </InternalTranscriptScrollable>
         {hasAnyChild && (
           <Fragment>
             <FocusRedirector redirectRef={rootElementRef} />
-            <div
-              aria-labelledby={terminatorLabelId}
-              className="webchat__basic-transcript__terminator"
-              ref={terminatorRef}
-              role="note"
-              tabIndex={0}
-            >
-              <div className="webchat__basic-transcript__terminator-body">
-                {/* `id` is required for `aria-labelledby` */}
-                {/* eslint-disable-next-line react/forbid-dom-props */}
-                <div className="webchat__basic-transcript__terminator-text" id={terminatorLabelId}>
-                  {terminatorText}
-                </div>
-              </div>
-            </div>
+            <TranscriptFocusTerminator ref={terminatorRef} role="note" tabIndex={0} />
           </Fragment>
         )}
-        <div className="webchat__basic-transcript__focus-indicator" />
-      </div>
+      </TranscriptFocusArea>
     );
   }
 );
@@ -667,18 +646,20 @@ const BasicTranscript = ({ className = '' }: BasicTranscriptProps) => {
 
   return (
     <ChatHistoryBox className={className}>
-      <RenderingActivitiesComposer>
-        <TranscriptFocusComposer containerRef={containerRef}>
-          <ReactScrollToBottomComposer nonce={nonce} scroller={scroller} styleOptions={styleOptions}>
-            <ChatHistoryToolbar>
-              <ScrollToEndButton terminatorRef={terminatorRef} />
-            </ChatHistoryToolbar>
-            <GroupedRenderingActivitiesComposer>
-              <InternalTranscript ref={containerRef} terminatorRef={terminatorRef} />
-            </GroupedRenderingActivitiesComposer>
-          </ReactScrollToBottomComposer>
-        </TranscriptFocusComposer>
-      </RenderingActivitiesComposer>
+      <ActivityLogicalGroupingComposer>
+        <RenderingActivitiesComposer>
+          <TranscriptFocusComposer containerRef={containerRef}>
+            <ReactScrollToBottomComposer nonce={nonce} scroller={scroller} styleOptions={styleOptions}>
+              <ChatHistoryToolbar>
+                <ScrollToEndButton terminatorRef={terminatorRef} />
+              </ChatHistoryToolbar>
+              <GroupedRenderingActivitiesComposer>
+                <InternalTranscript ref={containerRef} terminatorRef={terminatorRef} />
+              </GroupedRenderingActivitiesComposer>
+            </ReactScrollToBottomComposer>
+          </TranscriptFocusComposer>
+        </RenderingActivitiesComposer>
+      </ActivityLogicalGroupingComposer>
     </ChatHistoryBox>
   );
 };