PR Prototype for list navigation Issue #24119

product.json

@@ -14,5 +14,10 @@
 	"win32ShellNameShort": "C&ode - OSS",
 	"darwinBundleIdentifier": "com.visualstudio.code.oss",
 	"reportIssueUrl": "https://github.com/Microsoft/vscode/issues/new",
-	"urlProtocol": "code-oss"
+	"urlProtocol": "code-oss",
+	"extensionsGallery": {
+		"serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
+		"cacheUrl": "https://vscode.blob.core.windows.net/gallery/index",
+		"itemUrl": "https://marketplace.visualstudio.com/items"
+	}
 }

src/vs/base/browser/ui/actionbar/actionbar.ts

@@ -30,8 +30,10 @@ export interface IActionItem extends IEventEmitter {
 	dispose(): void;
 }
 
+// cleidigh
 export interface IBaseActionItemOptions {
 	draggable?: boolean;
+	tabIndexOff?: boolean;
 }
 
 export class BaseActionItem extends EventEmitter implements IActionItem {
@@ -232,6 +234,7 @@ export class ActionItem extends BaseActionItem {
 		this.options = options;
 		this.options.icon = options.icon !== undefined ? options.icon : false;
 		this.options.label = options.label !== undefined ? options.label : true;
+		this.options.tabIndexOff = options.tabIndexOff !== undefined ? options.tabIndexOff : false;
 		this.cssClass = '';
 	}
 
@@ -302,7 +305,14 @@ export class ActionItem extends BaseActionItem {
 		if (this.getAction().enabled) {
 			this.builder.removeClass('disabled');
 			this.$e.removeClass('disabled');
-			this.$e.attr({ tabindex: 0 });
+			// cleidigh - allow external tabindex control
+			const disableTabIndex = this.options && this.options.tabIndexOff;
+			if (disableTabIndex) {
+				this.$e.attr({ tabindex: -1 });
+			} else {
+				this.$e.attr({ tabindex: 0 });
+			}
+
 		} else {
 			this.builder.addClass('disabled');
 			this.$e.addClass('disabled');
@@ -336,18 +346,21 @@ export interface IActionItemProvider {
 	(action: IAction): IActionItem;
 }
 
+// cleidigh
 export interface IActionBarOptions {
 	orientation?: ActionsOrientation;
 	context?: any;
 	actionItemProvider?: IActionItemProvider;
 	actionRunner?: IActionRunner;
 	ariaLabel?: string;
 	animated?: boolean;
+	tabIndexOff?: boolean;
 }
 
 let defaultOptions: IActionBarOptions = {
 	orientation: ActionsOrientation.HORIZONTAL,
-	context: null
+	context: null,
+	tabIndexOff: false
 };
 
 export interface IActionOptions extends IActionItemOptions {
@@ -531,6 +544,7 @@ export class ActionBar extends EventEmitter implements IActionRunner {
 				item = new ActionItem(this.context, action, options);
 			}
 
+
 			item.actionRunner = this._actionRunner;
 			item.setActionContext(this.context);
 			this.addEmitter2(item);

src/vs/workbench/parts/extensions/browser/extensionsList.ts

@@ -42,7 +42,7 @@ export class Delegate implements IDelegate<IExtension> {
 	getTemplateId() { return 'extension'; }
 }
 
-const actionOptions = { icon: true, label: true };
+const actionOptions = { icon: true, label: true, tabIndexOff: true };
 
 export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 
@@ -76,7 +76,10 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 					return (<ManageExtensionAction>action).actionItem;
 				}
 				return null;
-			}
+			},
+			// cleidigh - tabindex for actions will be controlled by list row focus-selection
+			tabIndexOff: true
+
 		});
 		actionbar.addListener2(EventType.RUN, ({ error }) => error && this.messageService.show(Severity.Error, error));
 

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

