Merge pull request microsoft#189090 from microsoft/merogge/alert-focus-change

alert when focus changes for chat responses/ notifications in the accessible view

Author: meganrogge

src/vs/workbench/contrib/accessibility/browser/accessibility.contribution.ts

@@ -28,6 +28,7 @@ import { IListService, WorkbenchList } from 'vs/platform/list/browser/listServic
 import { NotificationFocusedContext } from 'vs/workbench/common/contextkeys';
 import { IAccessibleViewService, AccessibleViewService, IAccessibleContentProvider, IAccessibleViewOptions, AccessibleViewType, accessibleViewIsShown } from 'vs/workbench/contrib/accessibility/browser/accessibleView';
 import { IHoverService } from 'vs/workbench/services/hover/browser/hover';
+import { alert } from 'vs/base/browser/ui/aria/aria';
 
 registerAccessibilityConfiguration();
 registerSingleton(IAccessibleViewService, AccessibleViewService, InstantiationType.Delayed);
@@ -173,13 +174,16 @@ class NotificationAccessibleViewContribution extends Disposable {
 				}
 				commandService.executeCommand('notifications.showList');
 				let notificationIndex: number | undefined;
+				let length: number | undefined;
 				const list = listService.lastFocusedList;
 				if (list instanceof WorkbenchList) {
 					notificationIndex = list.indexOf(notification);
+					length = list.length;
 				}
 				if (notificationIndex === undefined) {
 					return false;
 				}
+
 				function focusList(): void {
 					commandService.executeCommand('notifications.showList');
 					if (list && notificationIndex !== undefined) {
@@ -206,6 +210,7 @@ class NotificationAccessibleViewContribution extends Disposable {
 						}
 						focusList();
 						list.focusNext();
+						alertFocusChange(notificationIndex, length, 'next');
 						renderAccessibleView();
 					},
 					previous(): void {
@@ -214,6 +219,7 @@ class NotificationAccessibleViewContribution extends Disposable {
 						}
 						focusList();
 						list.focusPrevious();
+						alertFocusChange(notificationIndex, length, 'previous');
 						renderAccessibleView();
 					},
 					verbositySettingKey: AccessibilityVerbositySettingId.Notification,
@@ -249,3 +255,17 @@ class AccessibleViewNavigatorContribution extends Disposable {
 }
 
 workbenchContributionsRegistry.registerWorkbenchContribution(AccessibleViewNavigatorContribution, LifecyclePhase.Eventually);
+
+export function alertFocusChange(index: number | undefined, length: number | undefined, type: 'next' | 'previous'): void {
+	if (index === undefined || length === undefined) {
+		return;
+	}
+	const number = index + 1;
+
+	if (type === 'next' && number + 1 <= length) {
+		alert(`Focused ${number + 1} of ${length}`);
+	} else if (type === 'previous' && number - 1 > 0) {
+		alert(`Focused ${number - 1} of ${length}`);
+	}
+	return;
+}

src/vs/workbench/contrib/accessibility/browser/accessibleView.ts

@@ -271,6 +271,7 @@ export class AccessibleViewService extends Disposable implements IAccessibleView
 			this._accessibleView = this._register(this._instantiationService.createInstance(AccessibleView));
 		}
 		this._accessibleView.show(provider);
+
 	}
 	next(): void {
 		this._accessibleView?.next();

src/vs/workbench/contrib/chat/browser/chat.contribution.ts

@@ -44,6 +44,7 @@ import { CONTEXT_IN_CHAT_SESSION } from 'vs/workbench/contrib/chat/common/chatCo
 import { ChatAccessibilityService } from 'vs/workbench/contrib/chat/browser/chatAccessibilityService';
 import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService';
 import { QuickQuestionMode } from 'vs/workbench/contrib/chat/browser/actions/quickQuestionActions/quickQuestionAction';
+import { alertFocusChange } from 'vs/workbench/contrib/accessibility/browser/accessibility.contribution';
 
 // Register configuration
 const configurationRegistry = Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration);
@@ -175,6 +176,9 @@ class ChatAccessibleViewContribution extends Disposable {
 				if (!responseContent) {
 					return false;
 				}
+				const responses = verifiedWidget.viewModel?.getItems().filter(i => isResponseVM(i));
+				const length = responses?.length;
+				const responseIndex = responses?.findIndex(i => i === focusedItem);
 
 				accessibleViewService.show({
 					verbositySettingKey: AccessibilityVerbositySettingId.Chat,
@@ -189,10 +193,12 @@ class ChatAccessibleViewContribution extends Disposable {
 					},
 					next() {
 						verifiedWidget.moveFocus(focusedItem, 'next');
+						alertFocusChange(responseIndex, length, 'next');
 						renderAccessibleView(accessibleViewService, widgetService, codeEditorService);
 					},
 					previous() {
 						verifiedWidget.moveFocus(focusedItem, 'previous');
+						alertFocusChange(responseIndex, length, 'previous');
 						renderAccessibleView(accessibleViewService, widgetService, codeEditorService);
 					},
 					options: { ariaLabel: nls.localize('chatAccessibleView', "Chat Accessible View"), type: AccessibleViewType.View }