Fix ModelView tree A11y issue (#7835)

* Fix tree A11y issue

* Toggle expanded state on enter

* Move onkeydown method to base class
This commit is contained in:
Charles Gagnon
2019-10-20 21:42:55 -07:00
committed by GitHub
parent e3ae5263c6
commit 0246c3f895
3 changed files with 18 additions and 6 deletions

View File

@@ -17,6 +17,8 @@ import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
import { ModelComponentWrapper } from 'sql/workbench/browser/modelComponents/modelComponentWrapper.component';
import { URI } from 'vs/base/common/uri';
import * as nls from 'vs/nls';
import { EventType, addDisposableListener } from 'vs/base/browser/dom';
import { IKeyboardEvent, StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
export type IUserFriendlyIcon = string | URI | { light: string | URI; dark: string | URI };
@@ -249,6 +251,10 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
return isValid;
});
}
protected onkeydown(domNode: HTMLElement, listener: (e: IKeyboardEvent) => void): void {
this._register(addDisposableListener(domNode, EventType.KEY_DOWN, (e: KeyboardEvent) => listener(new StandardKeyboardEvent(e))));
}
}
export abstract class ContainerBase<T> extends ComponentBase {

View File

@@ -20,8 +20,7 @@ import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/work
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import * as nls from 'vs/nls';
import { inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry';
import * as DomUtils from 'vs/base/browser/dom';
import { StandardKeyboardEvent, IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
@Component({
@@ -109,10 +108,6 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
this.inputElement.hideErrors = true;
}
private onkeydown(domNode: HTMLElement, listener: (e: IKeyboardEvent) => void): void {
this._register(DomUtils.addDisposableListener(domNode, DomUtils.EventType.KEY_DOWN, (e: KeyboardEvent) => listener(new StandardKeyboardEvent(e))));
}
private tryHandleKeyEvent(e: StandardKeyboardEvent): boolean {
let handled: boolean = false;

View File

@@ -25,6 +25,8 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import { ITreeComponentItem } from 'sql/workbench/common/views';
import { TreeViewDataProvider } from 'sql/workbench/browser/modelComponents/treeViewDataProvider';
import { getContentHeight, getContentWidth } from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
class Root implements ITreeComponentItem {
label = {
@@ -119,6 +121,15 @@ export default class TreeComponent extends ComponentBase implements IComponent,
this._register(this._tree.onDidChangeSelection(e => {
this._dataProvider.onNodeSelected(e.selection);
}));
this.onkeydown(this._inputContainer.nativeElement, (e: StandardKeyboardEvent) => {
// Enter on a tree will select the currently selected item as the default behavior
// but if not stopped here then will propagate up.
// This might have unintended effects such as a dialog closing.
if (e.keyCode === KeyCode.Enter) {
this._tree.toggleExpansion(this._tree.getFocus());
e.stopPropagation();
}
});
this._tree.refresh();
this.layout();
}