fix: incorrect roles defined for settings switcher (#221999)

Ref #214227
This commit is contained in:
Raymond Zhao
2024-07-17 16:24:30 -07:00
committed by GitHub
parent 6eb023ca6f
commit 734c30e521
3 changed files with 13 additions and 5 deletions
@@ -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());
}
}
@@ -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);
}
@@ -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
}));