Merge remote-tracking branch 'upstream/delete-msg-options-updated' into delete-msg-options-updated

Author: Bilb

ts/components/OutgoingLightBox.tsx

@@ -106,6 +106,7 @@ export const OutgoingLightBox = (props: NonNullable<OutgoingLightBoxOptions>) =>
 
   return (
     <SessionFocusTrap
+      focusTrapId="OutgoingLightBox"
       initialFocus={() => ref.current}
       allowOutsideClick={true}
       returnFocusOnDeactivate={false}

ts/components/SessionFocusTrap.tsx

@@ -1,34 +1,102 @@
-import { FocusTrap } from 'focus-trap-react';
-import { ReactNode } from 'react';
+import { FocusTrap, type FocusTrapProps } from 'focus-trap-react';
+import { type ReactNode, useEffect, useState } from 'react';
 import type { CSSProperties } from 'styled-components';
+import { windowErrorFilters } from '../util/logger/renderer_process_logging';
+import { getFeatureFlagMemo } from '../state/ducks/types/releasedFeaturesReduxTypes';
+
+const focusTrapErrorSource = 'focus-trap';
+
+type SessionFocusTrapProps = FocusTrapProps['focusTrapOptions'] & {
+  /** id used for debugging */
+  focusTrapId: string;
+  children: ReactNode;
+  active?: boolean;
+  containerDivStyle?: CSSProperties;
+  /** Suppress errors thrown from inside the focus trap, preventing logging or global error emission */
+  suppressErrors?: boolean;
+  /** Allows the focus trap to exist without detectable tabbable elements. This is required if the children
+   * are within a Shadow DOM. Internally sets suppressErrors to true. */
+  allowNoTabbableNodes?: boolean;
+};
 
-/**
- * Focus trap which activates on mount.
- */
 export function SessionFocusTrap({
+  focusTrapId,
   children,
+  active = true,
   allowOutsideClick = true,
-  returnFocusOnDeactivate,
-  initialFocus,
   containerDivStyle,
-}: {
-  children: ReactNode;
-  allowOutsideClick?: boolean;
-  returnFocusOnDeactivate?: boolean;
-  initialFocus: () => HTMLElement | null;
-  containerDivStyle?: CSSProperties;
-}) {
+  suppressErrors,
+  allowNoTabbableNodes,
+  onActivate,
+  onPostActivate,
+  onDeactivate,
+  onPostDeactivate,
+  ...rest
+}: SessionFocusTrapProps) {
+  const debugFocusTrap = getFeatureFlagMemo('debugFocusTrap');
+  const defaultTabIndex = allowNoTabbableNodes ? 0 : -1;
+  const _suppressErrors = suppressErrors || allowNoTabbableNodes;
+  /**
+   * NOTE: the tab index tricks the focus trap into thinking it has
+   * tabbable children by setting a tab index on the empty div child. When
+   * the trap activates it will see the div in the tab list and render without
+   * error, then remove that div from the tab index list. Then when the trap
+   * deactivates the state is reset.
+   */
+  const [tabIndex, setTabIndex] = useState<0 | 1 | -1>(defaultTabIndex);
+
+  const _onActivate = () => {
+    if (debugFocusTrap) {
+      window.log.debug(`[SessionFocusTrap] onActivate - ${focusTrapId}`);
+    }
+    onActivate?.();
+  };
+
+  const _onPostActivate = () => {
+    if (allowNoTabbableNodes) {
+      setTabIndex(-1);
+    }
+    onPostActivate?.();
+  };
+
+  const _onDeactivate = () => {
+    if (debugFocusTrap) {
+      window.log.debug(`[SessionFocusTrap] onDeactivate - ${focusTrapId}`);
+    }
+    if (allowNoTabbableNodes) {
+      setTabIndex(defaultTabIndex);
+    }
+    onDeactivate?.();
+  };
+
+  useEffect(() => {
+    if (!active || !_suppressErrors) {
+      return;
+    }
+    windowErrorFilters.add(focusTrapErrorSource);
+    // eslint-disable-next-line consistent-return -- This return is the destructor
+    return () => {
+      windowErrorFilters.remove(focusTrapErrorSource);
+    };
+  }, [_suppressErrors, active]);
+
   return (
     <FocusTrap
-      active={true}
+      active={active}
       focusTrapOptions={{
-        initialFocus,
+        ...rest,
         allowOutsideClick,
-        returnFocusOnDeactivate,
+        onActivate: _onActivate,
+        onPostActivate: _onPostActivate,
+        onDeactivate: _onDeactivate,
+        onPostDeactivate,
       }}
     >
-      {/* Note:  not too sure why, but without this div, the focus trap doesn't work */}
-      <div style={containerDivStyle}>{children}</div>
+      {/* Note: without this div, the focus trap doesn't work */}
+      <div style={containerDivStyle}>
+        {allowNoTabbableNodes ? <div tabIndex={tabIndex} /> : null}
+        {children}
+      </div>
     </FocusTrap>
   );
 }

