Skip to content

Expose mobile PR indicator labels to accessibility #3828

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusmarminge merged 5 commits into from
Jul 9, 2026
+9 −20
Merged

Expose mobile PR indicator labels to accessibility #3828

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a401fc6
Show compact PR numbers in mobile thread rows
juliusmarminge Jul 9, 2026
7ecb46e
Use provider-aware PR labels on mobile
juliusmarminge Jul 9, 2026
519bb79
Expose PR number indicator to accessibility
juliusmarminge Jul 9, 2026
b4dc215
Merge origin/main into feature/mobile-pr-number-indicator
juliusmarminge Jul 9, 2026
d0d1129
fix(mobile): expose PR details in thread row label
juliusmarminge Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 4 additions & 15 deletions apps/mobile/src/features/threads/thread-list-items.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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

@macroscopeapp macroscopeapp Bot Jul 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Medium threads/thread-list-items.tsx:497

The branch indicator icon (arrow.triangle.branch SymbolView) was removed from the subtitle row, so every thread row that shows branch/environment metadata no longer renders the branch icon. This is a user-visible regression affecting both compact and sidebar thread lists. If removing the icon was intentional, consider documenting the rationale; otherwise, restore the SymbolView before the subtitle text.

Suggested change
<Text
<>
<SymbolView
name="arrow.triangle.branch"
size={10}
tintColor={compact ? iconSubtleColor : undefined}
type="monochrome"
/>
<Text
🚀 Reply "fix it for me" or copy this AI Prompt for your agent: 
In file @apps/mobile/src/features/threads/thread-list-items.tsx around line 497:

The branch indicator icon (`arrow.triangle.branch` `SymbolView`) was removed from the subtitle row, so every thread row that shows branch/environment metadata no longer renders the branch icon. This is a user-visible regression affecting both compact and sidebar thread lists. If removing the icon was intentional, consider documenting the rationale; otherwise, restore the `SymbolView` before the subtitle text.

className={cn(
"shrink",
Expand All @@ -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)}
Expand All @@ -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={() => {
Expand Down Expand Up @@ -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)}
Expand Down
4 changes: 2 additions & 2 deletions apps/mobile/src/state/thread-pr-presentation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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],
};
Expand Down
6 changes: 3 additions & 3 deletions apps/mobile/src/state/use-thread-pr.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
});
Expand All @@ -29,7 +29,7 @@ describe("presentThreadPr", () => {
baseUrl: "https://gitlab.com",
}),
).toMatchObject({
label: "#3774",
label: "3774",
accessibilityLabel: "#3774 merge request merged",
});
});
Expand Down
Loading