improvement: arrow-key navigation for chat list

Implements the "roving tabindex" approach: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex. Supersedes #4211. This improves things, but the UX as a whole is not great yet: - The tab order is such that the chat list does not immediately follow the search field, so you have to tab through the other navbar items before you get to the chat list. Same for going back from the chat list to the search bar. - The initially "active" element is just the first chat item, and not the currently selected chat. - Since the chat list is "virtualized", the currently active element might get removed from DOM when the user scrolls, thus we lose track of the item that was last selected. Related: #2784
deltachat · Nov 22, 2024 · 17c8184 · 17c8184
1 parent 2ce7de9
commit 17c8184
Show file tree

Hide file tree

Showing 4 changed files with 379 additions and 92 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## [Unreleased][unreleased]
 
 ## Added
+- accessibility: arrow-key navigation for the list of chats #4224
 - Add "Learn More" button to "Disappearing Messages" dialog #4330
 - new icon for Mac users
 - smooth-scroll to newly arriving messages instead of jumping instantly #4125

diff --git a/packages/frontend/src/components/chat/ChatList.tsx b/packages/frontend/src/components/chat/ChatList.tsx
@@ -44,6 +44,7 @@ import type {
   MessageChatListItemData,
 } from './ChatListItemRow'
 import { isInviteLink } from '../../../../shared/util'
