fix: switch to list-style selection for single and multi-select questions

[karthiknadig]

Fixes #291328
Fixes #291708

[Copilot]

Pull request overview

Updates the chat question carousel UI to use a list-style selection experience (QuickPick-like) for both single- and multi-select questions, instead of native radio buttons/checkboxes.

Changes:

• Reworked single-select rendering to a role="listbox" list with selectable rows and a checkmark indicator.
• Reworked multi-select rendering to list rows with VS Code’s Checkbox component and listbox semantics.
• Updated CSS and adjusted unit tests to validate the new DOM structure and selection state.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatQuestionCarouselPart.ts	Implements list-style single/multi-select rendering, keyboard handling, and answer extraction.
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css	Adds styling for list-style selection rows (QuickPick-like look/feel).
src/vs/workbench/contrib/chat/test/browser/widget/chatContentParts/chatQuestionCarouselPart.test.ts	Updates tests to assert list-based DOM structure and selection state classes.

Comments suppressed due to low confidence (1)

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatQuestionCarouselPart.ts:681

• Pressing Space in multi-select toggles checkboxes[focusedIndex].checked programmatically, but this won’t emit checkbox.onChange, so the corresponding list item’s checked class and aria-selected can get out of sync. Use the same toggle path as mouse/keyboard interaction (e.g., invoke the checkbox click/toggle method or update list item state alongside the assignment).

			} else if (event.keyCode === KeyCode.Space) {
				e.preventDefault();
				// Toggle the currently focused checkbox
				if (focusedIndex >= 0 && focusedIndex < checkboxes.length) {
					checkboxes[focusedIndex].checked = !checkboxes[focusedIndex].checked;

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (2)

src/vs/workbench/contrib/chat/test/browser/widget/chatContentParts/chatQuestionCarouselPart.test.ts:140

• The updated UI adds row-level click handling and keyboard navigation for list-style selection, but the test suite only asserts initial DOM structure/classes. Adding interaction tests (clicking on the list item outside the checkbox, arrow navigation + Space/Enter behavior) would help prevent regressions and would have caught state-sync issues.

		test('renders list items with checkboxes for multiSelect type questions', () => {
			const carousel = createMockCarousel([
				{
					id: 'q1',
					type: 'multiSelect',
					title: 'Choose multiple',
					options: [
						{ id: 'a', label: 'Option A', value: 'a' },
						{ id: 'b', label: 'Option B', value: 'b' },
						{ id: 'c', label: 'Option C', value: 'c' }
					]
				}
			]);
			createWidget(carousel);

			const listItems = widget.domNode.querySelectorAll('.chat-question-list-item.multi-select');
			assert.strictEqual(listItems.length, 3, 'Should have 3 list items for multiSelect');
			const checkboxes = widget.domNode.querySelectorAll('.chat-question-list-checkbox');
			assert.strictEqual(checkboxes.length, 3, 'Should have 3 checkboxes');
		});

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatQuestionCarouselPart.ts:683

• The keyboard handler toggles checkboxes[focusedIndex].checked via the setter, which won’t fire onChange either, so visual state/ARIA can get out of sync when using Space. Consider toggling through the Checkbox’s UI event path (e.g. click its domNode) or manually mirroring the state update here as well.

			freeformTextarea.placeholder = localize('chat.questionCarousel.enterCustomAnswer', 'Enter custom answer');
			freeformTextarea.rows = 1;
			freeformTextarea.setAttribute('aria-labelledby', freeformLabelId);

			if (previousFreeform !== undefined) {
				freeformTextarea.value = previousFreeform;
			}

[eli-w-king]

Latest UI:

Screen.Recording.2026-01-29.at.4.10.11.PM.mov

[eli-w-king]

Screen.Recording.2026-01-30.at.1.39.07.PM.mov

Updated UI

[justschen]

thanks, no blocking changes but maybe just a little cleanup during debt + as we move the tool into core

also this selection looks really really similar to the action list - curious if we tried using that before making a standalone custom list haha

[justschen]

there are some changes from Lee that got merged as a candidate regarding the secondaryBackground not working as intended - just an extra UI nit to keep an eye out for when testing.

[justschen]

also nit or maybe cleanup - i'm not a super big fan of doing !important, and ik with the monaco buttons it's kinda annoying, but with enough specficity (ie, wrapping in .interactive-session .interactive-response etc, we can maybe avoid.

not blocking tho.

[justschen]

nit: maybe can look into using toggle for things like this

also not blocking