chat todos - drop offscreen status element (microsoft#273578)

* chat todos - drop offscreen status element

* fix text

Author: bpasero

src/vs/workbench/contrib/chat/browser/chatContentParts/chatTodoListWidget.ts

@@ -32,7 +32,6 @@ interface ITodoListTemplate {
 	readonly todoElement: HTMLElement;
 	readonly statusIcon: HTMLElement;
 	readonly iconLabel: IconLabel;
-	readonly statusElement: HTMLElement;
 }
 
 class TodoListRenderer implements IListRenderer<IChatTodo, ITodoListTemplate> {
@@ -53,18 +52,12 @@ class TodoListRenderer implements IListRenderer<IChatTodo, ITodoListTemplate> {
 
 		const todoContent = dom.append(todoElement, dom.$('.todo-content'));
 		const iconLabel = templateDisposables.add(new IconLabel(todoContent, { supportIcons: false }));
-		const statusElement = dom.append(todoContent, dom.$('.todo-status-text'));
-		statusElement.style.position = 'absolute';
-		statusElement.style.left = '-10000px';
-		statusElement.style.width = '1px';
-		statusElement.style.height = '1px';
-		statusElement.style.overflow = 'hidden';
-
-		return { templateDisposables, todoElement, statusIcon, iconLabel, statusElement };
+
+		return { templateDisposables, todoElement, statusIcon, iconLabel };
 	}
 
 	renderElement(todo: IChatTodo, index: number, templateData: ITodoListTemplate): void {
-		const { todoElement, statusIcon, iconLabel, statusElement } = templateData;
+		const { todoElement, statusIcon, iconLabel } = templateData;
 
 		// Update status icon
 		statusIcon.className = `todo-status-icon codicon ${this.getStatusIconClass(todo.status)}`;
@@ -75,17 +68,12 @@ class TodoListRenderer implements IListRenderer<IChatTodo, ITodoListTemplate> {
 		const title = includeDescription && todo.description && todo.description.trim() ? todo.description : undefined;
 		iconLabel.setLabel(todo.title, undefined, { title });
 
-		// Update hidden status text for screen readers
-		const statusText = this.getStatusText(todo.status);
-		statusElement.id = `todo-status-${index}`;
-		statusElement.textContent = statusText;
-
 		// Update aria-label
+		const statusText = this.getStatusText(todo.status);
 		const ariaLabel = includeDescription && todo.description && todo.description.trim()
 			? localize('chat.todoList.itemWithDescription', '{0}, {1}, {2}', todo.title, statusText, todo.description)
 			: localize('chat.todoList.item', '{0}, {1}', todo.title, statusText);
 		todoElement.setAttribute('aria-label', ariaLabel);
-		todoElement.setAttribute('aria-describedby', `todo-status-${index}`);
 	}
 
 	disposeTemplate(templateData: ITodoListTemplate): void {

src/vs/workbench/contrib/chat/test/browser/chatTodoListWidget.test.ts

@@ -122,22 +122,32 @@ suite('ChatTodoListWidget Accessibility', () => {
 		// Progress is 2/3 because: 1 completed + 1 in-progress (current) = task 2 of 3
 		assert.ok(titleText?.includes('(2/3)'), `Title should show progress format, but got: "${titleText}"`);
 		assert.ok(titleText?.includes('Second task'), `Title should show current task when collapsed, but got: "${titleText}"`);
-	}); test('hidden status text elements exist for screen readers', () => {
+	});
+
+	test('todo items have complete aria-label with status information', () => {
 		widget.render('test-session');
 
-		const statusElements = widget.domNode.querySelectorAll('.todo-status-text');
-		assert.strictEqual(statusElements.length, 3, 'Should have 3 status text elements');
-
-		statusElements.forEach((element, index) => {
-			assert.strictEqual(element.id, `todo-status-${index}`, 'Should have proper ID');
-			// Check that it's visually hidden but accessible to screen readers
-			const style = (element as HTMLElement).style;
-			assert.strictEqual(style.position, 'absolute');
-			assert.strictEqual(style.left, '-10000px');
-			assert.strictEqual(style.width, '1px');
-			assert.strictEqual(style.height, '1px');
-			assert.strictEqual(style.overflow, 'hidden');
-		});
+		const todoItems = widget.domNode.querySelectorAll('.todo-item');
+		assert.strictEqual(todoItems.length, 3, 'Should have 3 todo items');
+
+		// Check first item (not-started) - aria-label should include title and status
+		const firstItem = todoItems[0] as HTMLElement;
+		const firstAriaLabel = firstItem.getAttribute('aria-label');
+		assert.ok(firstAriaLabel?.includes('First task'), 'First item aria-label should include title');
+		assert.ok(firstAriaLabel?.includes('not started'), 'First item aria-label should include status');
+
+		// Check second item (in-progress with description) - aria-label should include title, status, and description
+		const secondItem = todoItems[1] as HTMLElement;
+		const secondAriaLabel = secondItem.getAttribute('aria-label');
+		assert.ok(secondAriaLabel?.includes('Second task'), 'Second item aria-label should include title');
+		assert.ok(secondAriaLabel?.includes('in progress'), 'Second item aria-label should include status');
+		assert.ok(secondAriaLabel?.includes('This is a task description'), 'Second item aria-label should include description');
+
+		// Check third item (completed) - aria-label should include title and status
+		const thirdItem = todoItems[2] as HTMLElement;
+		const thirdAriaLabel = thirdItem.getAttribute('aria-label');
+		assert.ok(thirdAriaLabel?.includes('Third task'), 'Third item aria-label should include title');
+		assert.ok(thirdAriaLabel?.includes('completed'), 'Third item aria-label should include status');
 	});
 
 	test('widget displays properly when no todos exist', () => {