fix: a11y: add aria-posinset for virtualized

For `react-virtualized` lists.

[From MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset):

> The aria-posinset attribute defines an element's number or position
> in the current set of listitems or treeitems
> when not all items are present in the DOM.

TODO:
- Make sure screen readers actually announce these.
  See TODO comment.
- Apply to the remaining `<li`s.

Author: WofWca

CHANGELOG.md

@@ -8,6 +8,9 @@
 
 - keep the order of contacts when calling getContactsByIds #4651
 
+### Fixed
+- accessibility: fix screen readers announcing incorrect list sizes
+
 <a id="1_54_0"></a>
 
 ## [1.54.0] - 2025-02-15

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

@@ -57,7 +57,16 @@ export const ChatListItemRowChat = React.memo<{
   const chatId = chatListIds[index]
 
   return (
-    <li style={style}>
+    <li
+      style={style}
+      // TODO looks like screen-readers (at least NVDA) do not announce
+      // this "position" thing. Probably because the `<li>` itself
+      // is not focusable.
+      // Should we apply these attributes to the button?
+      // And get rid of the wrapper `<li>` entirely?
+      aria-posinset={index + 1}
+      aria-setsize={chatListIds.length}
+    >
       <ChatListItem
         isSelected={selectedChatId === chatId}
         chatListItem={chatCache[chatId] || undefined}
@@ -98,7 +107,11 @@ export const ChatListItemRowContact = React.memo<{
       }}
     />
   ) : (
-    <li style={style}>
+    <li
+      style={style}
+      aria-posinset={index + 1}
+      aria-setsize={contactIds.length}
+    >
       <PlaceholderChatListItem />
     </li>
   )
@@ -116,7 +129,11 @@ export const ChatListItemRowMessage = React.memo<{
   const accountId = selectedAccountId()
 
   return (
-    <li style={style}>
+    <li
+      style={style}
+      aria-posinset={index + 1}
+      aria-setsize={messageResultIds.length}
+    >
       {messageSearchResult ? (
         <ChatListItemMessageResult
           queryStr={queryStr || ''}

packages/frontend/src/components/dialogs/AddMember/AddMemberInnerDialog.tsx

@@ -323,6 +323,9 @@ function AddMemberInnerDialogRow({
     queryStrIsValidEmail,
   } = data
 
+  // `+1` for the "extra item" thing
+  const ariaSetsize = contactIds.length + 1
+
   const renderAddContact = () => {
     if (queryStrIsValidEmail) {
       const pseudoContact: Type.Contact = {
@@ -358,7 +361,7 @@ function AddMemberInnerDialogRow({
       )
     } else {
       return (
-        <li style={style}>
+        <li style={style} aria-posinset={index + 1} aria-setsize={ariaSetsize}>
           <PseudoListItemAddContact
             queryStr={queryStr}
             queryStrIsEmail={false}
@@ -376,13 +379,22 @@ function AddMemberInnerDialogRow({
   const contact = contactCache[contactIds[index]]
   if (!contact) {
     // Not loaded yet
-    return <li style={style}></li>
+    return (
+      <li
+        style={style}
+        aria-posinset={index + 1}
+        aria-setsize={ariaSetsize}
+      ></li>
+    )
   }
 
   return (
     <ContactListItem
       tagName='li'
       style={style}
+      // TODO does this get applied to the underlying element?
+      aria-posinset={index + 1}
+      aria-setsize={ariaSetsize}
       contact={contact}
       showCheckbox
       checked={