Dialog_a11y.html | searchcode

/public/javascripts/dojo/dijit.1/tests/robot/Dialog_a11y.html

https://github.com/ryangroth5/claims
HTML | 352 lines | 299 code | 51 blank | 2 comment | 0 complexity | d83efef0ea836e7720bbe0de1e66d1bc MD5 | raw file
Possible License(s): BSD-3-Clause, LGPL-2.0, MIT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>doh.robot Dialog A11Y Test</title>

		<style>
			@import "../../../util/doh/robot/robot.css";
		</style>

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../dojo/dojo.js"
			djConfig="isDebug: true"></script>
			
		<!-- functions to help test -->
		<script type="text/javascript" src="../helpers.js"></script>

		<script type="text/javascript">
			dojo.require("dijit.dijit"); // optimize: load dijit layer
			dojo.require("dijit.robotx");

			var dialogIds = [
				{ dlg: "dialog1", firstFocus: "name" },
				{ dlg: "tabDialog",
					firstFocus: "dijit_layout__TabButton_0" },	// Warning:  if id changes in the test file, this needs updating
				{ dlg: "fifthDlg", firstFocus: "fifthDlg" },
				{ dlg: "dialog6", firstFocus: "dialog6", fileInput: "afile" },
				{ dlg: "cantmove", firstFocus: "cantmove" },
				{ dlg: "preventer", firstFocus: "preventerOK" }
			];

			// testing utilities
			function dialogTests(){
				var that = {};
				var xtraPara = null;
				var firstTabStop = null;
				var gotFocus = false;
				var lostFocus = false;
				var focusConnect = null;
				var blurConnect = null;
							
				// Define a known location to place keyboard focus, and put it there.  Allows for a
				// place for focus to return to when dialog is dismissed.
				function addTabNavFocus(){
					removeTabNavFocus();
					xtraPara = dojo.doc.createElement("p");
					dojo.attr(xtraPara, 'tabindex', 0);
					xtraPara.innerHTML = "Tab-focussable paragraph";
					dojo.place(xtraPara, dojo.body(), "first");
					xtraPara.focus();
				};
	
				function removeTabNavFocus(){
					if(xtraPara && xtraPara.parentNode){
						xtraPara.parentNode.removeChild(xtraPara);
					}
				};
				
				that.ariaFocusSetup = function(/*dialog's and first focusable ids*/ ids){
					addTabNavFocus();
					gotFocus = lostFocus = false;
					var dlog = dijit.byId(ids.dlg);
					// need to show dialog in order to find the first tab stop.
					if( !dojo.isFF && ids.fileInput){
						that.firstTabStop = dojo.byId(ids.fileInput);
					}else{
						that.firstTabStop = dojo.byId(ids.firstFocus);
					}
					focusConnect = dojo.connect(that.firstTabStop, "onfocus", function(){
						gotFocus = true;
					});				
					blurConnect = dojo.connect(that.firstTabStop, "onblur", function(){
						lostFocus = true;
					});
				};
				
				that.ariaFocusTeardown = function(){
					removeTabNavFocus();
					dojo.disconnect(focusConnect);
					dojo.disconnect(blurConnect);
				};
				
				that.ariaFocus = function(dlogId){
					var d = new doh.Deferred();
					var dlog = dijit.byId(dlogId.dlg);
					var doShow = function(){
						dlog.show();
					};
					var doHide = function(){
						dlog.hide();
					};
					// <firstTabStop> set in that.ariaFocusSetup(), above.
					doh.isNot(null, that.firstTabStop,  + "no first-focusable item for dialog: " + dlog.id);
					doh.robot.sequence(doShow, 200);   // wait a bit for the connects to connect.
					doh.robot.sequence(doHide, 800);
					var testShowHide = function(){
						doh.t(gotFocus, "first focusable didn't get focus on open, for: " + dlog.id);
						doh.t(lostFocus, "first focusable didn't lose focus on close, for: " + dlog.id);
					};
					doh.robot.sequence(d.getTestCallback(testShowHide), 1200);
					return d;
				};
				return that;
				
			}	// end dialogTests().
			
			var dialogTest;

			dojo.addOnLoad(function(){
				doh.robot.initRobot('../test_Dialog.html');

				doh.register("dijit.Dialog keyboard tests (cancel)",[
					{
						name: "open dialog",
						timeout: 4000,
						runTest: function(){
							var d = new doh.Deferred();

							// Click the button.  We do this manually rather than calling Dialog.show()
							// so we can later test that focus is restored (to the previous position)
							// when the dialog is closed
							doh.robot.sequence(function(){
								dojo.byId("dialog1button").focus();
							}, 500);
							doh.robot.keyPress(dojo.keys.SPACE, 500, {});
							doh.robot.typeKeys("Bill", 1000);

							doh.robot.sequence(d.getTestCallback(function(){
								doh.t(isVisible("dialog1", "dialog 1 has been made visible"));
								doh.is("name", dojo.global.dijit._curFocus.id, "focus is on the first field");
							}), 500);

							return d;
						}
					},				

					{
						name: "tab to the date field",
						timeout: 10000,
						runTest: function(){
							var d = new doh.Deferred();

							doh.robot.keyPress(dojo.keys.TAB, 500, {});
							doh.robot.typeKeys("Japan", 500);
							doh.robot.keyPress(dojo.keys.TAB, 500, {});

							doh.robot.sequence(d.getTestCallback(function(){
								doh.is("date", dojo.global.dijit._curFocus.id, "focus is on the date field");
							}), 1000);

							return d;
						}
					},
			
					{
						name: "close date drop down",
						timeout: 4000,
						runTest: function(){
							var d = new doh.Deferred();

							doh.robot.keyPress(dojo.keys.ESCAPE, 500, {});

							doh.robot.sequence(d.getTestCallback(function(){
								doh.is("date", dojo.global.dijit._curFocus.id, "focus is still on the date field");
								doh.t(isVisible("dialog1", "dialog 1 wasn't closed"));
							}), 500);

							return d;
						}
					},

					{
						name: "tabbing loops around",
						timeout: 4000,
						runTest: function(){
							var d = new doh.Deferred();

							doh.robot.keyPress(dojo.keys.TAB, 500, {});
							doh.robot.keyPress(dojo.keys.TAB, 500, {});
							doh.robot.keyPress(dojo.keys.TAB, 500, {});
							doh.robot.keyPress(dojo.keys.TAB, 500, {});

							doh.robot.sequence(d.getTestCallback(function(){
								doh.is("name", dojo.global.dijit._curFocus.id, "focus looped back to name field");
							}), 500);

							return d;
						}
					},

					{
						name: "reverse-tabbing loops around",
						timeout: 4000,
						runTest: function(){
							var d = new doh.Deferred();

							doh.robot.keyPress(dojo.keys.TAB, 500, {shift: true});

							doh.robot.sequence(d.getTestCallback(function(){
								doh.is("ok", dojo.global.dijit._curFocus.id, "focus looped back to submit button");
							}), 500);

							return d;
						}
					},

					{
						name: "cancel dialog",
						timeout: 4000,
						runTest: function(){
							var d = new doh.Deferred();

							doh.robot.keyPress(dojo.keys.ESCAPE, 500, {});

							doh.robot.sequence(d.getTestCallback(function(){
								doh.t(isHidden("dialog1", "dialog 1 was closed"));
								doh.is("dialog1button", dojo.global.dijit._curFocus.id, "focus returned to button");
							}), 500);

							return d;
						}
					}
				]);

				doh.register("dijit.Dialog keyboard tests (submit)",[
					{
						name: "submit some data",
						timeout: 15000,
						setUp: function(){
							dijit.byId("dialog1").reset();
						},
						runTest: function(){
							var d = new doh.Deferred();

							// Setup handler to catch submitted data
							var data;
							dojo.connect(dijit.byId("dialog1"), "execute", function(vals){
								data = vals;
							});

							// Open the dialog
							doh.robot.sequence(function(){
								dojo.byId("dialog1button").focus();
							}, 500);
							doh.robot.keyPress(dojo.keys.SPACE, 500, {});
							
							// Enter some info
							doh.robot.typeKeys("Ted", 2000);
							doh.robot.keyPress(dojo.keys.TAB, 500, {});
							doh.robot.typeKeys("America", 500);
							doh.robot.keyPress(dojo.keys.TAB, 500, {});
							doh.robot.keyPress(dojo.keys.TAB, 500, {});
							doh.robot.keyPress(dojo.keys.TAB, 500, {});
							doh.robot.keyPress(dojo.keys.TAB, 500, {});

							// Submit
							doh.robot.keyPress(dojo.keys.SPACE, 500, {});

							doh.robot.sequence(d.getTestCallback(function(){
								doh.t(isHidden("dialog1", "dialog 1 was closed on submit"));
								doh.t(data, "got submit data");
								doh.is("Ted", data.name, "Name");
								doh.is("America", data.loc, "Location");
							}), 500);

							return d;
						}
					}
				]);

				var dialogTest = dialogTests();

				// Loop to register tests for each dialog in the <dialogIds> array
				// TODO:
				//		The a11yAriaRole, a11yLabel, and a11yAriaExpanded tests probably only need
				//		to be done for one dialog.
				// TODO:
				//		Even the focus tests, the only things we need to test that haven't been tested
				//		already are:
				//			1. focus for a dialog with no focusable elements
				//			2. the file focus thing
				for(i=0; i<dialogIds.length; i++){
				
					// aria role and properties (aria-labelledby) tests.
					doh.register("a11yAriaRole", {
						name:dialogIds[i].dlg+"_role",
						dialogId:dialogIds[i].dlg,
						runTest:function(){
							var dlog = dijit.byId(this.dialogId);
							doh.is("dialog", dijit.getWaiRole(dlog.domNode), dlog.id + ": aria role (dialog)");
						}
					});
					doh.register("a11yLabel", {
						name:dialogIds[i].dlg+"_label",
						dialogId:dialogIds[i].dlg,
						runTest:function(){
							var dlog = dijit.byId(this.dialogId);
							var label = dijit.getWaiState(dlog.domNode, 'label');
							if(!label){
								var labelNodeId = dijit.getWaiState(dlog.domNode, 'labelledby');
								if(labelNodeId){
									var labelNode = dojo.byId(labelNodeId);
								}
								if(labelNode){
									label = labelNode.innerHTML;
								}
							}
							var hint = "aria-label or aria-labelledby (" + dlog.id + ")";
							doh.isNot(null, label, "null " + hint);
							doh.isNot("", label, "empty " + hint);
						}
					});
					
	/*				// dijit.Dialog does not implment aria-expanded as of this writing -- should it?
					doh.register("a11yAriaExpanded",{
						name:dialogIds[i].dlg+"_aria-expanded",
						dialogId:dialogIds[i].dlg,
						runTest:function(){
							var dlog = dijit.byId(this.dialogId);
							var expanded = dijit.getWaiState(dlog.domNode, 'expanded');
							if(expanded=="") expanded = "false";
							doh.is("false", expanded, dlog.id + ": not shown");
							dlog.show();
							expanded = dijit.getWaiState(dlog.domNode, 'expanded');
							dlog.hide();
							doh.is("true", expanded, dlog.id + ": shown");
						}
					});
	*/
	
					// First focusable tests
					doh.register("a11yFirstFocusable",{
						name:"a11yFirstFocusable_"+dialogIds[i].dlg,
						dialog:dialogIds[i],
						timeout:4000,
						setUp:function(){
							dialogTest.ariaFocusSetup(this.dialog);
						},
						runTest:function(){
							return dialogTest.ariaFocus(this.dialog);
						},
						tearDown:function(){
							dialogTest.ariaFocusTeardown();
						}
					});
				}	// end for() loop thru dialogIds array.
		
				doh.run();
			});
		</script>
	</head>
</html>