@@ -27,6 +27,7 @@ import { append, $, addStandardDisposableListener, EventType, addClass, removeCl
 import { PagedModel, IPagedModel, mergePagers, IPager } from 'vs/base/common/paging';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { PagedList } from 'vs/base/browser/ui/list/listPaging';
+import { IListEvent } from '../../../../base/browser/ui/list/list';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { Delegate, Renderer } from 'vs/workbench/parts/extensions/browser/extensionsList';
 import { IExtensionsWorkbenchService, IExtension, IExtensionsViewlet, VIEWLET_ID, ExtensionState } from '../common/extensions';
@@ -117,6 +118,17 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 
 		this.disposables.push(this.listService.register(this.list.widget));
 
+		this.list.onFocusChange(e => this.onListFocusOrSelect(e));
+		this.list.onSelectionChange(e => this.onListFocusOrSelect(e));
+
+		const onListKeyDown = chain(domEvent(this.extensionsBox, 'keydown'))
+			.filter(() => this.list.length > 0)
+			.map(e => new StandardKeyboardEvent(e));
+
+		onListKeyDown.filter(e => e.keyCode === KeyCode.Tab && e.shiftKey === false).on(this.onListTab, this, this.disposables);
+		// onListKeyDown.filter(e => e.keyCode === KeyCode.Escape).on(this.onListEscape, this, this.disposables);
+
+
 		const onKeyDown = chain(domEvent(this.searchBox, 'keydown'))
 			.filter(() => this.list.length > 0)
 			.map(e => new StandardKeyboardEvent(e));
@@ -128,6 +140,8 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 		onKeyDown.filter(e => e.keyCode === KeyCode.PageUp).on(this.onPageUpArrow, this, this.disposables);
 		onKeyDown.filter(e => e.keyCode === KeyCode.PageDown).on(this.onPageDownArrow, this, this.disposables);
 
+
+
 		const onSearchInput = domEvent(this.searchBox, 'input') as EventOf<SearchInputEvent>;
 		onSearchInput(e => this.triggerSearch(e.target.value, e.immediate), null, this.disposables);
 
@@ -405,6 +419,61 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 		this.extensionsWorkbenchService.open(extension).done(null, err => this.onError(err));
 	}
 
+	// cleidigh - tab selects current row and moves to first tabindex enabled action
+	// open action fired as well, makes sense for extensions maybe not SCM (should be configurable)
+	private onListTab(): void {
+		this.list.widget.setSelection(this.list.widget.getFocus());
+	}
+
+	/* cleidigh - attempt to capture action cancel to refocus list - failure
+		private onActionCancel(e: IAction): void {
+			console.log(document.activeElement);
+
+			this.extensionsBox.focus();
+			this.list.widget.setSelection(this.list.widget.getFocus());
+			console.log(document.activeElement);
+		}
+
+		private onListEscape(): void {
+			console.log(document.activeElement);
+
+			this.extensionsBox.focus();
+			this.list.widget.setSelection(this.list.widget.getFocus());
+			console.log(document.activeElement);
+		}
+	*/
+	private onListFocusOrSelect(e: IListEvent<IExtension>): void {
+
+		const focusedIndexID = this.list.widget.getHTMLElement().getAttribute('aria-activedescendant');
+		const listDOM = this.extensionsBox;
+
+
+		if (!!focusedIndexID) {
+			let al = listDOM.getElementsByClassName('action-label');
+
+			for (let index = 0; index < al.length; index++) {
+				let element = al[index];
+				if (!!element.getAttribute('tabindex')) {
+					element.setAttribute('tabindex', '-1');
+				}
+			}
+
+			let focusedRowActions = document.getElementById(focusedIndexID).getElementsByClassName('action-label');
+
+			for (let index = 0; index < focusedRowActions.length; index++) {
+				let element = focusedRowActions[index];
+				if (!element.classList.contains('disabled')) {
+					// console.log(element);
+					element.setAttribute('tabindex', '0');
+				}
+			}
+
+		}
+
+
+
+	}
+
 	private onEnter(): void {
 		this.list.setSelection(this.list.getFocus());
 	}

src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css

@@ -64,6 +64,7 @@
 	display: none;
 }
 
+.scm-viewlet .monaco-list .monaco-list-row.selected > .resource-group > .actions,
 .scm-viewlet .monaco-list .monaco-list-row.selected > .resource > .actions,
 .scm-viewlet .monaco-list:not(.selection-multiple) .monaco-list-row > .resource:hover > .actions {
 	display: block;