support aria-expand for actions (#11869)

* support aria-expand for actions

* update text

src/sql/workbench/contrib/dashboard/browser/core/actions.ts

@@ -218,8 +218,8 @@ export class AddFeatureTabAction extends Action {
 
 export class CollapseWidgetAction extends Action {
 	private static readonly ID = 'collapseWidget';
-	private static readonly COLLPASE_LABEL = nls.localize('collapseWidget', "Collapse");
+	private static readonly COLLPASE_LABEL = nls.localize('collapseWidget', "Collapse Widget");
-	private static readonly EXPAND_LABEL = nls.localize('expandWidget', "Expand");
+	private static readonly EXPAND_LABEL = nls.localize('expandWidget', "Expand Widget");
 	private static readonly COLLAPSE_ICON = 'codicon-chevron-up';
 	private static readonly EXPAND_ICON = 'codicon-chevron-down';
 
@@ -234,6 +234,7 @@ export class CollapseWidgetAction extends Action {
 			collpasedState ? CollapseWidgetAction.EXPAND_LABEL : CollapseWidgetAction.COLLPASE_LABEL,
 			collpasedState ? CollapseWidgetAction.EXPAND_ICON : CollapseWidgetAction.COLLAPSE_ICON
 		);
+		this.expanded = !this.collpasedState;
 	}
 
 	run(): Promise<boolean> {
@@ -251,8 +252,9 @@ export class CollapseWidgetAction extends Action {
 			return;
 		}
 		this.collpasedState = collapsed;
-		this._setClass(this.collpasedState ? CollapseWidgetAction.EXPAND_ICON : CollapseWidgetAction.COLLAPSE_ICON);
+		this.class = this.collpasedState ? CollapseWidgetAction.EXPAND_ICON : CollapseWidgetAction.COLLAPSE_ICON;
 		this.label = this.collpasedState ? CollapseWidgetAction.EXPAND_LABEL : CollapseWidgetAction.COLLPASE_LABEL;
+		this.expanded = !this.collpasedState;
 	}
 
 	public set state(collapsed: boolean) {

src/sql/workbench/contrib/notebook/browser/notebookActions.ts

@@ -252,6 +252,7 @@ export class CollapseCellsAction extends ToggleableAction {
 			shouldToggleTooltip: toggleTooltip,
 			isOn: false
 		});
+		this.expanded = true;
 	}
 
 	public get isCollapsed(): boolean {
@@ -259,6 +260,7 @@ export class CollapseCellsAction extends ToggleableAction {
 	}
 	private setCollapsed(value: boolean) {
 		this.toggle(value);
+		this.expanded = !value;
 	}
 
 	public async run(context: URI): Promise<boolean> {

src/vs/base/browser/ui/actionbar/actionViewItems.ts

@@ -71,6 +71,11 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
 		if (event.tooltip !== undefined) {
 			this.updateTooltip();
 		}
+
+		// {{SQL CARBON EDIT}}
+		if (event.expanded !== undefined) {
+			this.updateExpanded();
+		}
 	}
 
 	get actionRunner(): IActionRunner {
@@ -197,6 +202,11 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
 		// implement in subclass
 	}
 
+	// {{SQL CARBON EDIT}}
+	protected updateExpanded(): void {
+		// implement in subclass
+	}
+
 	dispose(): void {
 		if (this.element) {
 			DOM.removeNode(this.element);
@@ -348,6 +358,17 @@ export class ActionViewItem extends BaseActionViewItem {
 			}
 		}
 	}
+
+	// {{SQL CARBON EDIT}}
+	updateExpanded(): void {
+		if (this.label) {
+			if (this.getAction().expanded !== undefined) {
+				this.label.setAttribute('aria-expanded', `${this.getAction().expanded}`);
+			} else {
+				this.label.removeAttribute('aria-expanded');
+			}
+		}
+	}
 }
 
 export class SelectActionViewItem extends BaseActionViewItem {

src/vs/base/common/actions.ts

@@ -29,6 +29,7 @@ export interface IAction extends IDisposable {
 	class: string | undefined;
 	enabled: boolean;
 	checked: boolean;
+	expanded: boolean | undefined; // {{SQL CARBON EDIT}}
 	run(event?: any): Promise<any>;
 }
 
@@ -57,6 +58,7 @@ export interface IActionChangeEvent {
 	readonly class?: string;
 	readonly enabled?: boolean;
 	readonly checked?: boolean;
+	readonly expanded?: boolean; // {{SQL CARBON EDIT}}
 }
 
 export class Action extends Disposable implements IAction {
@@ -70,6 +72,7 @@ export class Action extends Disposable implements IAction {
 	protected _cssClass: string | undefined;
 	protected _enabled: boolean = true;
 	protected _checked: boolean = false;
+	protected _expanded: boolean = false; // {{SQL CARBON EDIT}}
 	protected readonly _actionCallback?: (event?: any) => Promise<any>;
 
 	constructor(id: string, label: string = '', cssClass: string = '', enabled: boolean = true, actionCallback?: (event?: any) => Promise<any>) {
@@ -160,6 +163,22 @@ export class Action extends Disposable implements IAction {
 		}
 	}
 
+	// {{SQL CARBON EDIT}}
+	get expanded(): boolean {
+		return this._expanded;
+	}
+
+	set expanded(value: boolean) {
+		this._setExpanded(value);
+	}
+
+	protected _setExpanded(value: boolean): void {
+		if (this._expanded !== value) {
+			this._expanded = value;
+			this._onDidChange.fire({ expanded: value });
+		}
+	}
+
 	run(event?: any, _data?: ITelemetryData): Promise<any> {
 		if (this._actionCallback) {
 			return this._actionCallback(event);

src/vs/workbench/contrib/markers/browser/markersViewActions.ts

@@ -199,6 +199,7 @@ class FiltersDropdownMenuActionViewItem extends DropdownMenuActionViewItem {
 				checked: this.filters.showErrors,
 				class: undefined,
 				enabled: true,
+				expanded: undefined, // {{SQL CARBON EDIT}}
 				id: 'showErrors',
 				label: Messages.MARKERS_PANEL_FILTER_LABEL_SHOW_ERRORS,
 				run: async () => this.filters.showErrors = !this.filters.showErrors,
@@ -209,6 +210,7 @@ class FiltersDropdownMenuActionViewItem extends DropdownMenuActionViewItem {
 				checked: this.filters.showWarnings,
 				class: undefined,
 				enabled: true,
+				expanded: undefined, // {{SQL CARBON EDIT}}
 				id: 'showWarnings',
 				label: Messages.MARKERS_PANEL_FILTER_LABEL_SHOW_WARNINGS,
 				run: async () => this.filters.showWarnings = !this.filters.showWarnings,
@@ -219,6 +221,7 @@ class FiltersDropdownMenuActionViewItem extends DropdownMenuActionViewItem {
 				checked: this.filters.showInfos,
 				class: undefined,
 				enabled: true,
+				expanded: undefined, // {{SQL CARBON EDIT}}
 				id: 'showInfos',
 				label: Messages.MARKERS_PANEL_FILTER_LABEL_SHOW_INFOS,
 				run: async () => this.filters.showInfos = !this.filters.showInfos,
@@ -231,6 +234,7 @@ class FiltersDropdownMenuActionViewItem extends DropdownMenuActionViewItem {
 				class: undefined,
 				enabled: true,
 				id: 'activeFile',
+				expanded: undefined, // {{SQL CARBON EDIT}}
 				label: Messages.MARKERS_PANEL_FILTER_LABEL_ACTIVE_FILE,
 				run: async () => this.filters.activeFile = !this.filters.activeFile,
 				tooltip: '',
@@ -240,6 +244,7 @@ class FiltersDropdownMenuActionViewItem extends DropdownMenuActionViewItem {
 				checked: this.filters.excludedFiles,
 				class: undefined,
 				enabled: true,
+				expanded: undefined, // {{SQL CARBON EDIT}}
 				id: 'useFilesExclude',
 				label: Messages.MARKERS_PANEL_FILTER_LABEL_EXCLUDED_FILES,
 				run: async () => this.filters.excludedFiles = !this.filters.excludedFiles,