improvement: a11y: landmark-ify "Chat" section

So that when the focus enters the region,
screen readers announce "Bob chat region".
This also includes e.g. moving focus
from the "Search for chats" input to the composer.

Author: WofWca

packages/frontend/scss/_global.scss

@@ -284,3 +284,22 @@ audio {
 p.whitespace {
   white-space: break-spaces;
 }
+
+// Only for screen-readers.
+// Taken from
+// https://github.com/twbs/bootstrap/blob/4c98145482719f5113ca31e389a7be07c5404e13/scss/mixins/_visually-hidden.scss#L3-L22
+.visually-hidden {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+
+  // Fix for positioned table caption that could become anonymous cells
+  &:not(caption) {
+    position: absolute !important;
+  }
+}

packages/frontend/src/components/composer/Composer.tsx

@@ -503,13 +503,13 @@ const Composer = forwardRef<
         // TODO a11y: when `isEditingModeActive`, we have an "Edit message"
         // text, which we can use as the label / header.
         aria-label={
-          (messageEditing.isEditingModeActive
+          messageEditing.isEditingModeActive
             ? window.static_translate('edit_message')
-            : window.static_translate('write_message_desktop')) +
-          // Make it clear which chat we're in.
-          // TODO probably need a proper string, with interpolation.
-          ': ' +
-          selectedChat.name
+            : window.static_translate('write_message_desktop')
+          // We could also add chat name here to make it extra clear
+          // which chat we're in,
+          // but the "Chat" region label
+          // (`id='chat-section-heading'`) is probably enough.
         }
       >
         <div className='upper-bar'>

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

@@ -286,7 +286,11 @@ export default function MainScreen({ accountId }: Props) {
           }}
         />
       </section>
-      <section className={styles.chatAndNavbar}>
+      <section
+        role='region'
+        aria-labelledby='chat-section-heading'
+        className={styles.chatAndNavbar}
+      >
         <nav className={styles.chatNavbar} data-tauri-drag-region>
           {smallScreenMode && (
             <span data-no-drag-region>
@@ -468,7 +472,13 @@ function ChatHeading({ chat }: { chat: T.FullChat }) {
       />
       <div style={{ marginInlineStart: '7px', overflow: 'hidden' }}>
         <div className='navbar-chat-name'>
-          <div className='truncated'>{chat.name}</div>
+          <h2 id='chat-section-heading' className='truncated'>
+            {chat.name}
+            <span className='visually-hidden'>
+              <br />
+              {tx('chat')}
+            </span>
+          </h2>
           <div className='chat_property_icons'>
             {chat.ephemeralTimer !== 0 && (
               <div

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

@@ -91,6 +91,18 @@
       font-size: 18px;
       font-weight: bold;
       overflow: hidden;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: inherit;
+        font-weight: inherit;
+        display: block;
+        margin: 0;
+      }
     }
     :global(.navbar-heading-chat-info-button) {
       // Fill the parent, overlay the siblings.