[FIX JENKINS-33947] - Fix keyboard navigation in setup wizard (#2294)

jenkinsci · May 27, 2016 · 50c7049 · recena · May 27, 2016 · kzantow
1 parent 1fe9255
commit 50c7049
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 8 deletions.
diff --git a/war/src/main/js/pluginSetupWizardGui.js b/war/src/main/js/pluginSetupWizardGui.js
@@ -233,6 +233,15 @@ var createPluginSetupWizard = function(appendTarget) {
 		};
 		var html = panel($.extend({translations: translations, baseUrl: jenkins.baseUrl, jenkinsVersion: getJenkinsVersion() }, data));
 		if(panel === currentPanel) { // just replace id-marked elements
+			var $focusedItem = $(document.activeElement);
+			var focusPath = [];
+			while ($focusedItem && $focusedItem.length > 0) {
+				focusPath.push($focusedItem.index());
+				$focusedItem = $focusedItem.parent();
+				if ($focusedItem.is('body')) {
+					break;
+				}
+			}
 			var $upd = $(html);
 			$upd.find('*[id]').each(function() {
 				var $el = $(this);
@@ -246,6 +255,19 @@ var createPluginSetupWizard = function(appendTarget) {
 			});
 
 			oncomplete();
+
+			// try to refocus on the element that had focus
+			try {
+				var e = $('body')[0];
+				for (var i = focusPath.length-1; i >= 0; i--) {
+					e = e.children[focusPath[i]];
+				}
+				if (document.activeElement != e) {
+					e.focus();
+				}
+			} catch (ex) {
+				// ignored, unable to restore focus
+			}
 		}
 		else {
 			var append = function() {
@@ -743,6 +765,38 @@ var createPluginSetupWizard = function(appendTarget) {
 		var val = $(this).val();
 		searchForPlugins(val, true);
 	});
+
+	// handle keyboard up/down navigation between items in
+	// in the list, if we're focused somewhere inside
+	$wizard.on('keydown', '.plugin-list', function(e) {
+		var up = false;
+		switch(e.which) {
+			case 38: // up
+				up = true;
+			break;
+			case 40: // down
+			break;
+			default:
+				return; // ignore
+		}
+		var $plugin = $(e.target).closest('.plugin');
+		if ($plugin && $plugin.length > 0) {
+			var $allPlugins = $('.plugin-list .plugin:visible');
+			var idx = $allPlugins.index($plugin);
+			var next = idx + (up ? -1 : 1);
+			if(next >= 0 && next < $allPlugins.length) {
+				var $next = $($allPlugins[next]);
+				if ($next && $next.length > 0) {
+					var $chk = $next.find(':checkbox:first');
+					if ($chk && $chk.length > 0) {
+						e.preventDefault();
+						$chk.focus();
+						return;
+					}
+				}
+			}
+		}
+	});
 
 	// handle clearing the search
 	$wizard.on('click', '.clear-search', function() {

diff --git a/war/src/main/js/templates/pluginSelectList.hbs b/war/src/main/js/templates/pluginSelectList.hbs
@@ -3,17 +3,17 @@
 <div class="plugins-for-category">
   {{#each this}}
   <div class="plugin {{id plugin.name}} {{#inSelectedPlugins plugin.name}}selected{{/inSelectedPlugins}} {{#ifVisibleDependency plugin.name}}show-dependencies{{/ifVisibleDependency}}" id="row-{{plugin.name}}">
-    {{#hasDependencies plugin.name}}
-      <div class="btn btn-link toggle-dependency-list" type="button" data-plugin-name="{{../plugin.name}}">
-        {{../../../translations.installWizard_installIncomplete_dependenciesLabel}}<span class="badge">{{dependencyCount ../plugin.name}}</span>
-      </div>
-    {{/hasDependencies}}
     <label>
       <span class="title">
         <input type="checkbox" id="chk-{{plugin.name}}" name="{{plugin.name}}" value="{{searchTerm}}" {{#inSelectedPlugins plugin.name}}checked="checked"{{/inSelectedPlugins}}/>
         {{plugin.title}}
         <a href="{{plugin.website}}" target="_blank">{{../../translations.installWizard_websiteLinkLabel}}</a>
       </span>
+      {{#hasDependencies plugin.name}}
+      <a href="#" class="btn btn-link toggle-dependency-list" type="button" data-plugin-name="{{../plugin.name}}">
+        {{../../../translations.installWizard_installIncomplete_dependenciesLabel}}<span class="badge">{{dependencyCount ../plugin.name}}</span>
+      </a>
+      {{/hasDependencies}}
       <span class="description">
         {{{plugin.excerpt}}}
       </span>

diff --git a/war/src/main/less/pluginSetupWizard.less b/war/src/main/less/pluginSetupWizard.less
@@ -353,7 +353,7 @@
 					&.selected label {
 						background: #dff0d8;
 						margin: 4px -7px;
-						padding: 6px 0 6px 26px;
+						padding: 6px 1px 6px 26px;
 						border-radius: 2px;
 						border: 1px solid #C2E0A9;
 						color: #3c763d;
@@ -424,11 +424,17 @@
 							margin-left: 7px;
 						}
 
-						&:hover, &.active {
+						&:hover, &:focus, &.active {
 							text-decoration: underline;
+							outline: none;
 						}
 					}
 
+					&.selected .toggle-dependency-list {
+						top: -1px;
+						right: -1px;
+					}
+
 					.dep-list {
 						padding: 10px 0 6px 0;
 						display: none;
@@ -503,7 +509,7 @@
                         background: #337ab7;
                     }
 
-                    &:hover {
+                    &:hover, &:focus {
                       background:rgba(100,200,255,.1);
                       box-shadow:inset -200px 0 200px -200px rgba(100,200,255,.33);
                         color: #337ab7;