fix: a11y: unmark "Chats" section header as <nav>

The "Chats" and the "Messages" sections headers used to be
one single element, then it has been split into two in
66c96d7
(#4672).
But then it started to make even less sense for it to be a <nav>.

It basically consists of only two elements,
so it's probably not worth having a separate landmark for it.
Let's turn it into a generic <section> with no label.

Author: WofWca

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

@@ -230,8 +230,8 @@ export default function MainScreen({ accountId }: Props) {
         !messageSectionShouldBeHidden ? 'chat-view-open' : ''
       }`}
     >
-      <section className={styles.chatListAndNavbar}>
-        <nav className={styles.chatListNavbar} data-tauri-drag-region>
+      <section className={styles.chatListAndHeader}>
+        <section className={styles.chatListHeader} data-tauri-drag-region>
           {showArchivedChats && (
             <>
               <span data-no-drag-region>
@@ -258,7 +258,7 @@ export default function MainScreen({ accountId }: Props) {
               value={queryStr}
             />
           )}
-        </nav>
+        </section>
         <ChatList
           queryStr={queryStr}
           showArchivedChats={showArchivedChats}

packages/frontend/src/components/screens/MainScreen/styles.module.scss

@@ -3,7 +3,7 @@
 // FYI there is also `_main_screen.scss`.
 
 :global(.main-screen.small-screen.chat-view-open) {
-  .chatListAndNavbar {
+  .chatListAndHeader {
     display: none;
   }
 }
@@ -23,7 +23,7 @@
   flex-shrink: 0;
 }
 
-.chatListAndNavbar {
+.chatListAndHeader {
   display: flex;
   flex-direction: column;
 
@@ -33,7 +33,7 @@
 
   min-width: 295px;
 
-  .chatListNavbar {
+  .chatListHeader {
     @include navbar;
     display: flex;
     align-items: center;
@@ -53,7 +53,7 @@
   // Otherwise e.g. the contents of the gallery view
   // (tabs, sepcifically) will refuse to shrink,
   // and this element (`.chatAndNavbar`) will overflow the parent.
-  // Also this ensures that `.chatListAndNavbar` and `.chatAndNavbar`
+  // Also this ensures that `.chatListAndHeader` and `.chatAndNavbar`
   // take respectively 3 and 8 parts of the width of the parent
   // on wide screens.
   width: 0;