Add ARIA roles and tabindex to UI elements

max-li · Feb 2, 2012 · f5f3d19 · f5f3d19
1 parent 5ae1901
commit f5f3d19
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/bundles/org.eclipse.orion.client.core/web/orion/explorer.js b/bundles/org.eclipse.orion.client.core/web/orion/explorer.js
@@ -269,6 +269,8 @@ exports.ExplorerRenderer = (function() {
 				var check = document.createElement("span");
 				check.id = this.getCheckBoxId(tableRow.id);
 				dojo.addClass(check, "selectionCheckmark");
+				dojo.attr(check, "role", "checkbox");
+				dojo.attr(check, "aria-checked", "false");
 				check.itemId = tableRow.id;
 				if(this.getCheckedFunc){
 					check.checked = this.getCheckedFunc(item);
@@ -296,6 +298,7 @@ exports.ExplorerRenderer = (function() {
 				dojo.toggleClass(tableRow, "checkedRow", checked);
 			}
 			dojo.toggleClass(checkBox, "selectionCheckmarkChecked", checked);
+			dojo.attr(checkBox, "aria-checked", checked ? "true" : "false");
 			if(this.onCheckedFunc){
 				this.onCheckedFunc(checkBox.itemId, checked, manually);
 			}
@@ -334,6 +337,7 @@ exports.ExplorerRenderer = (function() {
 						if (check) {
 							check.checked = true;
 							dojo.addClass(check, "selectionCheckmarkChecked");
+							dojo.attr(check, "aria-checked", "true");
 						}
 					}
 				}

diff --git a/bundles/org.eclipse.orion.client.core/web/settings/settings.css b/bundles/org.eclipse.orion.client.core/web/settings/settings.css
@@ -96,6 +96,10 @@ button {
 	cursor:pointer;
 }
 
+.navbar-item:focus {
+	background: #eeeeee;
+}
+
 ul,menu,dir {
 	display: block;
 	list-style-type: disc;
@@ -262,6 +266,7 @@ input[type="checkbox"] {
 }
 
 .interactionClosed {
+	display: none;
 	height: 0;
 	opacity: 0;
 	margin-right: 16px;

diff --git a/bundles/org.eclipse.orion.client.core/web/settings/settings.html b/bundles/org.eclipse.orion.client.core/web/settings/settings.html
@@ -40,12 +40,12 @@
 				<div class="auxpane" id="categories" dojoType="dijit.layout.ContentPane" splitter="false" region="leading" style="width: 150px">
 					<div id="categoryNode">
 						<h1 id="content-title">Categories</h1> 
-						<ul id="navbar">
+						<ul id="navbar" role="tablist">
 						</ul>
 					</div>
 				</div>
-				<div dojoType="dijit.layout.ContentPane" class="mainpane" region="center" >
-					<div id="mainNode" class="settings">
+				<div dojoType="dijit.layout.ContentPane" class="mainpane" region="center">
+					<div id="mainNode" class="settings" role="tabpanel">
 					<div id="table" class="displayTable">
 				</div>
 			</div>

diff --git a/bundles/org.eclipse.orion.client.core/web/settings/settings.js b/bundles/org.eclipse.orion.client.core/web/settings/settings.js
@@ -126,7 +126,7 @@ function processInputType( category, label, item, node, ui ){
 
 		case "combo":
 
-			var select = dojo.create( "select", { onchange: "comboSelection(event)" }, node );
+			var select = dojo.create( "select", { onchange: "comboSelection(event)", role: "combobox" }, node );
 
 			select.category = category;
 			select.item = label;
@@ -219,7 +219,11 @@ function addPlugins(){
 	var item = { id: initialSettings.length, 
 				 innerHTML: "Plugins", 
 				 "class": 'navbar-item',
-				 onClick: 'showPlugins(event)' };
+				 onClick: 'showPlugins(event)',
+				 onKeypress: 'if(event.keyCode === dojo.keys.ENTER || event.keyCode === dojo.keys.SPACE) showPlugins(event)',
+				 role: "tab",
+				 tabindex: "0",
+				 "aria-selected": "false" };
 
 	addCategory( item );
 }
@@ -229,11 +233,13 @@ function addNewPlugins(){
 	if( newPluginDialog === false ){		
 		dojo.removeClass( "newpluginsdialog", "interactionClosed" );
 		dojo.addClass( "newpluginsdialog", "interactionOpen" );
+		dojo.attr("newpluginsdialog","aria-hidden", "false");
 		dojo.byId("addpluginscontrol").innerHTML = "Hide Dialog";
 		newPluginDialog = true;
 	}else{
 		dojo.removeClass( "newpluginsdialog", "interactionOpen" );
 		dojo.addClass( "newpluginsdialog", "interactionClosed" );
+		dojo.attr("newpluginsdialog","aria-hidden", "true");
 		dojo.byId("addpluginscontrol").innerHTML = "Add Plugins";
 		newPluginDialog = false;
 	} 
@@ -301,13 +307,17 @@ function showPlugins( event ){
 
 	if( selectedCategory ){
 		dojo.removeClass( selectedCategory, "navbar-item-selected" );
+		dojo.attr(selectedCategory, "aria-selected", "false");
 	}
 
 	if( event ){
 		selectedCategory = event.currentTarget;
 	}
 
 	dojo.addClass( selectedCategory, "navbar-item-selected" );
+	dojo.attr(selectedCategory, "aria-selected", "true");
+	dojo.attr(dojo.byId("mainNode"), "aria-labelledby", selectedCategory.id);
+
 
 	var tableNode = dojo.byId( 'table' );
 
@@ -321,13 +331,13 @@ function showPlugins( event ){
 
 	dojo.create( "a", { id: "oldlink", href:"../plugin/list.html", innerHTML:"Services", "class":"oldLink", onclick:"addNewPlugins()"}, titleWrapper );
 
-	dojo.create( "div", { id: "addpluginscontrol", innerHTML:"Add Plugins", "class":"additions", onclick:"addNewPlugins()"}, titleWrapper );
+	dojo.create( "div", { id: "addpluginscontrol", innerHTML:"Add Plugins", "class":"additions", onclick:"addNewPlugins()", onKeypress: 'if(event.keyCode === dojo.keys.ENTER || event.keyCode === dojo.keys.SPACE) addNewPlugins()', tabindex: "0", role: "button"}, titleWrapper );
 
 	/* 	The plugins page has a slightly different layout from the other settings pages - so this content 
 		section provides the slide down capability to reveal the dialog for adding more plugins */
 
 	var content =	'<div class="displaytable">' +
-						'<div id="newpluginsdialog" class="interactionClosed">' +
+						'<div id="newpluginsdialog" class="interactionClosed" aria-hidden="true">' +
 							'<table id="dev-table" width="100%">' +
 								'<tr>' +
 									'<td>' +
@@ -457,10 +467,13 @@ function selectCategory( event ){
 
 	if( selectedCategory ){
 		dojo.removeClass( selectedCategory, "navbar-item-selected" );
+		dojo.attr(selectedCategory, "aria-selected", "false");
 	}
-	
+
 	selectedCategory = event.currentTarget;
 	dojo.addClass( selectedCategory, "navbar-item-selected" );
+	dojo.attr(selectedCategory, "aria-selected", "true");
+	dojo.attr(dojo.byId("mainNode"), "aria-labelledby", selectedCategory.id);
 	displaySettings( selectedCategory.id );
 }
 
@@ -471,7 +484,11 @@ function drawUserInterface( settings ){
 		var item = { id: count, 
 					 innerHTML: settings[count].category, 
 					 "class": 'navbar-item',
-					 onClick: 'selectCategory(event)' };
+					 onClick: 'selectCategory(event)',
+					 onKeypress: 'if(event.keyCode === dojo.keys.ENTER || event.keyCode === dojo.keys.SPACE) selectCategory(event) ',
+					 role: "tab",
+					 tabindex: "0",
+					 "aria-selected": "false" };
 
 		addCategory( item );
 	}