fix: Focus switches on new Messages (ACC-310)

src/script/components/list/ConversationListCell.tsx

@@ -26,6 +26,7 @@ import React, {
   KeyboardEvent as ReactKeyBoardEvent,
 } from 'react';
 
+import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
 import cx from 'classnames';
 
 import {Availability} from '@wireapp/protocol-messaging';
@@ -34,7 +35,6 @@ import {AvailabilityState} from 'Components/AvailabilityState';
 import {Avatar, AVATAR_SIZE} from 'Components/Avatar';
 import {GroupAvatar} from 'Components/avatar/GroupAvatar';
 import {Icon} from 'Components/Icon';
-import {useMessageFocusedTabIndex} from 'Components/MessagesList/Message/util';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {isKey, isOneOfKeys, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
@@ -53,32 +53,21 @@ export interface ConversationListCellProps {
   onJoinCall: (conversation: Conversation, mediaType: MediaType) => void;
   rightClick: (conversation: Conversation, event: MouseEvent | React.MouseEvent<Element, MouseEvent>) => void;
   showJoinButton: boolean;
-  index: number;
-  /** it determines whether the conversation item is currently focused  */
-  focusConversation: boolean;
-  /** conversation list can only be focused using tab key from user name so enable
-   * it when this condition satisfies  */
-  isConversationListFocus: boolean;
-  handleFocus: (index: number) => void;
   handleArrowKeyDown: (e: React.KeyboardEvent) => void;
-  isFolder?: boolean;
+  currentFocusId: string;
 }
 
-const ConversationListCell: React.FC<ConversationListCellProps> = ({
+const ConversationListCell = ({
   showJoinButton,
   conversation,
   onJoinCall,
   onClick = noop,
   isSelected = () => false,
   rightClick = noop,
   dataUieName,
-  index,
-  focusConversation,
-  isConversationListFocus,
-  handleFocus,
   handleArrowKeyDown,
-  isFolder = false,
-}) => {
+  currentFocusId,
+}: ConversationListCellProps) => {
   const {
     isGroup,
     is1to1,
@@ -129,34 +118,22 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
       onClick(event);
     } else if (isKey(event, KEY.ARROW_RIGHT)) {
       setContextMenuFocus(true);
+      contextMenuRef.current?.focus();
     } else {
       setContextMenuFocus(false);
     }
+
     handleArrowKeyDown(event);
   };
 
-  useEffect(() => {
-    // Move element into view when it is focused
-    if (focusConversation && conversationRef.current && isConversationListFocus) {
-      // isConversationListFocus is required to focus on first conversation only
-      conversationRef.current.focus();
-    }
-  }, [focusConversation, isConversationListFocus]);
-
-  useEffect(() => {
-    // Move element into view when it is focused
-    if (focusConversation && contextMenuRef.current && focusContextMenu) {
-      contextMenuRef.current.focus();
-    }
-  }, [focusConversation, focusContextMenu]);
-
   const handleContextKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === KEY.SPACE || event.key === KEY.ENTER) {
       const newEvent = setContextMenuPosition(event);
       rightClick(conversation, newEvent);
       setContextMenuOpen(true);
       return;
     }
+
     setContextMenuFocus(false);
     setContextMenuOpen(false);
 
@@ -167,15 +144,15 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
     }
   };
 
+  const isFocused = currentFocusId === conversation.id;
+
   // always focus on the selected conversation when the folder tab loaded
   useEffect(() => {
-    if (isActive && isConversationListFocus && isFolder) {
-      handleFocus(index);
+    if (isFocused) {
+      conversationRef.current?.focus();
     }
-  }, [index, isActive, isFolder, isConversationListFocus, handleFocus]);
+  }, [isFocused]);
 
