ColumnSet: Fix header focusing issue

When initially focusing the header with no prior context, ColumnSet
would incorrectly focus the outer `th` rather than the `th` of the
first column of data.

Keyboard.js

@@ -71,10 +71,25 @@ var Keyboard = declare(null, {
 					grid._focusedHeaderNode.tabIndex = -1;
 				}
 				if(grid.showHeader){
+					if(cellNavigation){
+						// Get the focused element. Ensure that the focused element
+						// is actually a grid cell, not a column-set-cell or some
+						// other cell that should not be focused
+						for(var i = 0, element, elements = grid.headerNode.getElementsByTagName("th"); (element = elements[i]); ++i){
+							if(isFocusableClass.test(element.className)){
+								grid._focusedHeaderNode = initialNode = element;
+								break;
+							}
+						}
+					}
+					else{
+						grid._focusedHeaderNode = initialNode = grid.headerNode;
+					}
+
 					// Set the tab index only if the header is visible.
-					grid._focusedHeaderNode = initialNode =
-						cellNavigation ? grid.headerNode.getElementsByTagName("th")[0] : grid.headerNode;
-					if(initialNode){ initialNode.tabIndex = grid.tabIndex; }
+					if(initialNode){
+						initialNode.tabIndex = grid.tabIndex;
+					}
 				}
 			}
 

test/intern/mixins/Keyboard.js

@@ -4,20 +4,32 @@ define([
 	"dgrid/OnDemandList",
 	"dgrid/OnDemandGrid",
 	"dgrid/Keyboard",
+	"dgrid/ColumnSet",
 	"dojo/_base/declare",
 	"dojo/on",
 	"dojo/query",
 	"put-selector/put",
 	"dgrid/test/data/base"
-], function(test, assert, OnDemandList, OnDemandGrid, Keyboard, declare, on, query, put){
+], function(test, assert, OnDemandList, OnDemandGrid, Keyboard, ColumnSet, declare, on, query, put){
 	var handles = [],
 		columns = {
 			col1: "Column 1",
 			col3: "Column 3",
 			col5: "Column 5"
 		},
 		item = testStore.get(1),
-		grid;
+		grid,
+		columnSet = [
+			[
+				[{label: 'Column 1', field: 'col1'},
+						{label: 'Column 2', field: 'col2', sortable: false}],
+					[{label: 'Column 3', field: 'col3', colSpan: 2}]],
+			[
+				[{label: 'Column 1', field: 'col1', rowSpan: 2},
+					{label: 'Column 4', field: 'col4'}],
+					[{label: 'Column 5', field: 'col5'}]
+			]
+		];
 
 	// Common functions run after each test and suite
 
@@ -257,6 +269,38 @@ define([
 		});
 	});
 
+	test.suite("Keyboard (Grid + cellNavigation:true + ColumnSet)", function(){
+		test.before(function(){
+			grid = new (declare([OnDemandGrid, ColumnSet, Keyboard]))({
+				columnSets: columnSet,
+				sort: "id",
+				store: testStore
+			});
+			document.body.appendChild(grid.domNode);
+			grid.startup();
+		});
+
+		test.afterEach(afterEach);
+		test.after(after);
+
+		test.test("grid.focusHeader + ColumnSet", function(){
+			var colSetId;
+
+			handles.push(on(document.body, "dgrid-cellfocusin", function(e){
+				assert.isTrue("cell" in e, "dgrid-cellfocusin event has a cell property");
+				assert.isFalse("row" in e, "dgrid-cellfocusin event does not have a row property");
+				colSetId = e.cell.column.id;
+			}));
+
+			grid.focus(); // first focus the content body
+			grid.focusHeader();
+			assert.strictEqual(document.activeElement, query(".dgrid-cell", grid.headerNode)[0],
+				"focusHeader() targeted the first header cell");
+			assert.strictEqual(colSetId, "0-0-0",
+				"dgrid-cellfocusin event triggered on first cell on focusHeader() call");
+		});
+	});
+
 	test.suite("Keyboard focus preservation", function(){
 		test.before(function(){
 			grid = new (declare([OnDemandGrid, Keyboard]))({