+import { RovingTabindexProvider } from '../../contexts/RovingTabindex'
 
 const enum LoadStatus {
   FETCHING = 1,
@@ -163,6 +164,8 @@ export default function ChatList(props: {
   const createChatByContactId = useCreateChatByContactId()
   const { selectChat } = useChat()
 
+  const tabindexWrapperElement = useRef<HTMLDivElement>(null)
+
   const addContactOnClick = async () => {
     if (!queryStrIsValidEmail || !queryStr) return
 
@@ -344,27 +347,31 @@ export default function ChatList(props: {
         <div className='chat-list'>
           <AutoSizer>
             {({ width, height }) => (
-              <div>
+              <div ref={tabindexWrapperElement}>
                 <div className='search-result-divider' style={{ width: width }}>
                   {tx('search_in', searchChatInfo.name)}
                   {messageResultIds.length !== 0 &&
                     ': ' + translate_n('n_messages', messageResultIds.length)}
                 </div>
-                <ChatListPart
-                  isRowLoaded={isMessageLoaded}
-                  loadMoreRows={loadMessages}
-                  rowCount={messageResultIds.length}
-                  width={width}
-                  height={
-                    /* take remaining space */
-                    height - DIVIDER_HEIGHT
-                  }
-                  itemKey={index => 'key' + messageResultIds[index]}
-                  itemData={messagelistData}
-                  itemHeight={CHATLISTITEM_MESSAGE_HEIGHT}
+                <RovingTabindexProvider
+                  wrapperElementRef={tabindexWrapperElement}
                 >
-                  {ChatListItemRowMessage}
-                </ChatListPart>
+                  <ChatListPart
+                    isRowLoaded={isMessageLoaded}
+                    loadMoreRows={loadMessages}
+                    rowCount={messageResultIds.length}
+                    width={width}
+                    height={
+                      /* take remaining space */
+                      height - DIVIDER_HEIGHT
+                    }
+                    itemKey={index => 'key' + messageResultIds[index]}
+                    itemData={messagelistData}
+                    itemHeight={CHATLISTITEM_MESSAGE_HEIGHT}
+                  >
+                    {ChatListItemRowMessage}
+                  </ChatListPart>
+                </RovingTabindexProvider>
               </div>
             )}
           </AutoSizer>
@@ -378,90 +385,97 @@ export default function ChatList(props: {
       <div className='chat-list'>
         <AutoSizer>
           {({ width, height }) => (
-            <div>
+            <div ref={tabindexWrapperElement}>
               {isSearchActive && (
                 <div className='search-result-divider' style={{ width: width }}>
                   {translate_n('n_chats', chatListIds.length)}
                 </div>
               )}
-              <ChatListPart
-                isRowLoaded={isChatLoaded}
-                loadMoreRows={loadChats}
-                rowCount={chatListIds.length}
-                width={width}
-                height={chatsHeight(height)}
-                setListRef={(ref: List<any> | null) =>
-                  ((listRefRef.current as any) = ref)
-                }
-                itemKey={index => 'key' + chatListIds[index]}
-                itemData={chatlistData}
-                itemHeight={CHATLISTITEM_CHAT_HEIGHT}
+              {/* TODO RovingTabindex doesn't work well with virtualized
+              lists, because the currently active element might get removed
+              from DOM if scrolled out of view. */}
+              <RovingTabindexProvider
+                wrapperElementRef={tabindexWrapperElement}
               >
-                {ChatListItemRowChat}
-              </ChatListPart>
-              {isSearchActive && (
-                <>
-                  <div
-                    className='search-result-divider'
-                    style={{ width: width }}
-                  >
-                    {translate_n('n_contacts', contactIds.length)}
-                  </div>
-                  <ChatListPart
-                    isRowLoaded={isContactLoaded}
-                    loadMoreRows={loadContact}
-                    rowCount={contactIds.length}
-                    width={width}
-                    height={contactsHeight(height)}
-                    itemKey={index => 'key' + contactIds[index]}
-                    itemData={contactlistData}
-                    itemHeight={CHATLISTITEM_CONTACT_HEIGHT}
-                  >
-                    {ChatListItemRowContact}
-                  </ChatListPart>
-                  {contactIds.length === 0 &&
-                    chatListIds.length === 0 &&
-                    queryStrIsValidEmail && (
+                <ChatListPart
+                  isRowLoaded={isChatLoaded}
+                  loadMoreRows={loadChats}
+                  rowCount={chatListIds.length}
+                  width={width}
+                  height={chatsHeight(height)}
+                  setListRef={(ref: List<any> | null) =>
+                    ((listRefRef.current as any) = ref)
+                  }
+                  itemKey={index => 'key' + chatListIds[index]}
+                  itemData={chatlistData}
+                  itemHeight={CHATLISTITEM_CHAT_HEIGHT}
+                >
+                  {ChatListItemRowChat}
+                </ChatListPart>
+                {isSearchActive && (
+                  <>
+                    <div
+                      className='search-result-divider'
+                      style={{ width: width }}
+                    >
+                      {translate_n('n_contacts', contactIds.length)}
+                    </div>
+                    <ChatListPart
+                      isRowLoaded={isContactLoaded}
+                      loadMoreRows={loadContact}
+                      rowCount={contactIds.length}
+                      width={width}
+                      height={contactsHeight(height)}
+                      itemKey={index => 'key' + contactIds[index]}
+                      itemData={contactlistData}
+                      itemHeight={CHATLISTITEM_CONTACT_HEIGHT}
+                    >
+                      {ChatListItemRowContact}
+                    </ChatListPart>
+                    {contactIds.length === 0 &&
+                      chatListIds.length === 0 &&
+                      queryStrIsValidEmail && (
+                        <div style={{ width: width }}>
+                          <PseudoListItemAddContact
+                            queryStr={queryStr?.trim() || ''}
+                            queryStrIsEmail={queryStrIsValidEmail}
+                            onClick={addContactOnClick}
+                          />
+                        </div>
+                      )}
+                    {showPseudoListItemAddContactFromInviteLink && (
                       <div style={{ width: width }}>
-                        <PseudoListItemAddContact
-                          queryStr={queryStr?.trim() || ''}
-                          queryStrIsEmail={queryStrIsValidEmail}
-                          onClick={addContactOnClick}
+                        <PseudoListItemAddContactOrGroupFromInviteLink
+                          inviteLink={queryStr!}
+                          accountId={accountId}
                         />
                       </div>
                     )}
-                  {showPseudoListItemAddContactFromInviteLink && (
-                    <div style={{ width: width }}>
-                      <PseudoListItemAddContactOrGroupFromInviteLink
-                        inviteLink={queryStr!}
-                        accountId={accountId}
-                      />
+                    <div
+                      className='search-result-divider'
+                      style={{ width: width }}
+                    >
+                      {translated_messages_label(messageResultIds.length)}
                     </div>
-                  )}
-                  <div
-                    className='search-result-divider'
-                    style={{ width: width }}
-                  >
-                    {translated_messages_label(messageResultIds.length)}
-                  </div>
 
-                  <ChatListPart
-                    isRowLoaded={isMessageLoaded}
-                    loadMoreRows={loadMessages}
-                    rowCount={messageResultIds.length}
-                    width={width}
-                    height={
-                      // take remaining space
-                      messagesHeight(height)
-                    }
-                    itemKey={index => 'key' + messageResultIds[index]}
-                    itemData={messagelistData}
-                    itemHeight={CHATLISTITEM_MESSAGE_HEIGHT}
-                  >
-                    {ChatListItemRowMessage}
-                  </ChatListPart>
-                </>
-              )}
+                    <ChatListPart
+                      isRowLoaded={isMessageLoaded}
+                      loadMoreRows={loadMessages}
+                      rowCount={messageResultIds.length}
+                      width={width}
+                      height={
+                        // take remaining space
+                        messagesHeight(height)
+                      }
+                      itemKey={index => 'key' + messageResultIds[index]}
+                      itemData={messagelistData}
+                      itemHeight={CHATLISTITEM_MESSAGE_HEIGHT}
+                    >
+                      {ChatListItemRowMessage}
+                    </ChatListPart>
+                  </>
+                )}
+              </RovingTabindexProvider>
               <button
                 className='floating-action-button'
                 onClick={onCreateChat}

diff --git a/packages/frontend/src/components/chat/ChatListItem.tsx b/packages/frontend/src/components/chat/ChatListItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import classNames from 'classnames'
 import { T, C } from '@deltachat/jsonrpc-client'
 
@@ -12,6 +12,7 @@ import { selectedAccountId } from '../../ScreenController'
 import { InlineVerifiedIcon } from '../VerifiedIcon'
 import { runtime } from '@deltachat-desktop/runtime-interface'
 import { message2React } from '../message/MessageMarkdown'
+import { useRovingTabindex } from '../../contexts/RovingTabindex'
 
 const log = getLogger('renderer/chatlist/item')
 
@@ -173,11 +174,23 @@ function ChatListItemArchiveLink({
     },
   ])
 
+  const ref = useRef<HTMLButtonElement>(null)
+
+  const {
+    tabIndex,
+    onKeydown: tabindexOnKeydown,
+    setAsActiveElement: tabindexSetAsActiveElement,
+  } = useRovingTabindex(ref)
+
   return (
     <button
+      ref={ref}
+      tabIndex={tabIndex}
       onClick={onClick}
+      onKeyDown={tabindexOnKeydown}
+      onFocus={tabindexSetAsActiveElement}
       onContextMenu={onContextMenu}
-      className={`chat-list-item archive-link-item ${
+      className={`chat-list-item archive-link-item roving-tabindex ${
         isContextMenuActive ? 'context-menu-active' : ''
       }`}
     >
@@ -208,11 +221,24 @@ function ChatListItemError({
   isSelected?: boolean
 }) {
   log.info('Error Loading Chatlistitem ' + chatListItem.id, chatListItem.error)
+
+  const ref = useRef<HTMLButtonElement>(null)
+
+  const {
+    tabIndex,
+    onKeydown: tabindexOnKeydown,
+    setAsActiveElement: tabindexSetAsActiveElement,
+  } = useRovingTabindex(ref)
+
   return (
     <button
+      ref={ref}
+      tabIndex={tabIndex}
       onClick={onClick}
+      onKeyDown={tabindexOnKeydown}
+      onFocus={tabindexSetAsActiveElement}
       onContextMenu={onContextMenu}
-      className={classNames('chat-list-item', {
+      className={classNames('chat-list-item roving-tabindex', {
         isError: true,
         selected: isSelected,
       })}
@@ -258,11 +284,24 @@ function ChatListItemNormal({
   isSelected?: boolean
   hover?: boolean
 }) {
+  const ref = useRef<HTMLButtonElement>(null)
+
+  const {
+    tabIndex,
+    onKeydown: tabindexOnKeydown,
+    setAsActiveElement: tabindexSetAsActiveElement,
+  } = useRovingTabindex(ref)
+  // TODO `setAsActiveElement` if `isSelected` and `activeElement === null`
+
   return (
     <button
+      ref={ref}
+      tabIndex={tabIndex}
       onClick={onClick}
+      onKeyDown={tabindexOnKeydown}
+      onFocus={tabindexSetAsActiveElement}
       onContextMenu={onContextMenu}
-      className={classNames('chat-list-item', {
+      className={classNames('chat-list-item roving-tabindex', {
         'has-unread': chatListItem.freshMessageCounter > 0,
         'is-contact-request': chatListItem.isContactRequest,
         pinned: chatListItem.isPinned,
@@ -370,11 +409,25 @@ export const ChatListItemMessageResult = React.memo<{
   queryStr: string
 }>(props => {
   const { msr, onClick, queryStr } = props
+
+  const ref = useRef<HTMLButtonElement>(null)
+
+  const {
+    tabIndex,
+    onKeydown: tabindexOnKeydown,
+    setAsActiveElement: tabindexSetAsActiveElement,
+  } = useRovingTabindex(ref)
+
   if (typeof msr === 'undefined') return <PlaceholderChatListItem />
+
   return (
     <button
+      ref={ref}
+      tabIndex={tabIndex}
       onClick={onClick}
-      className='pseudo-chat-list-item message-search-result'
+      onKeyDown={tabindexOnKeydown}
+      onFocus={tabindexSetAsActiveElement}
+      className='pseudo-chat-list-item message-search-result roving-tabindex'
     >
       <div className='avatars'>
         <Avatar