From e2c78d20cb8a35df9dcc6a154fb3ce3ba63b2e7e Mon Sep 17 00:00:00 2001 From: Lee Murray Date: Fri, 27 Mar 2026 13:40:14 +0000 Subject: [PATCH] Improve accessibility labels and CSS styling for agent session sections (#305604) * Improve accessibility labels for agent session sections and enhance CSS styling for section labels * Enhance accessibility tests for agent session sections by updating aria label checks for singular and plural session counts Co-authored-by: Copilot --------- Co-authored-by: mrleemurray Co-authored-by: Copilot --- .../agentSessions/agentSessionsViewer.ts | 6 +++++- .../media/agentsessionsviewer.css | 7 +++++-- ...agentSessionsAccessibilityProvider.test.ts | 19 +++++++++++++++---- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts b/src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts index aaddd2664aa..23c17523e45 100644 --- a/src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts +++ b/src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts @@ -900,7 +900,11 @@ export class AgentSessionsAccessibilityProvider implements IListAccessibilityPro getAriaLabel(element: AgentSessionListItem): string | null { if (isAgentSessionSection(element)) { - return localize('agentSessionSectionAriaLabel', "{0} sessions section, {1} sessions", element.label, element.sessions.length); + const count = element.sessions.length; + if (count === 1) { + return localize('agentSessionSectionAriaLabel.singular', "{0} sessions section, {1} session", element.label, count); + } + return localize('agentSessionSectionAriaLabel.plural', "{0} sessions section, {1} sessions", element.label, count); } if (isAgentSessionShowMore(element)) { diff --git a/src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css b/src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css index 4243cea6160..d6c239d7858 100644 --- a/src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css +++ b/src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css @@ -374,6 +374,10 @@ .agent-session-section-label { flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .agent-session-section-count { @@ -395,8 +399,7 @@ } } - .monaco-list-row:hover .agent-session-section .agent-session-section-count, - .monaco-list-row.focused:not(.selected) .agent-session-section .agent-session-section-count { + .monaco-list-row:hover .agent-session-section .agent-session-section-count { display: none; } diff --git a/src/vs/workbench/contrib/chat/test/browser/agentSessions/agentSessionsAccessibilityProvider.test.ts b/src/vs/workbench/contrib/chat/test/browser/agentSessions/agentSessionsAccessibilityProvider.test.ts index cbf18d99540..6c11ed0fb4f 100644 --- a/src/vs/workbench/contrib/chat/test/browser/agentSessions/agentSessionsAccessibilityProvider.test.ts +++ b/src/vs/workbench/contrib/chat/test/browser/agentSessions/agentSessionsAccessibilityProvider.test.ts @@ -47,11 +47,11 @@ suite('AgentSessionsAccessibilityProvider', () => { }; } - function createMockSection(section: AgentSessionSection = AgentSessionSection.Today): IAgentSessionSection { + function createMockSection(section: AgentSessionSection = AgentSessionSection.Today, sessions: IAgentSession[] = []): IAgentSessionSection { return { section, label: 'Today', - sessions: [] + sessions }; } @@ -91,11 +91,22 @@ suite('AgentSessionsAccessibilityProvider', () => { assert.ok(ariaLabel.includes('Agent'), 'Aria label should include the provider label'); }); - test('getAriaLabel returns correct label for section', () => { - const section = createMockSection(); + test('getAriaLabel returns singular label for section with 1 session', () => { + const section = createMockSection(AgentSessionSection.Today, [createMockSession({ id: 'a' })]); const ariaLabel = accessibilityProvider.getAriaLabel(section); assert.ok(ariaLabel); assert.ok(ariaLabel.includes('sessions section'), 'Aria label should indicate it is a section'); + assert.ok(ariaLabel.includes('1 session'), 'Aria label should include session count'); + assert.ok(!ariaLabel.includes('1 sessions'), 'Aria label should use singular form'); + }); + + test('getAriaLabel returns plural label for section with multiple sessions', () => { + const section = createMockSection(AgentSessionSection.Today, [createMockSession({ id: 'a' }), createMockSession({ id: 'b' })]); + const ariaLabel = accessibilityProvider.getAriaLabel(section); + + assert.ok(ariaLabel); + assert.ok(ariaLabel.includes('sessions section'), 'Aria label should indicate it is a section'); + assert.ok(ariaLabel.includes('2 sessions'), 'Aria label should include session count with plural form'); }); });