From 2255929413a125969d51418bc72e9d3de26e832a Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Wed, 23 Apr 2025 20:05:22 +0400
Subject: [PATCH 1/4] improvement: add `aria-label(ledby)` for chat list

So that screen readers say "Chats list" instead of just "list"
when the focus enters such a list.
---
 .../frontend/src/components/chat/ChatList.tsx | 69 +++++++++++++++++--
 .../components/dialogs/SelectChat/index.tsx   |  3 +
 .../src/components/dialogs/ViewGroup.tsx      | 10 ++-
 .../components/dialogs/ViewProfile/index.tsx  |  7 +-
 4 files changed, 83 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/chat/ChatList.tsx b/packages/frontend/src/components/chat/ChatList.tsx
index 7ed0e8d73a..30c6aedcbb 100644
--- a/packages/frontend/src/components/chat/ChatList.tsx
+++ b/packages/frontend/src/components/chat/ChatList.tsx
@@ -5,6 +5,8 @@ import React, {
   useCallback,
   ComponentType,
   useMemo,
+  HTMLAttributes,
+  useLayoutEffect,
 } from 'react'
 import {
   FixedSizeList as List,
@@ -60,6 +62,7 @@ export function ChatListPart({
   height,
   itemKey,
   setListRef,
+  olElementAttrs,
   itemData,
   itemHeight,
 }: {
@@ -71,6 +74,10 @@ export function ChatListPart({
   height: number
   itemKey: ListItemKeySelector<any>
   setListRef?: (ref: List<any> | null) => void
+  /**
+   * This does _not_ support maps with dynamically added/removed keys.
+   */
+  olElementAttrs?: HTMLAttributes<HTMLOListElement>
   itemData: ChatListItemData | ContactChatListItemData | MessageChatListItemData
   itemHeight: number
 }) {
@@ -92,6 +99,26 @@ export function ChatListPart({
     // So let's play it safe.
   })
 
+  const olRef = useRef<HTMLOListElement>(null)
+  // 'react-window' does not expose API to set attributes on its element,
+  // so we have to `useLayoutEffect`.
+  useLayoutEffect(() => {
+    if (olRef.current == null) {
+      return
+    }
+    if (olElementAttrs == undefined) {
+      return
+    }
+
+    for (const [key, value] of Object.entries(olElementAttrs)) {
+      if (value == undefined) {
+        olRef.current.removeAttribute(key)
+      } else {
+        olRef.current.setAttribute(key, value)
+      }
+    }
+  })
+
   return (
     <InfiniteLoader
       isItemLoaded={isRowLoaded}
@@ -102,6 +129,7 @@ export function ChatListPart({
       {({ onItemsRendered, ref }) => (
         <List
           innerElementType={'ol'}
+          innerRef={olRef}
           className='react-window-list-reset'
           height={height}
           itemCount={rowCount}
@@ -368,7 +396,10 @@ export default function ChatList(props: {
         <AutoSizer disableWidth>
           {({ height }) => (
             <div ref={tabindexWrapperElementChats}>
-              <div className='search-result-divider'>
+              <div
+                id='search-result-divider-messages'
+                className='search-result-divider'
+              >
                 {tx('search_in', searchChatInfo.name)}
                 {messageResultIds.length !== 0 &&
                   ': ' + translate_n('n_messages', messageResultIds.length)}
@@ -378,6 +409,9 @@ export default function ChatList(props: {
                 classNameOfTargetElements={rovingTabindexItemsClassName}
               >
                 <ChatListPart
+                  olElementAttrs={{
+                    'aria-labelledby': 'search-result-divider-messages',
+                  }}
                   isRowLoaded={isMessageLoaded}
                   loadMoreRows={loadMessages}
                   rowCount={messageResultIds.length}
@@ -406,7 +440,10 @@ export default function ChatList(props: {
         {({ height }) => (
           <>
             {isSearchActive && (
-              <div className='search-result-divider'>
+              <div
+                id='search-result-divider-chats'
+                className='search-result-divider'
+              >
                 {translate_n('n_chats', chatListIds.length)}
               </div>
             )}
@@ -419,6 +456,18 @@ export default function ChatList(props: {
             >
               <div ref={tabindexWrapperElementChats}>
                 <ChatListPart
+                  olElementAttrs={{
+                    // TODO perhaps `pref_` is not nice,
+                    // we might need a separate string.
+                    // The same goes for other occurrences
+                    // of `tx('pref_chats')`.
+                    'aria-labelledby': isSearchActive
+                      ? 'search-result-divider-chats'
+                      : undefined,
+                    'aria-label': !isSearchActive
+                      ? tx('pref_chats')
+                      : undefined,
+                  }}
                   isRowLoaded={isChatLoaded}
                   loadMoreRows={loadChats}
                   rowCount={chatListIds.length}
@@ -436,7 +485,10 @@ export default function ChatList(props: {
               </div>
               {isSearchActive && (
                 <>
-                  <div className='search-result-divider'>
+                  <div
+                    id='search-result-divider-contacts'
+                    className='search-result-divider'
+                  >
                     {translate_n('n_contacts', contactIds.length)}
                   </div>
                   <RovingTabindexProvider
@@ -445,6 +497,9 @@ export default function ChatList(props: {
                   >
                     <div ref={tabindexWrapperElementContacts}>
                       <ChatListPart
+                        olElementAttrs={{
+                          'aria-labelledby': 'search-result-divider-contacts',
+                        }}
                         isRowLoaded={isContactLoaded}
                         loadMoreRows={loadContact}
                         rowCount={contactIds.length}
@@ -473,7 +528,10 @@ export default function ChatList(props: {
                       )}
                     </div>
                   </RovingTabindexProvider>
-                  <div className='search-result-divider'>
+                  <div
+                    id='search-result-divider-messages'
+                    className='search-result-divider'
+                  >
                     {translated_messages_label(messageResultIds.length)}
                   </div>
 
@@ -483,6 +541,9 @@ export default function ChatList(props: {
                   >
                     <div ref={tabindexWrapperElementMessages}>
                       <ChatListPart
+                        olElementAttrs={{
+                          'aria-labelledby': 'search-result-divider-messages',
+                        }}
                         isRowLoaded={isMessageLoaded}
                         loadMoreRows={loadMessages}
                         rowCount={messageResultIds.length}
diff --git a/packages/frontend/src/components/dialogs/SelectChat/index.tsx b/packages/frontend/src/components/dialogs/SelectChat/index.tsx
index e7a245181f..2b30379465 100644
--- a/packages/frontend/src/components/dialogs/SelectChat/index.tsx
+++ b/packages/frontend/src/components/dialogs/SelectChat/index.tsx
@@ -64,6 +64,9 @@ export default function SelectChat(props: Props) {
               <AutoSizer disableWidth>
                 {({ height }) => (
                   <ChatListPart
+                    olElementAttrs={{
+                      'aria-label': tx('pref_chats'),
+                    }}
                     isRowLoaded={isChatLoaded}
                     loadMoreRows={loadChats}
                     rowCount={chatListIds.length}
diff --git a/packages/frontend/src/components/dialogs/ViewGroup.tsx b/packages/frontend/src/components/dialogs/ViewGroup.tsx
index 87a11efd31..0fd207c340 100644
--- a/packages/frontend/src/components/dialogs/ViewGroup.tsx
+++ b/packages/frontend/src/components/dialogs/ViewGroup.tsx
@@ -269,7 +269,12 @@ function ViewGroupInner(
             </DialogContent>
             {isRelatedChatsEnabled && (
               <>
-                <div className='group-separator'>{tx('related_chats')}</div>
+                <div
+                  id='view-group-related-chats-title'
+                  className='group-separator'
+                >
+                  {tx('related_chats')}
+                </div>
                 <div
                   ref={relatedChatsListWrapperRef}
                   className='group-related-chats-list-wrapper'
@@ -278,6 +283,9 @@ function ViewGroupInner(
                     wrapperElementRef={relatedChatsListWrapperRef}
                   >
                     <ChatListPart
+                      olElementAttrs={{
+                        'aria-labelledby': 'view-group-related-chats-title',
+                      }}
                       isRowLoaded={isChatLoaded}
                       loadMoreRows={loadChats}
                       rowCount={chatListIds.length}
diff --git a/packages/frontend/src/components/dialogs/ViewProfile/index.tsx b/packages/frontend/src/components/dialogs/ViewProfile/index.tsx
index d54146d6fa..c1facafbe1 100644
--- a/packages/frontend/src/components/dialogs/ViewProfile/index.tsx
+++ b/packages/frontend/src/components/dialogs/ViewProfile/index.tsx
@@ -327,7 +327,9 @@ export function ViewProfileInner({
       )}
       {!(isDeviceChat || isSelfChat) && (
         <>
-          <div className='group-separator'>{tx('profile_shared_chats')}</div>
+          <div id='view-profile-mutual-chats-title' className='group-separator'>
+            {tx('profile_shared_chats')}
+          </div>
           <div
             ref={mutualChatsListRef}
             className='mutual-chats'
@@ -337,6 +339,9 @@ export function ViewProfileInner({
               <AutoSizer disableWidth>
                 {({ height }) => (
                   <ChatListPart
+                    olElementAttrs={{
+                      'aria-labelledby': 'view-profile-mutual-chats-title',
+                    }}
                     isRowLoaded={isChatLoaded}
                     loadMoreRows={loadChats}
                     rowCount={chatListIds.length}

From d9396795a6cf0e5933035a08968f6539a2b5084b Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Thu, 24 Apr 2025 00:24:58 +0400
Subject: [PATCH 2/4] improvement: a11y: `aria-label` for messages list

So that screen readers announce "messages list"
instead of just "list" when you focus an item inside of it.
---
 packages/frontend/src/components/message/MessageList.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/message/MessageList.tsx b/packages/frontend/src/components/message/MessageList.tsx
index 51266f9a2b..d7c8928d30 100644
--- a/packages/frontend/src/components/message/MessageList.tsx
+++ b/packages/frontend/src/components/message/MessageList.tsx
@@ -732,6 +732,8 @@ export const MessageListInner = React.memo(
     unreadMessageInViewIntersectionObserver: React.MutableRefObject<IntersectionObserver | null>
     loadMissingMessages: () => Promise<void>
   }) => {
+    const tx = useTranslationFunction()
+
     const {
       onScroll,
       onScrollEnd,
@@ -859,14 +861,14 @@ export const MessageListInner = React.memo(
     if (!loaded) {
       return (
         <div id='message-list' ref={messageListRef} onScroll={onScroll2}>
-          <ol></ol>
+          <ol aria-label={tx('messages')}></ol>
         </div>
       )
     }
 
     return (
       <div id='message-list' ref={messageListRef} onScroll={onScroll2}>
-        <ol>
+        <ol aria-label={tx('messages')}>
           <RovingTabindexProvider wrapperElementRef={messageListRef}>
             {messageListItems.length === 0 && <EmptyChatMessage chat={chat} />}
             {activeView.map(messageId => {

From a17896db156242e70a8556b2d17203cad74304ec Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Thu, 24 Apr 2025 00:43:51 +0400
Subject: [PATCH 3/4] improvement: a11y: `aria-label` for accounts list

---
 .../AccountListSidebar/AccountItem.tsx        | 130 ++++++++++--------
 .../AccountListSidebar/AccountListSidebar.tsx |  14 +-
 .../AccountListSidebar/styles.module.scss     |  43 +++---
 3 files changed, 105 insertions(+), 82 deletions(-)

diff --git a/packages/frontend/src/components/AccountListSidebar/AccountItem.tsx b/packages/frontend/src/components/AccountListSidebar/AccountItem.tsx
index 8ec5323f85..1df31ee8df 100644
--- a/packages/frontend/src/components/AccountListSidebar/AccountItem.tsx
+++ b/packages/frontend/src/components/AccountListSidebar/AccountItem.tsx
@@ -242,70 +242,78 @@ export default function AccountItem({
   // for a different account, and upon initial render.
 
   return (
-    <button
-      className={classNames(styles.account, rovingTabindex.className, {
-        [styles.active]: isSelected,
-        [styles['context-menu-active']]: isContextMenuActive,
+    <li
+      className={classNames(styles.accountWrapper, {
         [styles.isSticky]: isSticky,
-        'unconfigured-account': account?.kind !== 'Configured',
       })}
-      // TODO consider adding `role='tabpanel'` for the main area of the app.
-      // Although screen readers might start to announce
-      // the account name every time you focus something in the main area,
-      // which might be too verbose.
-      role='tab'
-      aria-selected={isSelected}
-      aria-busy={!account}
-      onClick={() => onSelectAccount(accountId)}
-      onContextMenu={onContextMenu}
-      onMouseEnter={() => account && updateAccountForHoverInfo(account, true)}
-      onMouseLeave={() => account && updateAccountForHoverInfo(account, false)}
-      x-account-sidebar-account-id={accountId}
-      data-testid={`account-item-${accountId}`}
-      ref={ref}
-      tabIndex={rovingTabindex.tabIndex}
-      onFocus={rovingTabindex.setAsActiveElement}
-      onKeyDown={rovingTabindex.onKeydown}
     >
-      {!account ? (
-        <div className={styles.avatar}>
-          <div className={styles.content}>⏳</div>
-        </div>
-      ) : account.kind == 'Configured' ? (
-        <div className={styles.avatar}>
-          {' '}
-          {account.profileImage ? (
-            <img
-              className={styles.content}
-              src={runtime.transformBlobURL(account.profileImage)}
-            />
-          ) : (
-            <div
-              className={styles.content}
-              style={{ backgroundColor: account.color }}
-            >
-              {avatarInitial(
-                account.displayName || '',
-                account.addr || undefined
-              )}
-            </div>
-          )}
-        </div>
-      ) : (
-        <div className={styles.avatar}>
-          <div className={styles.content}>?</div>
-        </div>
-      )}
-      {muted && (
-        <div
-          aria-label='Account notifications muted'
-          className={styles.accountMutedIconShadow}
-        >
-          <Icon className={styles.accountMutedIcon} icon='audio-muted' />
-        </div>
-      )}
-      <div className={classNames(styles.accountBadge)}>{badgeContent}</div>
-    </button>
+      <button
+        className={classNames(styles.account, rovingTabindex.className, {
+          [styles.active]: isSelected,
+          [styles['context-menu-active']]: isContextMenuActive,
+          [styles.isSticky]: isSticky,
+          'unconfigured-account': account?.kind !== 'Configured',
+        })}
+        // TODO consider adding `role='tabpanel'` for the main area of the app.
+        // Although screen readers might start to announce
+        // the account name every time you focus something in the main area,
+        // which might be too verbose.
+        role='tab'
+        aria-selected={isSelected}
+        aria-busy={!account}
+        onClick={() => onSelectAccount(accountId)}
+        onContextMenu={onContextMenu}
+        onMouseEnter={() => account && updateAccountForHoverInfo(account, true)}
+        onMouseLeave={() =>
+          account && updateAccountForHoverInfo(account, false)
+        }
+        x-account-sidebar-account-id={accountId}
+        data-testid={`account-item-${accountId}`}
+        ref={ref}
+        tabIndex={rovingTabindex.tabIndex}
+        onFocus={rovingTabindex.setAsActiveElement}
+        onKeyDown={rovingTabindex.onKeydown}
+      >
+        {!account ? (
+          <div className={styles.avatar}>
+            <div className={styles.content}>⏳</div>
+          </div>
+        ) : account.kind == 'Configured' ? (
+          <div className={styles.avatar}>
+            {' '}
+            {account.profileImage ? (
+              <img
+                className={styles.content}
+                src={runtime.transformBlobURL(account.profileImage)}
+              />
+            ) : (
+              <div
+                className={styles.content}
+                style={{ backgroundColor: account.color }}
+              >
+                {avatarInitial(
+                  account.displayName || '',
+                  account.addr || undefined
+                )}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className={styles.avatar}>
+            <div className={styles.content}>?</div>
+          </div>
+        )}
+        {muted && (
+          <div
+            aria-label='Account notifications muted'
+            className={styles.accountMutedIconShadow}
+          >
+            <Icon className={styles.accountMutedIcon} icon='audio-muted' />
+          </div>
+        )}
+        <div className={classNames(styles.accountBadge)}>{badgeContent}</div>
+      </button>
+    </li>
   )
 }
 
diff --git a/packages/frontend/src/components/AccountListSidebar/AccountListSidebar.tsx b/packages/frontend/src/components/AccountListSidebar/AccountListSidebar.tsx
index 30c46a8539..acf7b6bab5 100644
--- a/packages/frontend/src/components/AccountListSidebar/AccountListSidebar.tsx
+++ b/packages/frontend/src/components/AccountListSidebar/AccountListSidebar.tsx
@@ -46,7 +46,7 @@ export default function AccountListSidebar({
 }: Props) {
   const tx = useTranslationFunction()
 
-  const accountsListRef = useRef<HTMLDivElement>(null)
+  const accountsListRef = useRef<HTMLUListElement>(null)
   const { openDialog } = useDialog()
   const [accounts, setAccounts] = useState<number[]>([])
   const [{ accounts: noficationSettings }] = useAccountNotificationStore()
@@ -144,8 +144,12 @@ export default function AccountListSidebar({
           data-tauri-drag-region
         />
       )}
-      <div
+      <ul
         ref={accountsListRef}
+        // Perhaps just "Profiles" would be more appropriate,
+        // because you can do other things with profiles in this list,
+        // but we have the same on Android.
+        aria-label={tx('switch_account')}
         className={styles.accountList}
         onScroll={updateHoverInfoPosition}
         role='tablist'
@@ -164,9 +168,11 @@ export default function AccountListSidebar({
               muted={noficationSettings[id]?.muted || false}
             />
           ))}
-          <AddAccountButton onClick={onAddAccount} />
+          <li>
+            <AddAccountButton onClick={onAddAccount} />
+          </li>
         </RovingTabindexProvider>
-      </div>
+      </ul>
       {/* The condition is the same as in https://github.com/deltachat/deltachat-desktop/blob/63af023437ff1828a27de2da37bf94ab180ec528/src/renderer/contexts/KeybindingsContext.tsx#L26 */}
       {window.__screen === Screens.Main && (
         <div className={styles.buttonsContainer}>
diff --git a/packages/frontend/src/components/AccountListSidebar/styles.module.scss b/packages/frontend/src/components/AccountListSidebar/styles.module.scss
index 249c00174d..22d77a81e9 100644
--- a/packages/frontend/src/components/AccountListSidebar/styles.module.scss
+++ b/packages/frontend/src/components/AccountListSidebar/styles.module.scss
@@ -50,6 +50,10 @@
     --als-avatar-margin: 5px;
     --als-active-indicator-color: white;
 
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -63,6 +67,28 @@
     }
   }
 
+  .accountWrapper {
+    margin-bottom: var(--als-avatar-margin);
+    margin-top: var(--als-avatar-margin);
+
+    &.isSticky {
+      position: sticky;
+      bottom: var(--als-avatar-margin);
+      top: var(--als-avatar-margin);
+      // Only needed when this account is scrolled _above_ the visible region.
+      z-index: map-get($z-index, account-list-sidebar-scope-sticky-account);
+
+      .account {
+        .avatar {
+          opacity: 1;
+          .content {
+            box-shadow: 0px 0px 4px 2px #00000040;
+          }
+        }
+      }
+    }
+  }
+
   .account {
     border: none;
     background: none;
@@ -71,8 +97,6 @@
 
     height: var(--als-avatar-size);
 
-    margin-bottom: var(--als-avatar-margin);
-    margin-top: var(--als-avatar-margin);
     // Adding extra `var(--als-avatar-size) + 2 * var(--als-avatar-margin)`
     // to the margins so that
     // if there is another `.isSticky` account, then that account does not
@@ -107,21 +131,6 @@
       }
     }
 
-    &.isSticky {
-      position: sticky;
-      bottom: var(--als-avatar-margin);
-      top: var(--als-avatar-margin);
-      // Only needed when this account is scrolled _above_ the visible region.
-      z-index: map-get($z-index, account-list-sidebar-scope-sticky-account);
-
-      .avatar {
-        opacity: 1;
-        .content {
-          box-shadow: 0px 0px 4px 2px #00000040;
-        }
-      }
-    }
-
     &.active,
     &:hover,
     &.context-menu-active {

From eea0295beefbb6355d2e5c9a0c5c931eb7865b17 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Sun, 4 May 2025 16:18:03 +0400
Subject: [PATCH 4/4] improvement: a11y: `aria-label` for contact lists

---
 .../src/components/contact/ContactList.tsx     |  7 ++++++-
 .../components/dialogs/CreateChat/index.tsx    | 13 +++++++++++--
 .../src/components/dialogs/ViewGroup.tsx       | 18 ++++++++++++++++--
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/contact/ContactList.tsx b/packages/frontend/src/components/contact/ContactList.tsx
index 2b82417ba5..ba2a0d5d3f 100644
--- a/packages/frontend/src/components/contact/ContactList.tsx
+++ b/packages/frontend/src/components/contact/ContactList.tsx
@@ -21,6 +21,7 @@ export function ContactList(props: {
   onRemoveClick?: (contact: Type.Contact) => void
   disabledContacts?: number[]
   onContactContextMenu?: (contact: Type.Contact) => void
+  olElementAttrs?: Omit<React.HTMLAttributes<HTMLOListElement>, 'style'>
 }) {
   const {
     contacts,
@@ -32,9 +33,13 @@ export function ContactList(props: {
     onRemoveClick,
     disabledContacts,
     onContactContextMenu,
+    olElementAttrs,
   } = props
   return (
-    <ol style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+    <ol
+      {...olElementAttrs}
+      style={{ margin: 0, padding: 0, listStyle: 'none' }}
+    >
       {contacts.map(contact => {
         let checked = false
         if (showCheckbox && typeof isChecked === 'function') {
diff --git a/packages/frontend/src/components/dialogs/CreateChat/index.tsx b/packages/frontend/src/components/dialogs/CreateChat/index.tsx
index 3f33dceb08..8ce3deed21 100644
--- a/packages/frontend/src/components/dialogs/CreateChat/index.tsx
+++ b/packages/frontend/src/components/dialogs/CreateChat/index.tsx
@@ -565,7 +565,7 @@ export function CreateGroup(props: CreateGroupProps) {
             type='group'
           />
         </DialogContent>
-        <div className='group-separator'>
+        <div id='create-group-members-title' className='group-separator'>
           {tx('n_members', groupMembers.length.toString(), {
             quantity: groupMembers.length,
           })}
@@ -587,6 +587,9 @@ export function CreateGroup(props: CreateGroupProps) {
               onRemoveClick={c => {
                 removeGroupMember(c)
               }}
+              olElementAttrs={{
+                'aria-labelledby': 'create-group-members-title',
+              }}
             />
           </RovingTabindexProvider>
         </div>
@@ -693,7 +696,10 @@ function CreateBroadcastList(props: CreateBroadcastListProps) {
           />
           <br />
           {broadcastRecipients.length > 0 && (
-            <div className='group-separator'>
+            <div
+              id='create-broadcast-list-recipients-title'
+              className='group-separator'
+            >
               {tx('n_recipients', broadcastRecipients.length.toString(), {
                 quantity: broadcastRecipients.length,
               })}
@@ -716,6 +722,9 @@ function CreateBroadcastList(props: CreateBroadcastListProps) {
                 onRemoveClick={c => {
                   removeBroadcastRecipient(c)
                 }}
+                olElementAttrs={{
+                  'aria-labelledby': 'create-broadcast-list-recipients-title',
+                }}
               />
             </RovingTabindexProvider>
           </div>
diff --git a/packages/frontend/src/components/dialogs/ViewGroup.tsx b/packages/frontend/src/components/dialogs/ViewGroup.tsx
index 0fd207c340..2847cde5b0 100644
--- a/packages/frontend/src/components/dialogs/ViewGroup.tsx
+++ b/packages/frontend/src/components/dialogs/ViewGroup.tsx
@@ -309,7 +309,10 @@ function ViewGroupInner(
                 </div>
               </>
             )}
-            <div className='group-separator'>
+            <div
+              id='view-group-members-recipients-title'
+              className='group-separator'
+            >
               {!isBroadcast
                 ? tx('n_members', groupMembers.length.toString(), {
                     quantity: groupMembers.length,
@@ -348,12 +351,20 @@ function ViewGroupInner(
                     setProfileContact(contact)
                   }}
                   onRemoveClick={showRemoveGroupMemberConfirmationDialog}
+                  olElementAttrs={{
+                    'aria-labelledby': 'view-group-members-recipients-title',
+                  }}
                 />
               </RovingTabindexProvider>
             </div>
             {pastContacts.length > 0 && (
               <>
-                <div className='group-separator'>{tx('past_members')}</div>
+                <div
+                  id='view-group-past-members-title'
+                  className='group-separator'
+                >
+                  {tx('past_members')}
+                </div>
                 <div
                   className='group-member-contact-list-wrapper'
                   ref={groupPastMemberContactListWrapperRef}
@@ -370,6 +381,9 @@ function ViewGroupInner(
                         }
                         setProfileContact(contact)
                       }}
+                      olElementAttrs={{
+                        'aria-labelledby': 'view-group-past-members-title',
+                      }}
                     />
                   </RovingTabindexProvider>
                 </div>