improvement: a11y: make "Chats" section a landmark

Author: WofWca

packages/e2e-tests/tests/chat-list-multiselect.spec.ts

@@ -50,7 +50,7 @@ test.beforeAll(async ({ browser }) => {
   page = await browser.newPage()
   await reloadPage(page)
 
-  chatList = page.getByRole('tablist', { name: 'Chats' })
+  chatList = page.getByLabel('Chats').getByRole('tablist')
   selectedChats = chatList.getByRole('tab', { selected: true })
   // Let's stop at 9, so that we don't accidentally select "Chat 10"
   // by providing the selector "Chat 1".

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

@@ -495,16 +495,11 @@ export default function ChatList(props: {
                     'aria-orientation': 'vertical',
                     'aria-multiselectable': multiselect != undefined,
 
-                    // 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,
+                    // When `!isSearchActive`, the wrapper `<section>` label
+                    // is enough.
                   }}
                   isRowLoaded={isChatLoaded}
                   loadMoreRows={loadChats}

packages/frontend/src/components/screens/MainScreen/MainScreen.tsx

@@ -230,7 +230,22 @@ export default function MainScreen({ accountId }: Props) {
         !messageSectionShouldBeHidden ? 'chat-view-open' : ''
       }`}
     >
-      <section className={styles.chatListAndHeader}>
+      <section
+        className={styles.chatListAndHeader}
+        role='region'
+        // TODO a11y: reconsider whether it's OK to use the "Chats" label
+        // even when we're searching for messages in one particular chat
+        // (`queryChatId`), and even despite the fact
+        // that search results, besides chats,
+        // also include messages and contacts.
+        // For the former, perhaps one could argue that `queryChatId`
+        // is just a part of the search query.
+        //
+        // TODO a11y: perhaps `pref_` is not nice, we might need
+        // a separate string.
+        // The same goes for other occurrences of `tx('pref_chats')`.
+        aria-label={tx('pref_chats')}
+      >
         <section className={styles.chatListHeader} data-tauri-drag-region>
           {showArchivedChats && (
             <>