[Dojo-checkins] bill - r20794 - in dijit/trunk: . tests/robot

[dojo-checkins-admin at dojotoolkit.org]

Author: bill
Date: Fri Nov 13 20:30:46 2009
New Revision: 20794

Modified:
   dijit/trunk/ColorPalette.js
   dijit/trunk/tests/robot/ColorPalette.html
Log:
Fix focus on IE when arrow keys are pressed.  Refs #10315 !strict

Modified: dijit/trunk/ColorPalette.js
==============================================================================
--- dijit/trunk/ColorPalette.js	(original)
+++ dijit/trunk/ColorPalette.js	Fri Nov 13 20:30:46 2009
@@ -128,10 +128,10 @@
 						colorValue = colorObject.setColor(dojo.Color.named[color]);
 
 				var cellNode = dojo.create("span", {
-					"class":"dijitPaletteCell",
-					tabIndex:"-1",
+					"class": "dijitPaletteCell",
+					tabIndex: "-1",
 					title: this.colorNames[color],
-					style:{
+					style: {
 						top: coords.topOffset + (row * coords.cHeight) + "px",
 						left: coords.leftOffset + (col * coords.cWidth) + "px"
 					}
@@ -346,7 +346,11 @@
 		if(newFocusIndex < this._cellNodes.length && newFocusIndex > -1)
 		{
 			var focusNode = this._cellNodes[newFocusIndex];
-			focusNode.focus();
+			this._setCurrent(focusNode);
+
+			// Actually focus the node, for the benefit of screen readers.
+			// Use setTimeout because IE doesn't like changing focus inside of an event handler
+			setTimeout(dojo.hitch(dijit, "focus", focusNode), 0);
 		}
 	}
 });

Modified: dijit/trunk/tests/robot/ColorPalette.html
==============================================================================
--- dijit/trunk/tests/robot/ColorPalette.html	(original)
+++ dijit/trunk/tests/robot/ColorPalette.html	Fri Nov 13 20:30:46 2009
@@ -60,10 +60,17 @@
 							doh.robot.sequence(d.getTestCallback(function(){
 								doh.is(0, changes.length, "no onchange events yet");
 								
-								// test the focus is initially on top left cell
-								var focused = dojo.query(".dijitPaletteCellHighlight", big.domNode);
-								doh.is(1, focused.length, "one focused node");
-								doh.is("white", focused[0].title, "upper left is focused");
+								// test that focus is on top left cell
+								var focus = dojo.global.dijit._curFocus;
+								doh.t(focus, "something is focused");
+								var imgNode = focus.getElementsByTagName("img")[0]
+								doh.t(imgNode, "found image node");
+								doh.is("#ffffff", imgNode.color, "focused on white");
+
+								// test the highlight is initially on top left cell
+								var highlighted = dojo.query(".dijitPaletteCellHighlight", big.domNode);
+								doh.is(1, highlighted.length, "one focused node");
+								doh.is("white", highlighted[0].title, "upper left is focused");	// won't work in non-english environments though...
 							}), 500);
 							
 							return d;
@@ -76,13 +83,25 @@
 						runTest: function(){
 							var d = new doh.Deferred();
 
-							// move around some and select a value
+							// Move around some
 							doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500, {});
 							doh.robot.keyPress(dojo.keys.RIGHT_ARROW, 500, {});
 							doh.robot.keyPress(dojo.keys.DOWN_ARROW, 500, {});
 							doh.robot.keyPress(dojo.keys.LEFT_ARROW, 500, {});
-							doh.robot.keyPress(dojo.keys.ENTER, 500, {});
+							
+							// Focus should follow the current position for the benefit of screen readers.
+							doh.robot.sequence(d.getTestErrback(dojo.hitch(this, function(){
+								var focus = dojo.global.dijit._curFocus;
+								doh.t(focus, "something is focused");
+								
+								var imgNode = focus.getElementsByTagName("img")[0]
+								doh.t(imgNode, "found image node");
 
+								doh.is("#ffc0cb", imgNode.color, "focused on right color");
+							})), 1000);
+							
+							// Select the current value
+							doh.robot.keyPress(dojo.keys.ENTER, 500, {});
 							doh.robot.sequence(d.getTestCallback(dojo.hitch(this, function(){
 								doh.is("#ffc0cb", big.attr("value"), "selected value");
 								
@@ -152,8 +171,16 @@
 							doh.robot.mouseClick({left: true}, 500);
 
 							doh.robot.sequence(d.getTestCallback(function(){
+								// test that value set
 								var value = small.attr('value');
-								doh.is("#ff0000", value);
+								doh.is("#ff0000", value, "value");
+								
+								// test that focus also got set
+								var focus = dojo.global.dijit._curFocus;
+								doh.t(focus, "something is focused");
+								var imgNode = focus.getElementsByTagName("img")[0]
+								doh.t(imgNode, "found image node");
+								doh.is("#ff0000", imgNode.color, "focused");
 							}), 1000);
 
 							return d;