-  const mainButtonTabIndex = useMessageFocusedTabIndex(focusConversation);
-  const contextMenuButtonTabIndex = useMessageFocusedTabIndex(focusContextMenu && focusConversation);
   const availabilityStrings: Record<string, string> = {
     [Availability.Type.AVAILABLE]: t('userAvailabilityAvailable'),
     [Availability.Type.AWAY]: t('userAvailabilityAway'),
@@ -206,23 +183,26 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
           onClick={onClick}
           onKeyDown={handleDivKeyDown}
           data-uie-name="go-open-conversation"
-          tabIndex={mainButtonTabIndex}
+          tabIndex={isFocused ? TabIndex.FOCUSABLE : TabIndex.UNFOCUSABLE}
           aria-label={t('accessibility.openConversation', displayName)}
           aria-describedby={contextMenuKeyboardShortcut}
         >
           <span id={contextMenuKeyboardShortcut} aria-label={t('accessibility.conversationOptionsMenuAccessKey')} />
+
           <div
             className={cx('conversation-list-cell-left', {
               'conversation-list-cell-left-opaque': removedFromConversation || users.length === 0,
             })}
           >
             {isGroup && <GroupAvatar className="conversation-list-cell-avatar-arrow" users={users} />}
+
             {!isGroup && !!users.length && (
               <div className="avatar-halo">
                 <Avatar participant={users[0]} avatarSize={AVATAR_SIZE.SMALL} />
               </div>
             )}
           </div>
+
           <div className="conversation-list-cell-center">
             {is1to1 && selfUser?.inTeam() ? (
               <AvailabilityState
@@ -238,6 +218,7 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
                 {displayName}
               </span>
             )}
+
             <span
               className={cx('conversation-list-cell-description', {
                 'conversation-list-cell-description--active': isActive,
@@ -248,6 +229,7 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
             </span>
           </div>
         </div>
+
         <div className="conversation-list-cell-right">
           <button
             ref={contextMenuRef}
@@ -257,14 +239,15 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
             data-uie-name="go-options"
             aria-label={t('accessibility.conversationOptionsMenu')}
             type="button"
-            tabIndex={contextMenuButtonTabIndex}
+            tabIndex={focusContextMenu && isFocused ? TabIndex.FOCUSABLE : TabIndex.UNFOCUSABLE}
             aria-haspopup="true"
             onClick={event => {
               event.stopPropagation();
               rightClick(conversation, event.nativeEvent);
             }}
             onKeyDown={handleContextKeyDown}
           />
+
           {!showJoinButton && (
             <>
               {cellState.icon === ConversationStatusIcon.PENDING_CONNECTION && (
@@ -276,6 +259,7 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
                   <Icon.Pending className="svg-icon" />
                 </span>
               )}
+
               {cellState.icon === ConversationStatusIcon.UNREAD_MENTION && (
                 <span
                   className="conversation-list-cell-badge cell-badge-dark"
@@ -285,6 +269,7 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
                   <Icon.Mention className="svg-icon" />
                 </span>
               )}
+
               {cellState.icon === ConversationStatusIcon.UNREAD_REPLY && (
                 <span
                   className="conversation-list-cell-badge cell-badge-dark"
@@ -295,6 +280,7 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
                   <Icon.Reply className="svg-icon" />
                 </span>
               )}
+
               {cellState.icon === ConversationStatusIcon.UNREAD_PING && (
                 <span
                   className="conversation-list-cell-badge cell-badge-dark"
@@ -304,6 +290,7 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
                   <Icon.Ping className="svg-icon" />
                 </span>
               )}
+
               {cellState.icon === ConversationStatusIcon.MISSED_CALL && (
                 <span
                   className="conversation-list-cell-badge cell-badge-dark"
@@ -313,6 +300,7 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
                   <Icon.Hangup className="svg-icon" />
                 </span>
               )}
+
               {cellState.icon === ConversationStatusIcon.MUTED && (
                 <span
                   className="conversation-list-cell-badge cell-badge-light conversation-muted"
@@ -322,6 +310,7 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
                   <Icon.Mute className="svg-icon" />
                 </span>
               )}
+
               {cellState.icon === ConversationStatusIcon.UNREAD_MESSAGES && unreadState.allMessages.length > 0 && (
                 <span
                   className="conversation-list-cell-badge cell-badge-dark"
@@ -333,6 +322,7 @@ const ConversationListCell: React.FC<ConversationListCellProps> = ({
               )}
             </>
           )}
+
           {showJoinButton && (
             <button
               onClick={onClickJoinCall}

src/script/hooks/useConversationFocus.ts

@@ -0,0 +1,52 @@
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useCallback, useState} from 'react';
+import type {KeyboardEvent as ReactKeyboardEvent} from 'react';
+
+import {isKey, isTabKey, KEY} from 'Util/KeyboardUtil';
+
+import {Conversation} from '../entity/Conversation';
+
+function useConversationFocus(conversations: Conversation[]) {
+  const [currentFocus, setCurrentFocus] = useState(conversations[0].id);
+
+  const handleKeyDown = useCallback(
+    (index: number) => (event: ReactKeyboardEvent | KeyboardEvent) => {
+      if (isKey(event, KEY.ARROW_DOWN)) {
+        event.preventDefault();
+        const nextConversation = conversations?.[index + 1];
+
+        setCurrentFocus(nextConversation?.id || conversations[0].id);
+      } else if (isKey(event, KEY.ARROW_UP)) {
+        event.preventDefault();
+        const prevConversation = conversations?.[index - 1];
+
+        setCurrentFocus(prevConversation?.id || conversations[conversations.length - 1].id);
+      } else if (isTabKey(event)) {
+        setCurrentFocus(conversations[0].id);
+      }
+    },
+    [conversations],
+  );
+
+  return {currentFocus, handleKeyDown, setCurrentFocus};
+}
+
+export {useConversationFocus};

src/script/page/LeftSidebar/panels/Archive.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import React, {useEffect} from 'react';
+import {useEffect} from 'react';
 
 import {amplify} from 'amplify';
 import {container} from 'tsyringe';
@@ -33,7 +33,7 @@ import {ListWrapper} from './ListWrapper';
 import {ConversationRepository} from '../../../conversation/ConversationRepository';
 import {ConversationState} from '../../../conversation/ConversationState';
 import {Conversation} from '../../../entity/Conversation';
-import {useRoveFocus} from '../../../hooks/useRoveFocus';
+import {useConversationFocus} from '../../../hooks/useConversationFocus';
 import {ListViewModel} from '../../../view_model/ListViewModel';
 
 type ArchiveProps = {
@@ -44,13 +44,13 @@ type ArchiveProps = {
   onClose: () => void;
 };
 
-const Archive: React.FC<ArchiveProps> = ({
+const Archive = ({
   listViewModel,
   conversationRepository,
   answerCall,
   onClose,
   conversationState = container.resolve(ConversationState),
-}) => {
+}: ArchiveProps) => {
   const {archivedConversations: conversations} = useKoSubscribableChildren(conversationState, [
     'archivedConversations',
   ]);
@@ -66,7 +66,7 @@ const Archive: React.FC<ArchiveProps> = ({
     conversationRepository.updateArchivedConversations();
   }, []);
 
-  const {currentFocus, handleKeyDown, setCurrentFocus} = useRoveFocus(conversations.length);
+  const {currentFocus, handleKeyDown} = useConversationFocus(conversations);
 
   return (
     <ListWrapper id="archive" header={t('archiveHeader')} onClose={onClose}>
@@ -75,12 +75,9 @@ const Archive: React.FC<ArchiveProps> = ({
       <ul className="left-list-items no-scroll">
         {conversations.map((conversation, index) => (
           <ConversationListCell
+            currentFocusId={currentFocus}
             key={conversation.id}
-            index={index}
-            focusConversation={currentFocus === index}
-            isConversationListFocus
-            handleFocus={setCurrentFocus}
-            handleArrowKeyDown={handleKeyDown}
+            handleArrowKeyDown={handleKeyDown(index)}
             dataUieName="item-conversation-archived"
             onClick={() => onClickConversation(conversation)}
             rightClick={listViewModel.onContextMenu}