diff --git a/.changeset/fn-7613-confirm-selected-state.md b/.changeset/fn-7613-confirm-selected-state.md new file mode 100644 index 0000000000..c1c16c45d0 --- /dev/null +++ b/.changeset/fn-7613-confirm-selected-state.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Yes/No chat question buttons now show a clear selected state after clicking. +category: fix +dev: Strengthened `.chat-question-response__confirm--selected` CSS specificity (compound selector + dedicated hover/focus-visible rules) so the CTA-token selected fill/border beats the global `.btn`/`.btn:hover` rules; added `aria-pressed` and a regression test asserting the selected class toggles correctly between Yes/No. diff --git a/packages/dashboard/app/components/ChatQuestionResponse.css b/packages/dashboard/app/components/ChatQuestionResponse.css index 90ea673175..914925f21c 100644 --- a/packages/dashboard/app/components/ChatQuestionResponse.css +++ b/packages/dashboard/app/components/ChatQuestionResponse.css @@ -102,12 +102,48 @@ } .chat-question-response__option:hover, -.chat-question-response__option--selected, -.chat-question-response__confirm--selected { +.chat-question-response__option--selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); } +/* +FNXC:ChatQuestionResponse 2026-07-05-00:00: +The confirm Yes/No buttons also carry the global `.btn` class, whose base +background and (especially) `.btn:hover` rule (specificity 0,2,0) visually +swamped the old single-class `.chat-question-response__confirm--selected` +rule (0,1,0), so a clicked answer never looked selected. Use a compound +selector (`.chat-question-response__confirm.chat-question-response__confirm--selected`, +specificity 0,2,0) plus a dedicated `:hover` override so the selected state +beats `.btn`/`.btn:hover` in every interaction state, and keep everything +token-driven (`--cta-*` / `--accent` via color-mix) so light/dark themes and +the mobile column layout stay correct without hardcoded colors. +*/ +.chat-question-response__confirm { + border-color: var(--border); + background: var(--card); + color: var(--text); + font-weight: 500; +} + +.chat-question-response__confirm.chat-question-response__confirm--selected { + border-color: var(--cta-border); + background: color-mix(in srgb, var(--cta-bg) 55%, var(--card)); + color: var(--cta-text); + font-weight: 700; + box-shadow: var(--cta-glow), inset 0 0 0 var(--btn-border-width) var(--cta-border); +} + +.chat-question-response__confirm.chat-question-response__confirm--selected:hover { + background: color-mix(in srgb, var(--cta-bg-hover) 60%, var(--card)); + border-color: var(--cta-border-hover); + color: var(--cta-text); +} + +.chat-question-response__confirm.chat-question-response__confirm--selected:focus-visible { + box-shadow: var(--focus-ring-strong), var(--cta-glow); +} + .chat-question-response__option input { margin: calc(var(--space-xs) / 2) 0 0; accent-color: var(--accent); diff --git a/packages/dashboard/app/components/ChatQuestionResponse.tsx b/packages/dashboard/app/components/ChatQuestionResponse.tsx index 3c54664a13..2f8a21c3ff 100644 --- a/packages/dashboard/app/components/ChatQuestionResponse.tsx +++ b/packages/dashboard/app/components/ChatQuestionResponse.tsx @@ -168,11 +168,18 @@ function QuestionControls({ if (question.type === "confirm") { return (
+ {/* + FNXC:ChatQuestionResponse 2026-07-05-00:00: + Expose the confirm selection to assistive tech via aria-pressed so + screen reader users get the same clear selected/unselected signal + the strengthened CSS now provides visually. + */}