Bug 349591 - [client] accessibility in the navigator

bundles/org.eclipse.orion.client.core/web/navigate/table.html

@@ -58,7 +58,7 @@
 		<div id="rightPane" dojoType="dijit.layout.BorderContainer" region="center" design="headline" liveSplitters="false" splitter="false" gutters="false">
 			<div class="toolbar" id="pageToolbar" dojoType="dijit.layout.ContentPane" splitter="false" region="top">
 			</div>
-			<div class="mainpane" tabindex="0"  id="explorer-tree" dojoType="dijit.layout.ContentPane" splitter="false"region="center">
+			<div class="mainpane" tabindex="0" role="tree" aria-label="Navigator" aria-readonly="true" aria-multiselectable="true" id="explorer-tree" dojoType="dijit.layout.ContentPane" splitter="false" region="center">
 				<!-- Breadcrumbs, tree content go here -->
 			</div>
 		</div>

bundles/org.eclipse.orion.client.core/web/orion/explorer-table.js

@@ -130,8 +130,9 @@ define(['require', 'dojo', 'orion/util', 'orion/explorer', 'orion/explorerNavHan
 			if (item.Directory) {
 				// defined in ExplorerRenderer.  Sets up the expand/collapse behavior
 				this.getExpandImage(tableRow, span);
-				link = dojo.create("a", {className: "navlinkonpage", id: tableRow.id+"NameColumn", href: "#" + item.ChildrenLocation}, span, "last");
+				link = dojo.create("a", {className: "navlinkonpage", id: tableRow.id+"NameColumn", href: "#" + item.ChildrenLocation, tabindex: "-1"}, span, "last");
 				dojo.place(document.createTextNode(item.Name), link, "last");
+				dojo.attr(tableRow, "aria-expanded", "false");
 			} else {
 				var i;			
 				// Images: always generate link to file. Non-images: use the "open with" href if one matches,
@@ -158,11 +159,18 @@ define(['require', 'dojo', 'orion/util', 'orion/explorer', 'orion/explorerNavHan
 					href = this.defaultEditor.hrefCallback({items: item});
 				}				
 				// link with file image and name
-				link = dojo.create("a", {className: "navlink", id: tableRow.id+"NameColumn", href: href}, span, "last");
+				link = dojo.create("a", {className: "navlink", id: tableRow.id+"NameColumn", href: href, tabindex: "-1"}, span, "last");
 				addImageToLink(contentType, link);
 				dojo.place(document.createTextNode(item.Name), link, "last");
 			}
+			dojo.attr(tableRow, "aria-labelledby", tableRow.id+"NameColumn");
 			this.explorer.registry.getService("orion.page.command").renderCommands(span, "object", item, this.explorer, "tool", false, null, "commandActiveItem", "commandInactiveItem");
+			var actionsButton = dojo.query('.dijitButtonContents', span)[0];
+			dojo.attr(actionsButton, "tabindex", "-1");
+			dojo.connect(actionsButton, "onfocus", function() {
+				dojo.byId("explorer-tree").focus();
+			});
+
 			return col;
 		case 1:
 			var dateColumn = document.createElement('td');
@@ -182,6 +190,9 @@ define(['require', 'dojo', 'orion/util', 'orion/explorer', 'orion/explorerNavHan
 					dateColumn.style.cursor ="default";
 				});
 			}
+			dateColumn.id = tableRow.id+"DateColumn"; 
+			var descriptionIds = dojo.attr(tableRow, "aria-describedby");
+			dojo.attr(tableRow, "aria-describedby", descriptionIds ? descriptionIds + " " + tableRow.id+"DateColumn" : tableRow.id+"DateColumn");
 
 			return dateColumn;
 		case 2:
@@ -192,6 +203,10 @@ define(['require', 'dojo', 'orion/util', 'orion/explorer', 'orion/explorerNavHan
 				sizeColumn.innerHTML = dojo.number.format(Math.ceil(kb)) + " KB";
 			}
 			dojo.style(sizeColumn, "textAlign", "right");
+			sizeColumn.id = tableRow.id+"SizeColumn"; 
+			var descriptionIds = dojo.attr(tableRow, "aria-describedby");
+			dojo.attr(tableRow, "aria-describedby", descriptionIds ? descriptionIds + " " + tableRow.id+"SizeColumn" : tableRow.id+"SizeColumn");
+
 			return sizeColumn;
 		}
 	};

bundles/org.eclipse.orion.client.core/web/orion/explorer.js

@@ -265,25 +265,30 @@ exports.ExplorerRenderer = (function() {
 			}
 		},
 		getCheckboxColumn: function(item, tableRow){
+			dojo.attr(tableRow, "aria-selected", "undefined");
 			if (this._useCheckboxSelection) {
 				var checkColumn = document.createElement('td');
 				var check = document.createElement("span");
 				check.id = this.getCheckBoxId(tableRow.id);
 				dojo.addClass(check, "selectionCheckmark");
+				dojo.attr(tableRow, "aria-checked", "false");
 				check.itemId = tableRow.id;
 				if(this.getCheckedFunc){
 					check.checked = this.getCheckedFunc(item);
 					if(this._highlightSelection){
 						dojo.toggleClass(tableRow, "checkedRow", check.checked);
 					}
 					dojo.toggleClass(check, "selectionCheckmarkChecked", check.checked);
+					dojo.attr(tableRow, "aria-checked", check.checked.toString());
 				}
 				checkColumn.appendChild(check);
 				dojo.connect(check, "onclick", dojo.hitch(this, function(evt) {
 					var newValue = evt.target.checked ? false : true;
 					this.onCheck(tableRow, evt.target, newValue, true);
 				}));
 				return checkColumn;
+			} else {
+				dojo.attr(tableRow, "aria-checked", "undefined");
 			}
 		},
 
@@ -297,6 +302,7 @@ exports.ExplorerRenderer = (function() {
 				dojo.toggleClass(tableRow, "checkedRow", checked);
 			}
 			dojo.toggleClass(checkBox, "selectionCheckmarkChecked", checked);
+			dojo.attr(tableRow, "aria-checked", checked.toString());
 			if(this.onCheckedFunc){
 				this.onCheckedFunc(checkBox.itemId, checked, manually);
 			}
@@ -335,6 +341,7 @@ exports.ExplorerRenderer = (function() {
 						if (check) {
 							check.checked = true;
 							dojo.addClass(check, "selectionCheckmarkChecked");
+							dojo.attr(tableRow, "aria-checked", "true");
 						}
 					}
 				}
@@ -546,6 +553,7 @@ exports.SelectionRenderer = (function(){
 	SelectionRenderer.prototype.renderRow = function(item, tableRow) {
 		dojo.style(tableRow, "verticalAlign", "baseline");
 		dojo.addClass(tableRow, "treeTableRow");
+		dojo.attr(tableRow, "role", "treeitem");
 
 		var checkColumn = this.getCheckboxColumn(item, tableRow);
 		if(checkColumn) {

bundles/org.eclipse.orion.client.core/web/orion/explorerNavHandler.js

@@ -162,6 +162,7 @@ exports.ExplorerNavHandler = (function() {
 			var currentRow = this.getRowDiv(model);
 			if(currentRow) {
 				dojo.toggleClass(currentRow, "treeIterationCursor", on);
+				dojo.attr(this.explorer.myTree._parent, "aria-activedescendant", currentRow.id);
 			}
 		},
 
@@ -254,7 +255,18 @@ exports.ExplorerNavHandler = (function() {
 			}
 			return false;
 		},
+
+		_activateOptions: function() {
+			var currentRow = this.getRowDiv(this._modelIterator.cursor());
+			var actionsButtonNode = dojo.query('.dijitButtonContents', currentRow)[0];
+			if(actionsButtonNode) {
+				var actionsButton = dijit.byId(actionsButtonNode.id);
 
+				actionsButton.toggleDropDown();
+				actionsButton.dropDown.focus();
+			}
+		},
+
 		onCollapse: function(model)	{
 			if(this._modelIterator.collapse(model)){
 				this.cursorOn();
@@ -319,7 +331,12 @@ exports.ExplorerNavHandler = (function() {
 		},
 
 		//Space key toggles the check box on the current row if the renderer uses check box
+		//If the shift key is pressed, it instead activates the actions menu if present.
 		onSpace: function(e) {
+			if(e.shiftKey) {
+				this._activateOptions();
+				return false;
+			}
 			this._checkRow(null, true);
 			e.preventDefault();
 		},

bundles/org.eclipse.orion.client.core/web/orion/treetable.js

@@ -104,6 +104,7 @@ define(['dojo'], function(dojo) {
 				var row = document.createElement('tr');
 				row.id = this._treeModel.getId(children[i]);
 				row._depth = indentLevel;
+				dojo.attr(row, "aria-level", indentLevel + 1);
 				// This is a perf problem and potential leak because we're bashing a dom node with
 				// a javascript object.  (Whereas above we are using simple numbers/strings). 
 				// We should consider an item map.
@@ -145,6 +146,7 @@ define(['dojo'], function(dojo) {
 					// If the row should be expanded
 					if (row && (forceExpand || row._expanded)) {
 						row._expanded = true;
+						dojo.attr(row, "aria-expanded", "true");
 						this._removeChildRows(parentId);
 						if(children){
 							this._generateChildren(children, row._depth+1, row, "after");
@@ -236,6 +238,7 @@ define(['dojo'], function(dojo) {
 						postExpandFunc.apply(this, args);
 					}
 				});
+				dojo.attr(row, "aria-expanded", "true");
 			}
 		}, 
 
@@ -281,6 +284,7 @@ define(['dojo'], function(dojo) {
 				row._expanded = false;
 				this._removeChildRows(id);
 				this._rowsChanged();
+				dojo.attr(row, "aria-expanded", "false");
 			}
 			if(this._onCollapse){
 				this._onCollapse(row._item);