support aria-expand for actions (#11869)

* support aria-expand for actions

* update text
This commit is contained in:
Alan Ren
2020-08-19 14:18:52 -07:00
committed by GitHub
parent 3c538d1c2d
commit a3ae2df0ce
5 changed files with 52 additions and 3 deletions

View File

@@ -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 EXPAND_LABEL = nls.localize('expandWidget', "Expand");
private static readonly COLLPASE_LABEL = nls.localize('collapseWidget', "Collapse Widget");
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) {

View File

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

View File

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

View File

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

View File

@@ -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,