Render annotation cards as list items

src/sidebar/components/ThreadList.tsx

@@ -277,28 +277,30 @@ export default function ThreadList({ threads }: ThreadListProps) {
   return (
     <div>
       <div style={{ height: offscreenUpperHeight }} />
-      {visibleThreads.map(child => (
-        <div
-          className={classnames(
-            // The goal is to space out each annotation card vertically. Typically
-            // this is better handled by applying vertical spacing to the parent
-            // element (e.g. `space-y-3`) but in this case, the constraints of
-            // sibling divs before and after the list of annotation cards prevents
-            // this, so a bottom margin is added to each card's wrapping element.
-            'mb-3',
-          )}
-          data-testid="thread-card-container"
-          id={child.id}
-          key={child.id}
-        >
-          {headings.get(child) && (
-            <h3 className="text-md text-grey-7 font-bold pt-3 pb-2">
-              {headings.get(child)}
-            </h3>
-          )}
-          <ThreadCard thread={child} />
-        </div>
-      ))}
+      <ul>
+        {visibleThreads.map(child => (
+          <li
+            className={classnames(
+              // The goal is to space out each annotation card vertically. Typically
+              // this is better handled by applying vertical spacing to the parent
+              // element (e.g. `space-y-3`) but in this case, the constraints of
+              // sibling divs before and after the list of annotation cards prevents
+              // this, so a bottom margin is added to each card's wrapping element.
+              'mb-3',
+            )}
+            data-testid="thread-card-container"
+            id={child.id}
+            key={child.id}
+          >
+            {headings.get(child) && (
+              <h3 className="text-md text-grey-7 font-bold pt-3 pb-2">
+                {headings.get(child)}
+              </h3>
+            )}
+            <ThreadCard thread={child} />
+          </li>
+        ))}
+      </ul>
       <div style={{ height: offscreenLowerHeight }} />
     </div>
   );