Improve quick open accessibility (fixes #2393)
This commit is contained in:
parent
ab5dce2444
commit
bb94a5b5b2
1 changed files with 22 additions and 44 deletions
|
@ -80,6 +80,8 @@ export class QuickOpenWidget implements IModelProvider {
|
|||
private currentInputToken: string;
|
||||
private quickNavigateConfiguration: IQuickNavigateConfiguration;
|
||||
private container: HTMLElement;
|
||||
private treeElement: HTMLElement;
|
||||
private inputElement: HTMLElement;
|
||||
private usageLogger: IQuickOpenUsageLogger;
|
||||
private layoutDimensions: Dimension;
|
||||
private model: IModel<any>;
|
||||
|
@ -126,8 +128,15 @@ export class QuickOpenWidget implements IModelProvider {
|
|||
this.inputContainer = inputContainer;
|
||||
this.inputBox = new InputBox(inputContainer.getHTMLElement(), null, {
|
||||
placeholder: this.options.inputPlaceHolder || '',
|
||||
ariaLabel: nls.localize('quickOpenAriaLabel', "Type to narrow down results, then press Tab to jump into the result list and make a pick.")
|
||||
ariaLabel: nls.localize('quickOpenAriaLabel', "Quick picker. Type to narrow down results.")
|
||||
});
|
||||
|
||||
// ARIA
|
||||
this.inputElement = this.inputBox.inputElement;
|
||||
this.inputElement.setAttribute('role', 'combobox');
|
||||
this.inputElement.setAttribute('aria-haspopup', 'false');
|
||||
this.inputElement.setAttribute('aria-autocomplete', 'list');
|
||||
|
||||
DOM.addDisposableListener(this.inputBox.inputElement, DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
|
||||
let keyboardEvent: StandardKeyboardEvent = new StandardKeyboardEvent(e);
|
||||
|
||||
|
@ -182,6 +191,8 @@ export class QuickOpenWidget implements IModelProvider {
|
|||
ariaLabel: nls.localize('treeAriaLabel', "Quick Picker")
|
||||
});
|
||||
|
||||
this.treeElement = this.tree.getHTMLElement();
|
||||
|
||||
// Handle Focus and Selection event
|
||||
this.toUnbind.push(this.tree.addListener(EventType.FOCUS, (event: IFocusEvent) => {
|
||||
this.elementFocused(event.focus, event);
|
||||
|
@ -367,54 +378,14 @@ export class QuickOpenWidget implements IModelProvider {
|
|||
}
|
||||
}
|
||||
|
||||
/*private cycleThroughEntryGroups(entries:QuickOpenEntry[], focus:QuickOpenEntry, isShift:boolean):void {
|
||||
|
||||
// Return early if no entries present
|
||||
if (entries.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Focus next/previous group if possible
|
||||
let index = focus ? entries.indexOf(focus) : -1; // TODO@Ben should not make ordering assumptions
|
||||
if (index >= 0) {
|
||||
if (!isShift) {
|
||||
for (let i = index + 1; i < entries.length; i++) {
|
||||
let nextGroupEntry = entries[i];
|
||||
if (nextGroupEntry instanceof QuickOpenEntryGroup && (<QuickOpenEntryGroup>nextGroupEntry).getGroupLabel()) {
|
||||
this.tree.setFocus(nextGroupEntry);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let i = index - 1; i >= 0; i--) {
|
||||
if (entries[i] instanceof QuickOpenEntryGroup && (<QuickOpenEntryGroup>entries[i]).getGroupLabel()) {
|
||||
this.tree.setFocus(entries[i]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Focus first group unless shift is pressed
|
||||
if (!isShift) {
|
||||
this.tree.setFocus(entries[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
// Focus last group entry otherwise
|
||||
for (let i = entries.length - 1; i >= 0; i--) {
|
||||
if (entries[i] instanceof QuickOpenEntryGroup && (<QuickOpenEntryGroup>entries[i]).getGroupLabel()) {
|
||||
this.tree.setFocus(entries[i]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
private elementFocused(value: any, event?: any): void {
|
||||
if (!value || !this.isVisible()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// ARIA
|
||||
this.inputElement.setAttribute('aria-activedescendant', this.treeElement.getAttribute('aria-activedescendant'));
|
||||
|
||||
const context: IContext = { event: event, quickNavigateConfiguration: this.quickNavigateConfiguration };
|
||||
this.model.runner.run(value, Mode.PREVIEW, context);
|
||||
}
|
||||
|
@ -514,6 +485,10 @@ export class QuickOpenWidget implements IModelProvider {
|
|||
if (this.currentInputToken === currentInputToken) {
|
||||
this.tree.setInput(null).then(() => {
|
||||
this.model = input;
|
||||
|
||||
// ARIA
|
||||
this.inputElement.setAttribute('aria-haspopup', String(input && input.entries && input.entries.length > 0));
|
||||
|
||||
return this.tree.setInput(input);
|
||||
}).done(() => {
|
||||
// Indicate entries to tree
|
||||
|
@ -701,6 +676,9 @@ export class QuickOpenWidget implements IModelProvider {
|
|||
this.inputBox.value = '';
|
||||
this.tree.setInput(null);
|
||||
|
||||
// ARIA
|
||||
this.inputElement.setAttribute('aria-haspopup', 'false');
|
||||
|
||||
// Reset Tree Height
|
||||
this.treeContainer.style({ height: (this.options.minItemsToShow ? this.options.minItemsToShow * 22 : 0) + 'px' });
|
||||
|
||||
|
|
Loading…
Reference in a new issue