From 4b21981b323dc27dd5a102fa9b8a1fa30bd109c9 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Sat, 6 Jun 2026 19:45:59 +0000
Subject: [PATCH] Keep checkbox summary toggle focus stable

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 .../IssueThreadInteractionCard.test.tsx       |  5 ++++
 .../components/IssueThreadInteractionCard.tsx | 24 +++++--------------
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/IssueThreadInteractionCard.test.tsx b/ui/src/components/IssueThreadInteractionCard.test.tsx
index ca025ec3458..f36ff7816fd 100644
--- a/ui/src/components/IssueThreadInteractionCard.test.tsx
+++ b/ui/src/components/IssueThreadInteractionCard.test.tsx
@@ -480,6 +480,8 @@ describe("IssueThreadInteractionCard", () => {
       button.textContent?.includes("+34 more"),
     );
     expect(moreButton).toBeTruthy();
+    moreButton?.focus();
+    expect(document.activeElement).toBe(moreButton);
 
     act(() => {
       moreButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
@@ -487,11 +489,13 @@ describe("IssueThreadInteractionCard", () => {
 
     expect(host.textContent).not.toContain("+34 more");
     expect(countSelectedChips()).toBe(42);
+    expect(document.activeElement).toBe(moreButton);
 
     const showLessButton = Array.from(host.querySelectorAll("button")).find((button) =>
       button.textContent?.includes("Show less"),
     );
     expect(showLessButton).toBeTruthy();
+    expect(showLessButton).toBe(moreButton);
 
     act(() => {
       showLessButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
@@ -499,6 +503,7 @@ describe("IssueThreadInteractionCard", () => {
 
     expect(countSelectedChips()).toBe(8);
     expect(host.textContent).toContain("+34 more");
+    expect(document.activeElement).toBe(moreButton);
   });
 
   it("stays compact and scrollable with around 100 options", () => {
diff --git a/ui/src/components/IssueThreadInteractionCard.tsx b/ui/src/components/IssueThreadInteractionCard.tsx
index 6bcf964a871..1117cf06088 100644
--- a/ui/src/components/IssueThreadInteractionCard.tsx
+++ b/ui/src/components/IssueThreadInteractionCard.tsx
@@ -1347,7 +1347,8 @@ function RequestCheckboxConfirmationResolution({
     const visibleLabels = expanded
       ? selectedLabels
       : selectedLabels.slice(0, CHECKBOX_SUMMARY_LABEL_LIMIT);
-    const hiddenCount = selectedLabels.length - visibleLabels.length;
+    const hiddenCount = selectedLabels.length - CHECKBOX_SUMMARY_LABEL_LIMIT;
+    const hasHiddenLabels = hiddenCount > 0;
     const chipClassName =
       "inline-flex items-center rounded-sm border border-border/60 bg-transparent px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground";
 
@@ -1366,30 +1367,17 @@ function RequestCheckboxConfirmationResolution({
             {visibleLabels.map((label, index) => (
               <TaskField key={`${label}-${index}`} label="Selected" value={label} />
             ))}
-            {hiddenCount > 0 ? (
+            {hasHiddenLabels ? (
               <button
                 type="button"
-                onClick={() => setExpanded(true)}
+                onClick={() => setExpanded((current) => !current)}
                 className={cn(
                   chipClassName,
                   "cursor-pointer transition-colors hover:border-border hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
                 )}
-                aria-expanded={false}
+                aria-expanded={expanded}
               >
-                +{hiddenCount} more
-              </button>
-            ) : null}
-            {expanded && selectedLabels.length > CHECKBOX_SUMMARY_LABEL_LIMIT ? (
-              <button
-                type="button"
-                onClick={() => setExpanded(false)}
-                className={cn(
-                  chipClassName,
-                  "cursor-pointer transition-colors hover:border-border hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-                )}
-                aria-expanded={true}
-              >
-                Show less
+                {expanded ? "Show less" : `+${hiddenCount} more`}
               </button>
             ) : null}
           </div>