From 9de33e4ffd562578ebc05d98ee9ad252dbd4fb59 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Mon, 23 Jan 2023 11:59:12 -0500
Subject: [PATCH] A11y tweaks to the left pane and timeline

---
 ts/components/LeftPane.tsx                       |  4 ++--
 ts/components/conversation/LastSeenIndicator.tsx | 10 ++++++++--
 ts/components/conversation/Timeline.tsx          |  6 ++++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx
index a76f40a26..741ab8bf6 100644
--- a/ts/components/LeftPane.tsx
+++ b/ts/components/LeftPane.tsx
@@ -601,7 +601,7 @@ export function LeftPane({
   }
 
   return (
-    <div
+    <nav
       className={classNames(
         'module-left-pane',
         isResizing && 'module-left-pane--is-resizing',
@@ -706,7 +706,7 @@ export function LeftPane({
           },
         })}
       {crashReportCount > 0 && renderCrashReportDialog()}
-    </div>
+    </nav>
   );
 }
 
diff --git a/ts/components/conversation/LastSeenIndicator.tsx b/ts/components/conversation/LastSeenIndicator.tsx
index 43542bb15..82958cac6 100644
--- a/ts/components/conversation/LastSeenIndicator.tsx
+++ b/ts/components/conversation/LastSeenIndicator.tsx
@@ -19,8 +19,14 @@ export const LastSeenIndicator = forwardRef<HTMLDivElement, Props>(
 
     return (
       <div className="module-last-seen-indicator" ref={ref}>
-        <div className="module-last-seen-indicator__bar" />
-        <div className="module-last-seen-indicator__text">{message}</div>
+        <div className="module-last-seen-indicator__bar" role="separator" />
+        <div
+          aria-level={6}
+          className="module-last-seen-indicator__text"
+          role="heading"
+        >
+          {message}
+        </div>
       </div>
     );
   }
diff --git a/ts/components/conversation/Timeline.tsx b/ts/components/conversation/Timeline.tsx
index 812ccac72..ed9aefa01 100644
--- a/ts/components/conversation/Timeline.tsx
+++ b/ts/components/conversation/Timeline.tsx
@@ -871,6 +871,7 @@ export class Timeline extends React.Component<
           key={messageId}
           data-item-index={itemIndex}
           data-message-id={messageId}
+          role="listitem"
         >
           <ErrorBoundary i18n={i18n} showDebugLog={showDebugLog}>
             {renderItem({
@@ -1047,7 +1048,7 @@ export class Timeline extends React.Component<
 
               {floatingHeader}
 
-              <div
+              <main
                 className="module-timeline__messages__container"
                 onScroll={this.onScroll}
                 ref={this.containerRef}
@@ -1059,6 +1060,7 @@ export class Timeline extends React.Component<
                     haveOldest && 'module-timeline__messages--have-oldest'
                   )}
                   ref={this.messagesRef}
+                  role="list"
                 >
                   {haveOldest && (
                     <>
@@ -1079,7 +1081,7 @@ export class Timeline extends React.Component<
                     style={AT_BOTTOM_DETECTOR_STYLE}
                   />
                 </div>
-              </div>
+              </main>
 
               {shouldShowScrollDownButton ? (
                 <ScrollDownButton