diff --git a/src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts b/src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts index 4d91fd39cb5f0e8f082ea588d8df3ca2633014c1..d8ba6e9bef114cc200401bdc8ec75859bacb6c5e 100644 --- a/src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts +++ b/src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts @@ -74,6 +74,8 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor private searchFocusContextKey: IContextKey; private sortByPrecedence: Checkbox; + private ariaLabelElement: HTMLElement; + constructor( @ITelemetryService telemetryService: ITelemetryService, @IThemeService themeService: IThemeService, @@ -100,6 +102,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor createEditor(parent: HTMLElement): void { const keybindingsEditorElement = DOM.append(parent, $('div', { class: 'keybindings-editor' })); + this.createAriaLabelElement(keybindingsEditorElement); this.createOverlayContainer(keybindingsEditorElement); this.createHeader(keybindingsEditorElement); this.createBody(keybindingsEditorElement); @@ -268,6 +271,12 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor return TPromise.as(null); } + private createAriaLabelElement(parent: HTMLElement): void { + this.ariaLabelElement = DOM.append(parent, DOM.$('')); + this.ariaLabelElement.setAttribute('id', 'keybindings-editor-aria-label-element'); + this.ariaLabelElement.setAttribute('aria-live', 'assertive'); + } + private createOverlayContainer(parent: HTMLElement): void { this.overlayContainer = DOM.append(parent, $('.overlay-container')); this.overlayContainer.style.position = 'absolute'; @@ -293,7 +302,8 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor this.searchWidget = this._register(this.instantiationService.createInstance(SearchWidget, searchContainer, { ariaLabel: localize('SearchKeybindings.AriaLabel', "Search keybindings"), placeholder: localize('SearchKeybindings.Placeholder', "Search keybindings"), - focusKey: this.searchFocusContextKey + focusKey: this.searchFocusContextKey, + ariaLabelledBy: 'keybindings-editor-aria-label-element' })); this._register(this.searchWidget.onDidChange(searchValue => this.delayedFiltering.trigger(() => this.filterKeybindings()))); @@ -302,8 +312,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor isChecked: false, title: localize('sortByPrecedene', "Sort by Precedence") })); - this._register( - this.sortByPrecedence.onChange(() => this.renderKeybindingsEntries(false))); + this._register(this.sortByPrecedence.onChange(() => this.renderKeybindingsEntries(false))); searchContainer.appendChild(this.sortByPrecedence.domNode); this.createOpenKeybindingsElement(this.headerContainer); @@ -397,6 +406,9 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor if (this.keybindingsEditorModel) { const filter = this.searchWidget.getValue(); const keybindingsEntries: IKeybindingItemEntry[] = this.keybindingsEditorModel.fetch(filter, this.sortByPrecedence.checked); + + this.ariaLabelElement.setAttribute('aria-label', this.getAriaLabel()); + if (keybindingsEntries.length === 0) { this.latestEmptyFilters.push(filter); } @@ -425,6 +437,14 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor } } + private getAriaLabel(): string { + if (this.sortByPrecedence.checked) { + return localize('show sorted keybindings', "Showing Keybindings in precendence order"); + } else { + return localize('show keybindings', "Showing Keybindings in alphabetical order"); + } + } + private layoutKebindingsList(): void { const listHeight = this.dimension.height - (DOM.getDomNodePagePosition(this.headerContainer).height + 12 /*padding*/); this.keybindingsListContainer.style.height = `${listHeight}px`; diff --git a/src/vs/workbench/parts/preferences/browser/preferencesEditor.ts b/src/vs/workbench/parts/preferences/browser/preferencesEditor.ts index 0211aa5d8973a63441c02f795a560e0a0e32d880..1875e5070fccb5e46ace9e3751d22e7593e6c712 100644 --- a/src/vs/workbench/parts/preferences/browser/preferencesEditor.ts +++ b/src/vs/workbench/parts/preferences/browser/preferencesEditor.ts @@ -126,7 +126,8 @@ export class PreferencesEditor extends BaseEditor { ariaLabel: nls.localize('SearchSettingsWidget.AriaLabel', "Search settings"), placeholder: nls.localize('SearchSettingsWidget.Placeholder', "Search Settings"), focusKey: this.searchFocusContextKey, - showResultCount: true + showResultCount: true, + ariaLive: 'assertive' })); this._register(this.searchWidget.onDidChange(value => this.onInputChanged())); this._register(this.searchWidget.onFocus(() => this.lastFocusedWidget = this.searchWidget)); diff --git a/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts b/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts index 723af7ffdc08402198f7c0c3329c92dbcdc6775e..3c57b2f5fcb5e8804624ad4fbabae131995b49a2 100644 --- a/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts +++ b/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts @@ -561,6 +561,8 @@ export class SettingsTargetsWidget extends Widget { export interface SearchOptions extends IInputOptions { focusKey?: IContextKey; showResultCount?: boolean; + ariaLive?: string; + ariaLabelledBy?: string; } export class SearchWidget extends Widget { @@ -608,7 +610,10 @@ export class SearchWidget extends Widget { })); } - this.inputBox.inputElement.setAttribute('aria-live', 'assertive'); + this.inputBox.inputElement.setAttribute('aria-live', this.options.ariaLive || 'off'); + if (this.options.ariaLabelledBy) { + this.inputBox.inputElement.setAttribute('aria-labelledBy', this.options.ariaLabelledBy); + } const focusTracker = this._register(DOM.trackFocus(this.inputBox.inputElement)); this._register(focusTracker.onDidFocus(() => this._onFocus.fire())); diff --git a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts index 82caff36780f59da186d924583f5ac52e7a72be0..9e11c49536a0bb6cd692dd26e0dc6a0348a6d87a 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts @@ -189,7 +189,8 @@ export class SettingsEditor2 extends BaseEditor { this.searchWidget = this._register(this.instantiationService.createInstance(SearchWidget, searchContainer, { ariaLabel: localize('SearchSettings.AriaLabel', "Search settings"), placeholder: localize('SearchSettings.Placeholder', "Search settings"), - focusKey: this.searchFocusContextKey + focusKey: this.searchFocusContextKey, + ariaLive: 'assertive' })); this._register(this.searchWidget.onDidChange(() => this.onSearchInputChanged()));