split view header keyboard access

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(<HTMLElement>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 {

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();
 	}
 }