mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-16 09:35:36 -05:00
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:
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user