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 <copilot@github.com>

---------

Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com>
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Lee Murray
2026-03-27 13:40:14 +00:00
committed by GitHub
parent 67bafb26c5
commit e2c78d20cb
3 changed files with 25 additions and 7 deletions

View File

@@ -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)) {

View File

@@ -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;
}

View File

@@ -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');
});
});