fix(mobile): pull request headings and activity entries are navigable by screen readers

apps/mobile/src/features/pull-requests/PullRequestControls.tsx

@@ -45,11 +45,15 @@ export function PullRequestCardRow(props: {
   readonly compact?: boolean;
   readonly menu?: boolean;
   readonly expanded?: boolean;
+  /** Section rows announce as headings so screen readers can jump between them; they still activate. */
+  readonly heading?: boolean;
   readonly children?: ReactNode;
 }) {
   return (
     <Pressable
-      accessibilityRole={props.onPress || props.menu ? "button" : undefined}
+      accessibilityRole={
+        props.heading ? "header" : props.onPress || props.menu ? "button" : undefined
+      }
       accessibilityLabel={props.accessibilityLabel}
       accessibilityState={props.expanded === undefined ? undefined : { expanded: props.expanded }}
       onPress={props.onPress}

apps/mobile/src/features/pull-requests/PullRequestRouteScreen.tsx

@@ -224,7 +224,7 @@ function PullRequestIdentity(props: {
           <View className="h-3 w-12 rounded bg-subtle-strong" />
         )}
       </View>
-      <Text selectable className="text-xl font-t3-bold leading-7">
+      <Text selectable accessibilityRole="header" className="text-xl font-t3-bold leading-7">
         {pr.title}
       </Text>
       <View className="flex-row items-center gap-2">

apps/mobile/src/features/pull-requests/PullRequestSectionHeading.tsx

@@ -2,5 +2,9 @@ import type { ReactNode } from "react";
 import { AppText } from "../../components/ui/AppText";
 
 export function PullRequestSectionHeading({ children }: { readonly children: ReactNode }) {
-  return <AppText className="text-base font-t3-semibold">{children}</AppText>;
+  return (
+    <AppText accessibilityRole="header" className="text-base font-t3-semibold">
+      {children}
+    </AppText>
+  );
 }

apps/mobile/src/features/pull-requests/PullRequestStatusRows.tsx

@@ -122,6 +122,7 @@ export function PullRequestChecksRow(props: RowProps) {
         value={checks.count}
         compact
         accessibilityLabel={`Checks, ${checks.label}`}
+        heading
         expanded={expanded}
         onPress={() => setExpanded(!expanded)}
       />
@@ -221,6 +222,7 @@ export function PullRequestBranchRow(props: RowProps) {
       compact
       menu={methods.length > 0 || canResolve}
       accessibilityLabel={`Branch, ${summary}`}
+      heading
     />
   );
   if (!methods.length && !canResolve) return row;
@@ -270,6 +272,7 @@ export function PullRequestReviewersRow(props: RowProps) {
         value={summary.count}
         compact
         expanded={expanded}
+        heading
         onPress={() => setExpanded(!expanded)}
       />
       {expanded ? (

apps/mobile/src/features/pull-requests/PullRequestTimeline.tsx

@@ -96,28 +96,37 @@ function TimelineComment({
   const state = normalizedReviewState(comment.reviewState);
   const approved = state === "APPROVED";
   const changes = state === "CHANGES_REQUESTED";
+  const author = comment.author?.login ?? "Unknown author";
+  const action = approved ? "approved" : changes ? "requested changes" : "commented";
   return (
     <TimelineEvent
       icon={approved ? "checkmark" : changes ? "doc.text" : "text.bubble"}
       tone={approved ? "success" : changes ? "danger" : undefined}
     >
-      <View className="flex-row items-center gap-2">
-        <PullRequestAvatar actor={comment.author} size={22} />
-        <View className="min-w-0 flex-1">
-          <Text className="text-sm">
-            <Text className="font-t3-medium">{comment.author?.login ?? "Unknown author"}</Text>
-            <Text className="text-foreground-muted">
-              {approved ? " approved" : changes ? " requested changes" : " commented"}
+      <View
+        accessible
+        accessibilityRole="header"
+        accessibilityLabel={`${author} ${action}, ${relativeTime(comment.createdAt)} ago${comment.path ? `, ${comment.path}` : ""}`}
+        className="gap-2"
+      >
+        <View className="flex-row items-center gap-2">
+          <PullRequestAvatar actor={comment.author} size={22} />
+          <View className="min-w-0 flex-1">
+            <Text className="text-sm">
+              <Text className="font-t3-medium">{author}</Text>
+              <Text className="text-foreground-muted"> {action}</Text>
             </Text>
+          </View>
+          <Text className="text-2xs text-foreground-tertiary">
+            {relativeTime(comment.createdAt)}
           </Text>
         </View>
-        <Text className="text-2xs text-foreground-tertiary">{relativeTime(comment.createdAt)}</Text>
+        {comment.path ? (
+          <Text className="font-mono text-2xs text-foreground-muted" numberOfLines={2}>
+            {comment.path}
+          </Text>
+        ) : null}
       </View>
-      {comment.path ? (
-        <Text className="font-mono text-2xs text-foreground-muted" numberOfLines={2}>
-          {comment.path}
-        </Text>
-      ) : null}
       {preview.trim() || content.attachments.length ? (
         <View
           className={
@@ -249,7 +258,12 @@ export function pullRequestTimelineRows(
       date: thread.comments[0]?.createdAt ?? "",
       content: (
         <TimelineEvent icon="text.bubble" tone={thread.isResolved ? "success" : undefined}>
-          <View className="flex-row items-center gap-2">
+          <View
+            accessible
+            accessibilityRole="header"
+            accessibilityLabel={`${thread.comments[0]?.author?.login ?? "Unknown author"} started a discussion${thread.comments[0] ? `, ${relativeTime(thread.comments[0].createdAt)} ago` : ""}`}
+            className="flex-row items-center gap-2"
+          >
             <PullRequestAvatar actor={thread.comments[0]?.author ?? null} size={22} />
             <Text className="flex-1 text-sm">
               <Text className="font-t3-medium">