fix: a11y: use <nav> for accounts list

As per https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/
> Including all perceivable content on a page
> in one of its landmark regions and giving each landmark region
> a semantically meaningful role is one of the most effective ways
> of ensuring assistive technology users
> will not overlook information that is relevant to their needs.

Author: WofWca

CHANGELOG.md

@@ -7,6 +7,7 @@
 
 ### Fixed
 - fix "Recent 3 apps" in the chat header showing apps from another chat sometimes #5265
+- accessibility: improve screen-reader accessibility of the general structure of the app by using landmarks #5067
 - accessibility: don't re-announce message input (composer) after sending every message #5049
 - accessibility: correct `aria-posinset` for chat list #5044
 - don't close context menues on window resize #5418

packages/frontend/src/components/AccountListSidebar/AccountListSidebar.tsx

@@ -144,63 +144,70 @@ export default function AccountListSidebar({
           data-tauri-drag-region
         />
       )}
-      <ul
-        ref={accountsListRef}
+      <nav
         // 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'
-        aria-orientation='vertical'
+        className={styles.accountListNav}
       >
-        <RovingTabindexProvider wrapperElementRef={accountsListRef}>
-          {accountsFetch.lingeringResult?.ok === false ? (
-            <button
-              onClick={() => {
-                if (
-                  !accountsFetch.lingeringResult ||
-                  accountsFetch.lingeringResult.ok
-                ) {
-                  // This should not happen, TypeScript.
-                  throw new Error('expected non-ok value')
-                }
-                openDialog(AlertDialog, {
-                  message: tx(
-                    'error_x',
-                    'Failed to load account IDs:\n' +
-                      unknownErrorToString(accountsFetch.lingeringResult.err)
-                  ),
-                })
-              }}
-              aria-label={tx('error')}
-              title={tx('error')}
-            >
-              ⚠️
-            </button>
-          ) : (
-            accountsFetch.lingeringResult?.value.map(id => (
-              <AccountItem
-                key={id}
-                accountId={id}
-                isSelected={selectedAccountId === id}
-                onSelectAccount={selectAccount}
-                openAccountDeletionScreen={openAccountDeletionScreen}
-                updateAccountForHoverInfo={updateAccountForHoverInfo}
-                syncAllAccounts={syncAllAccounts}
-                muted={noficationSettings[id]?.muted || false}
-              />
-            ))
-          )}
-          <li>
-            <AddAccountButton onClick={onAddAccount} />
-          </li>
-        </RovingTabindexProvider>
-      </ul>
+        <ul
+          ref={accountsListRef}
+          className={styles.accountList}
+          onScroll={updateHoverInfoPosition}
+          role='tablist'
+          aria-orientation='vertical'
+        >
+          <RovingTabindexProvider wrapperElementRef={accountsListRef}>
+            {accountsFetch.lingeringResult?.ok === false ? (
+              <button
+                onClick={() => {
+                  if (
+                    !accountsFetch.lingeringResult ||
+                    accountsFetch.lingeringResult.ok
+                  ) {
+                    // This should not happen, TypeScript.
+                    throw new Error('expected non-ok value')
+                  }
+                  openDialog(AlertDialog, {
+                    message: tx(
+                      'error_x',
+                      'Failed to load account IDs:\n' +
+                        unknownErrorToString(accountsFetch.lingeringResult.err)
+                    ),
+                  })
+                }}
+                aria-label={tx('error')}
+                title={tx('error')}
+              >
+                ⚠️
+              </button>
+            ) : (
+              accountsFetch.lingeringResult?.value.map(id => (
+                <AccountItem
+                  key={id}
+                  accountId={id}
+                  isSelected={selectedAccountId === id}
+                  onSelectAccount={selectAccount}
+                  openAccountDeletionScreen={openAccountDeletionScreen}
+                  updateAccountForHoverInfo={updateAccountForHoverInfo}
+                  syncAllAccounts={syncAllAccounts}
+                  muted={noficationSettings[id]?.muted || false}
+                />
+              ))
+            )}
+            <li>
+              <AddAccountButton onClick={onAddAccount} />
+            </li>
+          </RovingTabindexProvider>
+        </ul>
+      </nav>
       {/* 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}>
+          {/* TODO a11y: this button shoul probably be
+          inside a landmark / section.
+          But which? It doesn't really belong to "Profiles". */}
           <button
             aria-label={tx('menu_settings')}
             className={styles.settingsButton}

packages/frontend/src/components/AccountListSidebar/styles.module.scss

@@ -46,26 +46,28 @@
   min-width: 68px;
   overflow: hidden;
 
-  .accountList {
-    --als-avatar-size: 42px;
-    --als-avatar-margin: 5px;
-    --als-active-indicator-color: white;
-
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-    align-items: center;
-    display: flex;
-    flex-direction: column;
+  .accountListNav {
     flex-grow: 1;
     overflow-y: scroll;
-    padding-top: 2px;
-
     scrollbar-width: none;
     &::-webkit-scrollbar {
       width: 0;
     }
+
+    .accountList {
+      --als-avatar-size: 42px;
+      --als-avatar-margin: 5px;
+      --als-active-indicator-color: white;
+
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      padding-top: 2px;
+    }
   }
 
   .accountWrapper {