diff --git a/src/vs/base/browser/ui/findinput/findInput.ts b/src/vs/base/browser/ui/findinput/findInput.ts index ade652171dc..b811992fc7a 100644 --- a/src/vs/base/browser/ui/findinput/findInput.ts +++ b/src/vs/base/browser/ui/findinput/findInput.ts @@ -49,6 +49,8 @@ export class FindInput extends Widget { private validation:IInputValidator; private label:string; + private optionsKeyListener: () => void; + private regex:Checkbox; private wholeWords:Checkbox; private caseSensitive:Checkbox; @@ -247,10 +249,8 @@ export class FindInput extends Widget { // Arrow-Key support to navigate between options let indexes = [this.caseSensitive.domNode, this.wholeWords.domNode, this.regex.domNode]; - this.domNode.addEventListener(dom.EventType.KEY_DOWN, (e: KeyboardEvent) => { + this.optionsKeyListener = dom.addListener(this.domNode, dom.EventType.KEY_DOWN, (e: KeyboardEvent) => { let event = new StandardKeyboardEvent(e); - let eventHandled = false; - if (event.equals(CommonKeybindings.LEFT_ARROW) || event.equals(CommonKeybindings.RIGHT_ARROW) || event.equals(CommonKeybindings.ESCAPE)) { let index = indexes.indexOf(document.activeElement); if (index >= 0) { @@ -271,8 +271,7 @@ export class FindInput extends Widget { indexes[newIndex].focus(); } - event.preventDefault(); - event.stopPropagation(); + dom.EventHelper.stop(event, true); } } }); @@ -304,6 +303,15 @@ export class FindInput extends Widget { private clearValidation(): void { this.inputBox.hideMessage(); } + + public dispose(): void { + if (this.optionsKeyListener) { + this.optionsKeyListener(); + this.optionsKeyListener = null; + } + + super.dispose(); + } } interface IMatchCountOpts { diff --git a/src/vs/base/browser/ui/splitview/splitview.ts b/src/vs/base/browser/ui/splitview/splitview.ts index 608cc36f996..2c6df8f8a88 100644 --- a/src/vs/base/browser/ui/splitview/splitview.ts +++ b/src/vs/base/browser/ui/splitview/splitview.ts @@ -14,6 +14,8 @@ import objects = require('vs/base/common/objects'); import dom = require('vs/base/browser/dom'); import numbers = require('vs/base/common/numbers'); import sash = require('vs/base/browser/ui/sash/sash'); +import {StandardKeyboardEvent} from 'vs/base/browser/keyboardEvent'; +import {CommonKeybindings} from 'vs/base/common/keyCodes'; export enum Orientation { VERTICAL, @@ -185,6 +187,7 @@ export class AbstractCollapsibleView extends HeaderView { protected state: CollapsibleState; private headerClickListener: () => void; + private headerKeyListener: () => void; constructor(opts: ICollapsibleViewOptions) { super(opts); @@ -198,7 +201,25 @@ export class AbstractCollapsibleView extends HeaderView { dom.addClass(this.header, 'collapsible'); dom.addClass(this.body, 'collapsible'); - this.headerClickListener = dom.addListener(this.header, 'click', () => this.toggleExpansion()); + // Keyboard access + this.header.setAttribute('tabindex', '0'); + this.headerKeyListener = dom.addListener(this.header, dom.EventType.KEY_DOWN, (e) => { + let event = new StandardKeyboardEvent(e); + let eventHandled = false; + if (event.equals(CommonKeybindings.ENTER) || event.equals(CommonKeybindings.SPACE) || event.equals(CommonKeybindings.LEFT_ARROW) || event.equals(CommonKeybindings.RIGHT_ARROW)) { + this.toggleExpansion(); + eventHandled = true; + } else if (event.equals(CommonKeybindings.ESCAPE)) { + this.header.blur(); + eventHandled = true; + } + + if (eventHandled) { + dom.EventHelper.stop(event, true); + } + }); + + this.headerClickListener = dom.addListener(this.header, dom.EventType.CLICK, () => this.toggleExpansion()); } public layout(size: number, orientation: Orientation): void { @@ -257,6 +278,11 @@ export class AbstractCollapsibleView extends HeaderView { this.headerClickListener = null; } + if (this.headerKeyListener) { + this.headerKeyListener(); + this.headerKeyListener = null; + } + super.dispose(); } }