ts/components/SessionSearchInput.tsx

@@ -133,7 +133,11 @@ export const SessionSearchInput = ({ searchType }: { searchType: SearchType }) =
           iconColor="var(--text-secondary-color)"
           iconSize={iconSize}
           unicode={LUCIDE_ICONS_UNICODE.X}
-          tabIndex={0}
+          // NOTE: we don't want this clear button in the tab index list
+          // as the Escape key already does the clear action for keyboard
+          // users and we want the next tab after the search input to
+          // be the first search result
+          tabIndex={-1}
           onClick={() => {
             setCurrentSearchTerm('');
             dispatch(searchActions.clearSearch());

ts/components/SessionTooltip.tsx

@@ -73,15 +73,20 @@ export const getTriggerPositionFromId = (id: string): PopoverTriggerPosition =>
 };
 
 // Returns null if the ref is null
-export const useTriggerPosition = (
-  ref: RefObject<HTMLElement | null>
-): PopoverTriggerPosition | null => {
+export const getTriggerPosition = (ref: RefObject<HTMLElement | null>) => {
   if (!ref.current) {
     return null;
   }
   return getTriggerPositionFromBoundingClientRect(ref.current.getBoundingClientRect());
 };
 
+// Returns null if the ref is null
+export const useTriggerPosition = (
+  ref: RefObject<HTMLElement | null>
+): PopoverTriggerPosition | null => {
+  return getTriggerPosition(ref);
+};
+
 export const SessionTooltip = ({
   children,
   content,

ts/components/SessionWrapperModal.tsx

@@ -452,7 +452,11 @@ export const SessionWrapperModal = (props: SessionWrapperModalType & { onClose?:
     props.headerChildren && moveHeaderIntoScrollableBody ? props.headerChildren : null;
 
   return (
-    <SessionFocusTrap allowOutsideClick={allowOutsideClick} initialFocus={() => modalRef.current}>
+    <SessionFocusTrap
+      focusTrapId="SessionWrapperModal"
+      allowOutsideClick={allowOutsideClick}
+      initialFocus={() => modalRef.current}
+    >
       <IsModalScrolledContext.Provider value={scrolled}>
         <ModalHasActionButtonContext.Provider value={!!buttonChildren}>
           <OnModalCloseContext.Provider value={onClose ?? null}>

ts/components/conversation/SessionEmojiPanel.tsx

@@ -1,14 +1,14 @@
 import Picker from '@emoji-mart/react';
-import { forwardRef } from 'react';
+import { type RefObject } from 'react';
 import styled from 'styled-components';
-import clsx from 'clsx';
 
 import { usePrimaryColor } from '../../state/selectors/primaryColor';
 import { useIsDarkTheme, useTheme } from '../../state/theme/selectors/theme';
 import { COLORS, THEMES, ThemeStateType, type ColorsType } from '../../themes/constants/colors';
 import { FixedBaseEmoji } from '../../types/Reaction';
 import { i18nEmojiData } from '../../util/emoji';
 import { hexColorToRGB } from '../../util/hexColorToRGB';
+import { SessionFocusTrap } from '../SessionFocusTrap';
 
 export const StyledEmojiPanel = styled.div<{
   $isModal: boolean;
@@ -19,20 +19,11 @@ export const StyledEmojiPanel = styled.div<{
 }>`
   ${props => (!props.$isModal ? 'padding: var(--margins-lg);' : '')}
   z-index: 5;
-  opacity: 0;
-  visibility: hidden;
-  // this disables the slide-in animation when showing the emoji picker from a right click on a message
-  /* transition: var(--default-duration); */
 
   button:focus {
     outline: none;
   }
 
-  &.show {
-    opacity: 1;
-    visibility: visible;
-  }
-
   em-emoji-picker {
     ${props => props.$panelBackgroundRGB && `background-color: rgb(${props.$panelBackgroundRGB})`};
     border: var(--default-borders);
@@ -75,21 +66,18 @@ export const StyledEmojiPanel = styled.div<{
 `;
 
 type Props = {
+  ref?: RefObject<HTMLDivElement | null>;
   onEmojiClicked: (emoji: FixedBaseEmoji) => void;
-  show: boolean;
   isModal?: boolean;
   onClose?: () => void;
+  show: boolean;
 };
 
-const pickerProps = {
-  title: '',
-  showPreview: true,
-  autoFocus: true,
-  skinTonePosition: 'preview',
+export const SessionEmojiPanel = (props: Props) => {
+  return props.show ? <EmojiPanel {...props} /> : null;
 };
 
-export const SessionEmojiPanel = forwardRef<HTMLDivElement, Props>((props: Props, ref) => {
-  const { onEmojiClicked, show, isModal = false, onClose } = props;
+const EmojiPanel = ({ ref, onEmojiClicked, isModal = false, onClose }: Props) => {
   const _primaryColor = usePrimaryColor();
   const theme = useTheme();
   const isDarkTheme = useIsDarkTheme();
@@ -125,22 +113,31 @@ export const SessionEmojiPanel = forwardRef<HTMLDivElement, Props>((props: Props
       );
 
   return (
-    <StyledEmojiPanel
-      $isModal={isModal}
-      $primaryColor={primaryColor}
-      $theme={theme}
-      $panelBackgroundRGB={panelBackgroundRGB}
-      $panelTextRGB={panelTextRGB}
-      className={clsx(show && 'show')}
-      ref={ref}
+    <SessionFocusTrap
+      focusTrapId="SessionEmojiPanel"
+      clickOutsideDeactivates={true}
+      allowNoTabbableNodes={true}
+      onDeactivate={onClose}
     >
-      <Picker
-        theme={isDarkTheme ? 'dark' : 'light'}
-        i18n={i18nEmojiData}
-        onEmojiSelect={onEmojiClicked}
-        onClose={onClose}
-        {...pickerProps}
-      />
-    </StyledEmojiPanel>
+      <StyledEmojiPanel
+        $isModal={isModal}
+        $primaryColor={primaryColor}
+        $theme={theme}
+        $panelBackgroundRGB={panelBackgroundRGB}
+        $panelTextRGB={panelTextRGB}
+        ref={ref}
+      >
+        <Picker
+          theme={isDarkTheme ? 'dark' : 'light'}
+          i18n={i18nEmojiData}
+          onEmojiSelect={onEmojiClicked}
+          onClose={onClose}
+          title=""
+          showPreview={true}
+          skinTonePosition={'preview'}
+          autoFocus={true}
+        />
+      </StyledEmojiPanel>
+    </SessionFocusTrap>
   );
-});
+};

ts/components/conversation/SessionEmojiPanelPopover.tsx

@@ -9,38 +9,36 @@ const EMOJI_PANEL_WIDTH_PX = 354;
 const EMOJI_PANEL_HEIGHT_PX = 435;
 
 export function SessionEmojiPanelPopover({
-  triggerPos,
   emojiPanelRef,
-  onEmojiClicked,
+  triggerPosition,
+  onEmojiClick,
   open,
   onClose,
 }: {
-  triggerPos: PopoverTriggerPosition | null;
+  emojiPanelRef?: RefObject<HTMLDivElement | null>;
+  triggerPosition: PopoverTriggerPosition | null;
   open: boolean;
-  emojiPanelRef: RefObject<HTMLDivElement | null>;
-  onEmojiClicked: (emoji: FixedBaseEmoji) => void;
+  onEmojiClick: (emoji: FixedBaseEmoji) => void;
   onClose: () => void;
 }) {
-  const _open = open && !!triggerPos;
+  const _open = open && !!triggerPosition;
   return (
     <SessionPopoverContent
-      triggerPosition={triggerPos}
+      triggerPosition={triggerPosition}
       open={_open}
       isTooltip={false}
       verticalPosition="bottom"
       horizontalPosition="center"
       fallbackContentWidth={EMOJI_PANEL_WIDTH_PX}
       fallbackContentHeight={EMOJI_PANEL_HEIGHT_PX}
     >
-      {_open ? (
-        <SessionEmojiPanel
-          ref={emojiPanelRef}
-          show={true}
-          onEmojiClicked={onEmojiClicked}
-          onClose={onClose}
-          isModal={true}
-        />
-      ) : null}
+      <SessionEmojiPanel
+        ref={emojiPanelRef}
+        onEmojiClicked={onEmojiClick}
+        onClose={onClose}
+        isModal={true}
+        show={_open}
+      />
     </SessionPopoverContent>
   );
 }