fix: a11y: correct aria-posinset for chat list

Due to the usage of a virtualized list,
screen readers would announce an incorrect number of chats
in the chat list, and the positions of individual chats in the list.

Explicitly setting `aria-posinset` and `aria-setsize` should work.

This only handles the chat list and not all the virtualized lists
that we have.

Related:
- bvaughn/react-window#808.
- #4660.
- #5025.

Author: WofWca

CHANGELOG.md

@@ -8,6 +8,7 @@
 ### Fixed
 - fix "Recent 3 apps" in the chat header showing apps from another chat sometimes #5265
 - accessibility: don't re-announce message input (composer) after sending every message #5049
+- accessibility: correct `aria-posinset` for chat list #5044
 - don't close context menues on window resize #5418
 
 <a id="2_11_1"></a>

packages/frontend/src/components/chat/ChatListItem.tsx

@@ -154,21 +154,28 @@ const Message = React.memo<
   )
 })
 
-export const PlaceholderChatListItem = React.memo(_ => {
-  return <div className={classNames('chat-list-item', 'skeleton')} />
-})
+export const PlaceholderChatListItem = React.memo(
+  (props: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+      <div {...props} className={classNames('chat-list-item', 'skeleton')} />
+    )
+  }
+)
 
 function ChatListItemArchiveLink({
   onClick,
   onFocus,
   chatListItem,
+  ...rest
 }: {
   onClick: (event: React.MouseEvent) => void
   onFocus?: (event: React.FocusEvent) => void
   chatListItem: Type.ChatListItemFetchResult & {
     kind: 'ArchiveLink'
   }
-}) {
+} & Required<
+  Pick<React.HTMLAttributes<HTMLDivElement>, 'aria-setsize' | 'aria-posinset'>
+>) {
   const tx = window.static_translate
   const { onContextMenu, isContextMenuActive } = useContextMenuWithActiveState([
     {
@@ -194,6 +201,7 @@ function ChatListItemArchiveLink({
   return (
     <button
       ref={ref}
+      {...rest}
       tabIndex={tabIndex}
       onClick={onClick}
       onKeyDown={tabindexOnKeydown}
@@ -225,6 +233,7 @@ function ChatListItemError({
   onFocus,
   isSelected,
   onContextMenu,
+  ...rest
 }: {
   chatListItem: Type.ChatListItemFetchResult & {
     kind: 'Error'
@@ -236,7 +245,9 @@ function ChatListItemError({
   ) => void
   roleTab?: boolean
   isSelected?: boolean
-}) {
+} & Required<
+  Pick<React.HTMLAttributes<HTMLDivElement>, 'aria-setsize' | 'aria-posinset'>
+>) {
   log.info('Error Loading Chatlistitem ' + chatListItem.id, chatListItem.error)
 
   const ref = useRef<HTMLButtonElement>(null)
@@ -251,6 +262,7 @@ function ChatListItemError({
   return (
     <button
       ref={ref}
+      {...rest}
       tabIndex={tabIndex}
       onClick={onClick}
       onKeyDown={tabindexOnKeydown}
@@ -298,6 +310,7 @@ function ChatListItemNormal({
   roleTab,
   onContextMenu,
   isContextMenuActive,
+  ...rest
 }: {
   chatListItem: Type.ChatListItemFetchResult & {
     kind: 'ChatListItem'
@@ -310,7 +323,9 @@ function ChatListItemNormal({
   isContextMenuActive?: boolean
   roleTab?: boolean
   isSelected?: boolean
-}) {
+} & Required<
+  Pick<React.HTMLAttributes<HTMLDivElement>, 'aria-setsize' | 'aria-posinset'>
+>) {
   const ref = useRef<HTMLButtonElement>(null)
 
   const {
@@ -330,6 +345,7 @@ function ChatListItemNormal({
   return (
     <button
       ref={ref}
+      {...rest}
       tabIndex={tabIndex}
       onClick={onClick}
       onKeyDown={tabindexOnKeydown}
@@ -402,13 +418,21 @@ type ChatListItemProps = {
    */
   roleTab?: boolean
   isSelected?: boolean
-}
+} & Required<
+  Pick<React.HTMLAttributes<HTMLDivElement>, 'aria-setsize' | 'aria-posinset'>
+>
 
 const ChatListItem = React.memo<ChatListItemProps>(props => {
   const { chatListItem } = props
 
   // if not loaded by virtual list yet
-  if (typeof chatListItem === 'undefined') return <PlaceholderChatListItem />
+  if (typeof chatListItem === 'undefined')
+    return (
+      <PlaceholderChatListItem
+        aria-posinset={props['aria-posinset']}
+        aria-setsize={props['aria-setsize']}
+      />
+    )
 
   if (chatListItem.kind == 'ChatListItem') {
     return <ChatListItemNormal {...props} chatListItem={chatListItem} />
@@ -420,24 +444,35 @@ const ChatListItem = React.memo<ChatListItemProps>(props => {
         chatListItem={chatListItem}
         onClick={props.onClick}
         onFocus={props.onFocus}
+        aria-posinset={props['aria-posinset']}
+        aria-setsize={props['aria-setsize']}
       />
     )
   } else {
-    return <PlaceholderChatListItem />
+    return (
+      <PlaceholderChatListItem
+        aria-posinset={props['aria-posinset']}
+        aria-setsize={props['aria-setsize']}
+      />
+    )
   }
 })
 
 export default ChatListItem
 
-export const ChatListItemMessageResult = React.memo<{
-  msr: T.MessageSearchResult
-  onClick: () => void
-  queryStr: string
-  /**
-   * Whether the user is searching for messages in just a single chat.
-   */
-  isSingleChatSearch: boolean
-}>(props => {
+export const ChatListItemMessageResult = React.memo<
+  {
+    msr: T.MessageSearchResult
+    onClick: () => void
+    queryStr: string
+    /**
+     * Whether the user is searching for messages in just a single chat.
+     */
+    isSingleChatSearch: boolean
+  } & Required<
+    Pick<React.HTMLAttributes<HTMLDivElement>, 'aria-setsize' | 'aria-posinset'>
+  >
+>(props => {
   const {
     msr,
     onClick,
@@ -447,6 +482,7 @@ export const ChatListItemMessageResult = React.memo<{
      * we don't need to specify here which chat it belongs to.
      */
     isSingleChatSearch,
+    ...rest
   } = props
 
   const ref = useRef<HTMLButtonElement>(null)
@@ -463,6 +499,7 @@ export const ChatListItemMessageResult = React.memo<{
   return (
     <button
       ref={ref}
+      {...rest}
       tabIndex={tabIndex}
       onClick={onClick}
       onKeyDown={tabindexOnKeydown}

packages/frontend/src/components/chat/ChatListItemRow.tsx

@@ -242,6 +242,8 @@ export const ChatListItemRowChat = React.memo<{
           []
         )}
         isContextMenuActive={activeContextMenuChatIds.includes(chatId)}
+        aria-setsize={chatListIds.length}
+        aria-posinset={index + 1}
       />
     </li>
   )
@@ -269,10 +271,15 @@ export const ChatListItemRowContact = React.memo<{
       onClick={async _ => {
         openViewProfileDialog(accountId, contactId)
       }}
+      aria-setsize={contactIds.length}
+      aria-posinset={index + 1}
     />
   ) : (
     <li style={style}>
-      <PlaceholderChatListItem />
+      <PlaceholderChatListItem
+        aria-setsize={contactIds.length}
+        aria-posinset={index + 1}
+      />
     </li>
   )
 }, areEqual)
@@ -304,9 +311,15 @@ export const ChatListItemRowMessage = React.memo<{
               scrollIntoViewArg: { block: 'center' },
             })
           }}
+          aria-setsize={messageResultIds.length}
+          aria-posinset={index + 1}
         />
       ) : (
-        <div className='pseudo-chat-list-item skeleton' />
+        <div
+          className='pseudo-chat-list-item skeleton'
+          aria-setsize={messageResultIds.length}
+          aria-posinset={index + 1}
+        />
       )}
     </li>
   )

packages/frontend/src/components/contact/ContactListItem.tsx

@@ -39,19 +39,24 @@ export const DeltaCheckbox = (props: {
     </div>
   )
 }
-export function ContactListItem(props: {
-  tagName: 'li' | 'div'
-  style?: React.CSSProperties
-  contact: Type.Contact
-  onClick?: (contact: Type.Contact) => void
-  showCheckbox: boolean
-  checked: boolean
-  showRemove: boolean
-  onCheckboxClick?: (contact: Type.Contact) => void
-  onRemoveClick?: (contact: Type.Contact) => void
-  disabled?: boolean
-  onContextMenu?: MouseEventHandler<HTMLButtonElement>
-}) {
+export function ContactListItem(
+  props: {
+    tagName: 'li' | 'div'
+    style?: React.CSSProperties
+    contact: Type.Contact
+    onClick?: (contact: Type.Contact) => void
+    showCheckbox: boolean
+    checked: boolean
+    showRemove: boolean
+    onCheckboxClick?: (contact: Type.Contact) => void
+    onRemoveClick?: (contact: Type.Contact) => void
+    disabled?: boolean
+    onContextMenu?: MouseEventHandler<HTMLButtonElement>
+  } & Pick<
+    React.HTMLAttributes<HTMLDivElement>,
+    'aria-setsize' | 'aria-posinset'
+  >
+) {
   const tx = useTranslationFunction()
 
   const {
@@ -94,6 +99,11 @@ export function ContactListItem(props: {
       // because there may be several interactive elements in this component.
       onKeyDown={rovingTabindex.onKeydown}
       onFocus={rovingTabindex.setAsActiveElement}
+      // FYI NVDA doesn't announce these, as of 2025-04.
+      // They probably need to be on the focusable item
+      // in order for it to work.
+      aria-setsize={props['aria-setsize']}
+      aria-posinset={props['aria-posinset']}
     >
       <button
         ref={refMain}