improvement: a11y: make chat list items focusable

deltachat · Oct 21, 2024 · 1329bed · 1329bed
1 parent 3f9d826
commit 1329bed
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -53,7 +53,7 @@
 - cancel old message highlight animations when a new message is highlighted #4203
 - fix: packaging: include architecture in filename for all appimages #4202
 - fix: make open external link scheme case insensive #4201
-- improve accessibility a little #4133
+- improve accessibility a little #4133, #4210
 
 <a id="1_46_8"></a>
 

diff --git a/packages/frontend/scss/chat/_chat-list-item.scss b/packages/frontend/scss/chat/_chat-list-item.scss
@@ -3,6 +3,11 @@
 .chat-list-item,
 .pseudo-chat-list-item {
   height: 64px;
+  width: 100%;
+  text-align: unset;
+  color: var(--globalText);
+  background-color: transparent;
+  border: none;
   display: flex;
   flex-direction: row;
   padding: 0px 10px;

diff --git a/packages/frontend/src/components/chat/ChatListItem.tsx b/packages/frontend/src/components/chat/ChatListItem.tsx
@@ -172,8 +172,7 @@ function ChatListItemArchiveLink({
   ])
 
   return (
-    <div
-      role='button'
+    <button
       onClick={onClick}
       onContextMenu={onContextMenu}
       className={`chat-list-item archive-link-item ${
@@ -187,7 +186,7 @@ function ChatListItemArchiveLink({
         <div className='archive-link'>{tx('chat_archived_chats_title')}</div>
       </div>
       <FreshMessageCounter counter={chatListItem.freshMessageCounter} />
-    </div>
+    </button>
   )
 }
 
@@ -201,13 +200,14 @@ function ChatListItemError({
     kind: 'Error'
   }
   onClick: () => void
-  onContextMenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onContextMenu?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void
   isSelected?: boolean
 }) {
   log.info('Error Loading Chatlistitem ' + chatListItem.id, chatListItem.error)
   return (
-    <div
-      role='button'
+    <button
       onClick={onClick}
       onContextMenu={onContextMenu}
       className={classNames('chat-list-item', {
@@ -233,7 +233,7 @@ function ChatListItemError({
           </div>
         </div>
       </div>
-    </div>
+    </button>
   )
 }
 
@@ -249,14 +249,15 @@ function ChatListItemNormal({
     kind: 'ChatListItem'
   }
   onClick: () => void
-  onContextMenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onContextMenu?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void
   isContextMenuActive?: boolean
   isSelected?: boolean
   hover?: boolean
 }) {
   return (
-    <div
-      role='button'
+    <button
       onClick={onClick}
       onContextMenu={onContextMenu}
       className={classNames('chat-list-item', {
@@ -297,14 +298,16 @@ function ChatListItemNormal({
           lastMessageId={chatListItem.lastMessageId}
         />
       </div>
-    </div>
+    </button>
   )
 }
 
 type ChatListItemProps = {
   chatListItem: Type.ChatListItemFetchResult | undefined
   onClick: () => void
-  onContextMenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onContextMenu?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void
   isContextMenuActive?: boolean
   isSelected?: boolean
   hover?: boolean
@@ -367,8 +370,7 @@ export const ChatListItemMessageResult = React.memo<{
   const { msr, onClick, queryStr } = props
   if (typeof msr === 'undefined') return <PlaceholderChatListItem />
   return (
-    <div
-      role='button'
+    <button
       onClick={onClick}
       className='pseudo-chat-list-item message-search-result'
     >
@@ -424,7 +426,7 @@ export const ChatListItemMessageResult = React.memo<{
           <div className='text'>{rMessage(msr.message, queryStr)}</div>
         </div>
       </div>
-    </div>
+    </button>
   )
 })