Arnike/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Render other answers as text links

Browse Source
This commit is contained in:
Dotta
2026-05-25 16:00:44 +00:00
parent 4afe5ab7cb
commit 96d4079324
2 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/IssueThreadInteractionCard.test.tsx
+8 -2
View File
@@ -74,7 +74,7 @@ describe("IssueThreadInteractionCard", () => {
); );
const radios = [...host.querySelectorAll('[role="radio"]')]; const radios = [...host.querySelectorAll('[role="radio"]')];
expect(radios).toHaveLength(3); expect(radios).toHaveLength(2);
expect(radios[0]?.getAttribute("aria-checked")).toBe("false"); expect(radios[0]?.getAttribute("aria-checked")).toBe("false");
act(() => { act(() => {
@@ -88,7 +88,13 @@ describe("IssueThreadInteractionCard", () => {
expect(multiGroup?.getAttribute("aria-labelledby")).toBe( expect(multiGroup?.getAttribute("aria-labelledby")).toBe(
"interaction-questions-default-post-submit-summary-prompt", "interaction-questions-default-post-submit-summary-prompt",
); );
expect(host.querySelectorAll('[role="checkbox"]')).toHaveLength(4); expect(host.querySelectorAll('[role="checkbox"]')).toHaveLength(3);
const otherLink = Array.from(host.querySelectorAll("button")).find((button) =>
button.textContent === "Other",
);
expect(otherLink?.getAttribute("role")).toBeNull();
expect(otherLink?.className).toContain("underline");
}); });
it("submits written Other answers for pending questions", async () => { it("submits written Other answers for pending questions", async () => {
ui/src/components/IssueThreadInteractionCard.tsx
+31 -23
View File
@@ -821,32 +821,40 @@ function AskUserQuestionsCard({
/> />
</div> </div>
<div <div className="mt-3 space-y-3">
className="mt-3 grid gap-3" <div
role={question.selectionMode === "single" ? "radiogroup" : "group"} className="grid gap-3"
aria-labelledby={`${interaction.id}-${question.id}-prompt`} role={question.selectionMode === "single" ? "radiogroup" : "group"}
> aria-labelledby={`${interaction.id}-${question.id}-prompt`}
{question.options.map((option) => ( >
<QuestionOptionButton {question.options.map((option) => (
key={option.id} <QuestionOptionButton
id={`${interaction.id}-${question.id}-${option.id}`} key={option.id}
label={option.label} id={`${interaction.id}-${question.id}-${option.id}`}
description={option.description} label={option.label}
selected={(draftAnswers[question.id] ?? []).includes(option.id)} description={option.description}
selectionMode={question.selectionMode} selected={(draftAnswers[question.id] ?? []).includes(option.id)}
onClick={() => selectionMode={question.selectionMode}
toggleOption(question.id, option.id, question.selectionMode)} onClick={() =>
/> toggleOption(question.id, option.id, question.selectionMode)}
))} />
<QuestionOptionButton ))}
</div>
<button
type="button"
id={`${interaction.id}-${question.id}-other`} id={`${interaction.id}-${question.id}-other`}
label="Other" aria-expanded={otherActiveQuestions[question.id] === true}
description="Use a written answer instead of the listed choices." className={cn(
selected={otherActiveQuestions[question.id] === true} "text-sm font-medium underline underline-offset-4 transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
selectionMode={question.selectionMode} otherActiveQuestions[question.id]
? "text-sky-700 hover:text-sky-800 dark:text-sky-300 dark:hover:text-sky-200"
: "text-muted-foreground hover:text-foreground",
)}
onClick={() => onClick={() =>
toggleOption(question.id, OTHER_ANSWER_ID, question.selectionMode)} toggleOption(question.id, OTHER_ANSWER_ID, question.selectionMode)}
/> >
Other
</button>
{otherActiveQuestions[question.id] ? ( {otherActiveQuestions[question.id] ? (
<Textarea <Textarea
aria-label={`Other answer for ${question.prompt}`} aria-label={`Other answer for ${question.prompt}`}