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

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

@@ -160,19 +160,26 @@ 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,
   chatListItem,
+  ...rest
 }: {
   onClick: () => void
   chatListItem: Type.ChatListItemFetchResult & {
     kind: 'ArchiveLink'
   }
-}) {
+} & Required<
+  Pick<React.HTMLAttributes<HTMLDivElement>, 'aria-setsize' | 'aria-posinset'>
+>) {
   const tx = window.static_translate
   const { onContextMenu, isContextMenuActive } = useContextMenuWithActiveState([
     {
@@ -198,6 +205,7 @@ function ChatListItemArchiveLink({
   return (
     <button
       ref={ref}
+      {...rest}
       tabIndex={tabIndex}
       onClick={onClick}
       onKeyDown={tabindexOnKeydown}
@@ -224,6 +232,7 @@ function ChatListItemError({
   roleTab,
   isSelected,
   onContextMenu,
+  ...rest
 }: {
   chatListItem: Type.ChatListItemFetchResult & {
     kind: 'Error'
@@ -234,7 +243,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)
@@ -249,6 +260,7 @@ function ChatListItemError({
   return (
     <button
       ref={ref}
+      {...rest}
       tabIndex={tabIndex}
       onClick={onClick}
       onKeyDown={tabindexOnKeydown}
@@ -292,6 +304,7 @@ function ChatListItemNormal({
   onContextMenu,
   isContextMenuActive,
   hover,
+  ...rest
 }: {
   chatListItem: Type.ChatListItemFetchResult & {
     kind: 'ChatListItem'
@@ -304,7 +317,9 @@ function ChatListItemNormal({
   roleTab?: boolean
   isSelected?: boolean
   hover?: boolean
-}) {
+} & Required<
+  Pick<React.HTMLAttributes<HTMLDivElement>, 'aria-setsize' | 'aria-posinset'>
+>) {
   const ref = useRef<HTMLButtonElement>(null)
 
   const {
@@ -318,6 +333,7 @@ function ChatListItemNormal({
   return (
     <button
       ref={ref}
+      {...rest}
       tabIndex={tabIndex}
       onClick={onClick}
       onKeyDown={tabindexOnKeydown}
@@ -387,14 +403,22 @@ type ChatListItemProps = {
   roleTab?: boolean
   isSelected?: boolean
   hover?: 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} />
@@ -405,10 +429,17 @@ const ChatListItem = React.memo<ChatListItemProps>(
         <ChatListItemArchiveLink
           chatListItem={chatListItem}
           onClick={props.onClick}
+          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']}
+        />
+      )
     }
   },
   (prevProps, nextProps) => {
@@ -422,15 +453,19 @@ const ChatListItem = React.memo<ChatListItemProps>(
 
 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,
@@ -440,6 +475,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)
@@ -456,6 +492,7 @@ export const ChatListItemMessageResult = React.memo<{
   return (
     <button
       ref={ref}
+      {...rest}
       tabIndex={tabIndex}
       onClick={onClick}
       onKeyDown={tabindexOnKeydown}

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

@@ -84,6 +84,8 @@ export const ChatListItemRowChat = React.memo<{
           }
         }}
         isContextMenuActive={activeContextMenuChatId === chatId}
+        aria-setsize={chatListIds.length}
+        aria-posinset={index + 1}
       />
     </li>
   )
@@ -111,10 +113,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)
@@ -146,9 +153,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}