improvement: a11y: "View Profile" label for header

This is foremost a preparation for making the chat heading
an h1-h6 element, so that it can act as a section header.
Putting an h1-h6 element inside of a button is not allowed,
and putting a button inside of a h1-h6 element is a bit awkward,
so let's have a separate button for "View Profile" / "Edit Group".

Author: WofWca

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

@@ -415,15 +415,46 @@ function ChatHeading({ chat }: { chat: T.FullChat }) {
     }
   }
 
+  let buttonLabel: string
+  switch (chat.chatType) {
+    case C.DC_CHAT_TYPE_SINGLE: {
+      buttonLabel = tx('menu_view_profile')
+      break
+    }
+    case C.DC_CHAT_TYPE_GROUP: {
+      // If you're no longer a member, editing the group is not possible,
+      // but we don't have a better string.
+      buttonLabel = tx('menu_edit_group')
+      break
+    }
+    case C.DC_CHAT_TYPE_OUT_BROADCAST: {
+      buttonLabel = tx('edit_channel')
+      break
+    }
+    case C.DC_CHAT_TYPE_IN_BROADCAST: {
+      // We don't have a more appropriate one
+      buttonLabel = tx('menu_view_profile')
+      break
+    }
+    case C.DC_CHAT_TYPE_MAILINGLIST: {
+      // We don't have a more appropriate one
+      buttonLabel = tx('menu_view_profile')
+      break
+    }
+    case C.DC_CHAT_TYPE_UNDEFINED: {
+      buttonLabel = tx('menu_view_profile')
+      break
+    }
+    default: {
+      buttonLabel = tx('menu_view_profile')
+      log.warn(`Unknown chatType ${chat.chatType}`)
+    }
+  }
+
   const subtitle = chatSubtitle(chat)
 
   return (
-    <button
-      className='navbar-heading navbar-heading--button'
-      data-no-drag-region
-      onClick={onTitleClick}
-      data-testid='chat-info-button'
-    >
+    <div className='navbar-heading' data-no-drag-region>
       <Avatar
         displayName={chat.name}
         color={chat.color}
@@ -451,7 +482,13 @@ function ChatHeading({ chat }: { chat: T.FullChat }) {
           <div className='navbar-chat-subtitle'>{subtitle}</div>
         )}
       </div>
-    </button>
+      <button
+        onClick={onTitleClick}
+        aria-label={buttonLabel}
+        data-testid='chat-info-button'
+        className='navbar-heading-chat-info-button'
+      ></button>
+    </div>
   )
 }
 

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

@@ -74,10 +74,10 @@
       width: 0;
       flex-grow: 1;
     }
-    :global(.navbar-heading--button) {
-      @include mixins.button-reset;
-    }
     :global(.navbar-heading) {
+      position: relative;
+
+      width: fit-content;
       // See `.chatNavbarHeadingWrapper`.
       max-width: 100%;
 
@@ -92,6 +92,13 @@
       font-weight: bold;
       overflow: hidden;
     }
+    :global(.navbar-heading-chat-info-button) {
+      // Fill the parent, overlay the siblings.
+      position: absolute;
+      inset: 0;
+      background-color: transparent;
+      border: none;
+    }
 
     :global(.views) {
       display: flex;