Expose mobile PR indicator labels to accessibility (#3828)

Co-authored-by: codex <codex@users.noreply.github.com>

Author: juliusmarminge

apps/mobile/src/features/threads/thread-list-items.tsx

@@ -441,23 +441,21 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
   const iconSubtleColor = useThemeColor("--color-icon-subtle");
   const screenColor = useThemeColor("--color-screen");
   const drawerColor = useThemeColor("--color-drawer");
-  const mutedColor = useThemeColor("--color-foreground-muted");
   const pressedBackgroundColor = useThemeColor("--color-subtle");
   const selectedBackgroundColor = useThemeColor("--color-user-bubble");
-  const selectedMutedColor = useThemeColor("--color-user-bubble-foreground-muted");
 
   const { thread, onSelectThread, onArchiveThread, onDeleteThread } = props;
   const status = resolveThreadStatus(thread);
   const pr = useThreadPr(thread, props.projectCwd);
   const timestamp = relativeTime(
     thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt,
   );
+  const threadAccessibilityLabel = pr ? `${thread.title}, ${pr.accessibilityLabel}` : thread.title;
   const subtitleParts = [props.environmentLabel, thread.branch].filter((part): part is string =>
     Boolean(part),
   );
 
   const backgroundColor = compact ? screenColor : drawerColor;
-  const effectiveMuted = selected ? selectedMutedColor : mutedColor;
   const effectivePressedBackground = selected ? "rgba(255,255,255,0.16)" : pressedBackgroundColor;
   const effectiveStatus =
     selected && status
@@ -496,12 +494,6 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
       <View className="mt-px flex-row items-center gap-1.5">
         {subtitleParts.length > 0 ? (
           <>
-            <SymbolView
-              name="arrow.triangle.branch"
-              size={10}
-              tintColor={compact ? iconSubtleColor : effectiveMuted}
-              type="monochrome"
-            />
             <Text
               className={cn(
                 "shrink",
@@ -516,10 +508,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
           </>
         ) : null}
         {pr !== null ? (
-          <View
-            accessibilityLabel={pr.accessibilityLabel}
-            className="flex-row items-center gap-0.5"
-          >
+          <View className="flex-row items-center gap-0.5">
             <PullRequestIcon
               size={compact ? 13 : 11}
               color={selected ? "#ffffff" : pullRequestTintColor(pr.state, colorScheme)}
@@ -540,7 +529,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
     compact ? (
       <Pressable
         accessibilityHint="Swipe left for archive and delete actions"
-        accessibilityLabel={thread.title}
+        accessibilityLabel={threadAccessibilityLabel}
         accessibilityRole="button"
         className="bg-screen"
         onPress={() => {
@@ -586,7 +575,7 @@ export const ThreadListRow = memo(function ThreadListRow(props: {
     ) : (
       <Pressable
         accessibilityHint="Opens the thread"
-        accessibilityLabel={thread.title}
+        accessibilityLabel={threadAccessibilityLabel}
         accessibilityRole="button"
         accessibilityState={{ selected }}
         onHoverIn={() => setHovered(true)}

apps/mobile/src/state/thread-pr-presentation.ts

@@ -7,7 +7,7 @@ export interface ThreadPrPresentation {
   readonly number: number;
   readonly state: ThreadPr["state"];
   readonly url: string;
-  /** Compact desktop-style label, e.g. "#3774". */
+  /** Compact pull request number label, e.g. "3774". */
   readonly label: string;
   /** Full, provider-aware label for assistive technologies. */
   readonly accessibilityLabel: string;
@@ -29,7 +29,7 @@ export function presentThreadPr(
     number: pr.number,
     state: pr.state,
     url: pr.url,
-    label: `#${pr.number}`,
+    label: String(pr.number),
     accessibilityLabel: `#${pr.number} ${presentation.longName} ${pr.state}`,
     textClassName: PR_STATE_TEXT_CLASS[pr.state],
   };

apps/mobile/src/state/use-thread-pr.test.ts

@@ -13,9 +13,9 @@ const pullRequest: NonNullable<VcsStatusResult["pr"]> = {
 };
 
 describe("presentThreadPr", () => {
-  it("uses the compact desktop-style pull request number label", () => {
+  it("uses the compact pull request number label without a hash prefix", () => {
     expect(presentThreadPr(pullRequest, undefined)).toMatchObject({
-      label: "#3774",
+      label: "3774",
       accessibilityLabel: "#3774 pull request merged",
       textClassName: "text-violet-600 dark:text-violet-400",
     });
@@ -29,7 +29,7 @@ describe("presentThreadPr", () => {
         baseUrl: "https://gitlab.com",
       }),
     ).toMatchObject({
-      label: "#3774",
+      label: "3774",
       accessibilityLabel: "#3774 merge request merged",
     });
   });