From 734c30e521bc929fb3976d2c29c19a6ba32deb98 Mon Sep 17 00:00:00 2001
From: Raymond Zhao <7199958+rzhao271@users.noreply.github.com>
Date: Wed, 17 Jul 2024 16:24:30 -0700
Subject: [PATCH] fix: incorrect roles defined for settings switcher (#221999)

Ref #214227
---
 .../base/browser/ui/actionbar/actionViewItems.ts  | 15 +++++++++++----
 src/vs/base/browser/ui/actionbar/actionbar.ts     |  2 +-
 .../preferences/browser/preferencesWidgets.ts     |  1 +
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/vs/base/browser/ui/actionbar/actionViewItems.ts b/src/vs/base/browser/ui/actionbar/actionViewItems.ts
index 412cf47cfc7..968352cfeaf 100644
--- a/src/vs/base/browser/ui/actionbar/actionViewItems.ts
+++ b/src/vs/base/browser/ui/actionbar/actionViewItems.ts
@@ -25,6 +25,7 @@ import { getBaseLayerHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegat
 export interface IBaseActionViewItemOptions {
 	draggable?: boolean;
 	isMenu?: boolean;
+	isTabList?: boolean;
 	useEventAsContext?: boolean;
 	hoverDelegate?: IHoverDelegate;
 }
@@ -313,12 +314,14 @@ export class ActionViewItem extends BaseActionViewItem {
 		this.updateChecked();
 	}
 
-	private getDefaultAriaRole(): 'presentation' | 'menuitem' | 'button' {
+	private getDefaultAriaRole(): 'presentation' | 'menuitem' | 'tab' | 'button' {
 		if (this._action.id === Separator.ID) {
 			return 'presentation'; // A separator is a presentation item
 		} else {
 			if (this.options.isMenu) {
 				return 'menuitem';
+			} else if (this.options.isTabList) {
+				return 'tab';
 			} else {
 				return 'button';
 			}
@@ -421,11 +424,15 @@ export class ActionViewItem extends BaseActionViewItem {
 		if (this.label) {
 			if (this.action.checked !== undefined) {
 				this.label.classList.toggle('checked', this.action.checked);
-				this.label.setAttribute('aria-checked', this.action.checked ? 'true' : 'false');
-				this.label.setAttribute('role', 'checkbox');
+				if (this.options.isTabList) {
+					this.label.setAttribute('aria-selected', this.action.checked ? 'true' : 'false');
+				} else {
+					this.label.setAttribute('aria-checked', this.action.checked ? 'true' : 'false');
+					this.label.setAttribute('role', 'checkbox');
+				}
 			} else {
 				this.label.classList.remove('checked');
-				this.label.removeAttribute('aria-checked');
+				this.label.removeAttribute(this.options.isTabList ? 'aria-selected' : 'aria-checked');
 				this.label.setAttribute('role', this.getDefaultAriaRole());
 			}
 		}
diff --git a/src/vs/base/browser/ui/actionbar/actionbar.ts b/src/vs/base/browser/ui/actionbar/actionbar.ts
index 06995b2e827..c902616601e 100644
--- a/src/vs/base/browser/ui/actionbar/actionbar.ts
+++ b/src/vs/base/browser/ui/actionbar/actionbar.ts
@@ -357,7 +357,7 @@ export class ActionBar extends Disposable implements IActionRunner {
 
 			let item: IActionViewItem | undefined;
 
-			const viewItemOptions = { hoverDelegate: this._hoverDelegate, ...options };
+			const viewItemOptions: IActionViewItemOptions = { hoverDelegate: this._hoverDelegate, ...options, isTabList: this.options.ariaRole === 'tablist' };
 			if (this.options.actionViewItemProvider) {
 				item = this.options.actionViewItemProvider(action, viewItemOptions);
 			}
diff --git a/src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts b/src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts
index 4e68e88dc97..0e9c2437930 100644
--- a/src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts
+++ b/src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts
@@ -261,6 +261,7 @@ export class SettingsTargetsWidget extends Widget {
 			orientation: ActionsOrientation.HORIZONTAL,
 			focusOnlyEnabledItems: true,
 			ariaLabel: localize('settingsSwitcherBarAriaLabel', "Settings Switcher"),
+			ariaRole: 'tablist',
 			actionViewItemProvider: (action: IAction, options: IActionViewItemOptions) => action.id === 'folderSettings' ? this.folderSettings : undefined
 		}));