Escape on 'tooltip' dialogs only works when the focus is on the initi…

…al input field org-ids/web-ide-issues#385 (#362) * Escape on 'tooltip' dialogs only works when the focus is on the initial input field org-ids/web-ide-issues#385 * - close slideout on ESC if it has focus * review: - self is not defined - call cancelFunction and closeFunction from getFillFunction * - prefix with underscore for private fields * review: reuse key handlers in fill function * review: fix slide out panels * review: fix filter commits panel
eclipse-archived · Mar 25, 2019 · b24841a · b24841a
1 parent 952e70e
commit b24841a
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 5 deletions.
diff --git a/bundles/org.eclipse.orion.client.git/web/orion/git/widgets/gitCommitList.js b/bundles/org.eclipse.orion.client.git/web/orion/git/widgets/gitCommitList.js
@@ -613,6 +613,8 @@ define([
 					content.setAttribute("role", "dialog");
 					content.setAttribute("aria-modal", "true");
 					content.setAttribute("aria-label", messages.FilterCommits);
+					content.tabIndex = -1;
+					content.style.outline = "none";
 					content.addEventListener("keydown", escHandler);
 					lib.trapTabs(content);
 					lib.addAutoDismiss([content], function() {

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/outliner.js b/bundles/org.eclipse.orion.client.ui/web/orion/outliner.js
@@ -395,7 +395,9 @@ define([
 
 			this._outlineNode = document.createElement("div"); //$NON-NLS-0$
 			this._outlineNode.classList.add("outlineNodeWrapper"); //$NON-NLS-0$
-			this._outlineNode.addEventListener("keydown", function(e){
+			this._wrapperNode.tabIndex = -1;
+			this._wrapperNode.style.outline = "none";
+			this._wrapperNode.addEventListener("keydown", function(e){
 				if (e.keyCode === lib.KEY.ESCAPE || e.keyCode === lib.KEY.ENTER) {
 					if (this._slideout.getPreviousActiveElement()) {
 						this.hide();

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/parameterCollectors.js b/bundles/org.eclipse.orion.client.ui/web/orion/parameterCollectors.js
@@ -84,12 +84,13 @@ define(['i18n!orion/nls/messages', 'orion/webui/littlelib', 'orion/bidiUtils', '
 			this._activeElements = this._getElementsFunction(commandNode);
 			if (this._activeElements && this._activeElements.parameterArea && this._activeElements.slideContainer) {
 				this._activeElements.onClose = onClose;
-				var focusNode = fillFunction(this._activeElements.parameterArea, this._activeElements.dismissArea);
+				var focusNode = fillFunction(this._activeElements.parameterArea, this._activeElements.dismissArea, this._activeElements.slideContainer);
 				if (!focusNode) {
 					// no parameters were generated.  
 					return false;
 				}
 				this._activeElements.focusNode = focusNode;
+				var self = this;
 				var close = lib.$$array("#closebox", this._activeElements.dismissArea || this._activeElements.parameterArea); //$NON-NLS-0$
 				if (close.length === 0) {
 					// add the close button if the fill function did not.
@@ -104,11 +105,14 @@ define(['i18n!orion/nls/messages', 'orion/webui/littlelib', 'orion/bidiUtils', '
 							position: ["right", "below", "above", "left"] //$NON-NLS-3$ //$NON-NLS-2$ //$NON-NLS-1$ //$NON-NLS-0$
 					});
 					dismiss.appendChild(close);
-					var self = this;
 					close.addEventListener("click", function(event) { //$NON-NLS-0$
 						self.close();
 					}, false);
 				}
+				// ESC closes slideout if it has focus
+				this._activeElements.slideContainer.tabIndex = -1;
+				this._activeElements.slideContainer.style.outline = "none";
+
 				// all parameters have been generated.  Activate the area.
 				this._activeElements.slideContainer.classList.add("slideContainerActive"); //$NON-NLS-0$
 				this._toolbarLayoutFunction(this._activeElements);
@@ -205,7 +209,7 @@ define(['i18n!orion/nls/messages', 'orion/webui/littlelib', 'orion/bidiUtils', '
 
 		getFillFunction: function(commandInvocation, closeFunction, cancelFunction) {
 			var self = this;
-			return function(parameterArea, dismissArea) {
+			return function(parameterArea, dismissArea, containerArea) {
 				var first = null;
 				var localClose = function() {
 					if (closeFunction) {
@@ -226,6 +230,10 @@ define(['i18n!orion/nls/messages', 'orion/webui/littlelib', 'orion/bidiUtils', '
 						lib.stop(event);
 					}
 				};
+
+				if (containerArea) {
+					containerArea.addEventListener("keydown", keyHandler, false); //$NON-NLS-0$
+				}
 
 				var makeButton = function(text, parent) {
 					var button = document.createElement("button"); //$NON-NLS-0$

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/problems/problemsView.js b/bundles/org.eclipse.orion.client.ui/web/orion/problems/problemsView.js
@@ -57,6 +57,8 @@ define([
 			explorerParentNode.id = "problemsExplorerParent_id"; //$NON-NLS-0$
 			explorerParentNode.classList.add("problemsExplorerNodeWrapper"); //$NON-NLS-0$
 			this._inner_node.appendChild(explorerParentNode);
+			this._inner_node.tabIndex = -1;
+			this._inner_node.style.outline = "none";
 			this._inner_node.addEventListener("keydown", function(e) { //$NON-NLS-0$
 				if(e.defaultPrevented){// If the key event was handled by other listeners and preventDefault was set on(e.g. input completion handled ENTER), we do not handle it here
 					return;

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/search/InlineSearchPane.js b/bundles/org.eclipse.orion.client.ui/web/orion/search/InlineSearchPane.js
@@ -315,6 +315,8 @@ define([
 
 			this._searchBox.getRecentEntryButton().setAttribute("aria-label", messages["Show previous search terms"]); //$NON-NLS-0$
 
+			this._searchWrapper.tabIndex = -1;
+			this._searchWrapper.style.outline = "none";
 			this._searchWrapper.addEventListener("keydown", function(e) { //$NON-NLS-0$
 				if(e.defaultPrevented){// If the key event was handled by other listeners and preventDefault was set on(e.g. input completion handled ENTER), we do not handle it here
 					return;

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/searchAndReplace/textSearcher.js b/bundles/org.eclipse.orion.client.ui/web/orion/searchAndReplace/textSearcher.js
@@ -108,7 +108,12 @@ define([
 		},
 		_createActionTable: function() {
 			var that = this;
-			this._commandService.openParameterCollector("pageNavigationActions", function(parentDiv) { //$NON-NLS-0$
+			this._commandService.openParameterCollector("pageNavigationActions", function(parentDiv, dismissArea, containerArea) { //$NON-NLS-0$
+				if (containerArea) {
+					containerArea.onkeydown = function(evt){
+						return that._handleKeyDown(evt);
+					};
+				}
 
 				// create the input box for searchTerm
 				var searchStringInput = document.createElement('input'); //$NON-NLS-0$

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/webui/dialog.js b/bundles/org.eclipse.orion.client.ui/web/orion/webui/dialog.js
@@ -73,6 +73,8 @@ define(['i18n!orion/nls/messages', 'orion/webui/littlelib', 'orion/uiUtils'],
 			var frameFragment = range.createContextualFragment(this.CONTAINERTEMPLATE);
 			parent.appendChild(frameFragment);
 			this.$frame = parent.lastChild;
+			this.$frame.tabIndex = -1;
+			this.$frame.style.outline = "none";
 //			this.handle = lib.addAutoDismiss([this.$frame], this.hide.bind(this));
 			if (this.title) {
 				lib.$(".dialogTitleText", this.$frame).appendChild(document.createTextNode(this.title)); //$NON-NLS-0$