fix: customization section keyboard toggling (#296942)

src/vs/workbench/contrib/chat/browser/aiCustomization/customizationCardList.ts

@@ -42,7 +42,7 @@ export function setupCollapsibleSection(
 	initiallyCollapsed: boolean,
 	onDidChange: (collapsed: boolean) => void,
 ): HTMLButtonElement {
-	const toggle = $('.customization-section-toggle') as HTMLButtonElement;
+	const toggle = $<HTMLButtonElement>('button.customization-section-toggle');
 	toggle.type = 'button';
 	headingRow.prepend(toggle);
 	content.id ||= `customization-section-content-${++collapsibleSectionIdPool}`;
@@ -68,6 +68,14 @@ export function setupCollapsibleSection(
 		update();
 		onDidChange(collapsed);
 	}));
+	disposables.add(DOM.addDisposableListener(toggle, DOM.EventType.KEY_DOWN, event => {
+		if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+			DOM.EventHelper.stop(event, true);
+			if (collapsed !== (event.key === 'ArrowLeft')) {
+				toggle.click();
+			}
+		}
+	}));
 	return toggle;
 }
 

src/vs/workbench/contrib/chat/test/browser/aiCustomization/aiCustomizationListWidget.test.ts

@@ -141,6 +141,34 @@ suite('aiCustomizationListWidget', () => {
 		}
 	});
 
+	test('collapsible sections support keyboard focus and directional expansion', () => {
+		const disposables = new DisposableStore();
+		const heading = document.createElement('div');
+		const content = document.createElement('div');
+		const changes: boolean[] = [];
+		const toggle = setupCollapsibleSection(heading, content, 'Workspace', disposables, false, collapsed => changes.push(collapsed));
+		document.body.appendChild(heading);
+
+		try {
+			toggle.focus();
+			const focused = document.activeElement === toggle;
+			const states = [];
+			for (const key of ['ArrowLeft', 'ArrowLeft', 'ArrowRight', 'ArrowRight']) {
+				toggle.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+				states.push(content.hidden);
+			}
+			assert.deepStrictEqual({ tag: toggle.tagName, focused, states, changes }, {
+				tag: 'BUTTON',
+				focused: true,
+				states: [true, true, false, false],
+				changes: [true, false],
+			});
+		} finally {
+			heading.remove();
+			disposables.dispose();
+		}
+	});
+
 	test('collapsible sections create disclosures outside auxiliary document realms', () => {
 		const disposables = new DisposableStore();
 		const auxiliaryDocument = document.implementation.createHTMLDocument();