Ticket #3553: taborder-based.diff

Index: tests/accordion.js
===================================================================
--- tests/accordion.js	(revision 908)
+++ tests/accordion.js	(working copy)
@@ -129,4 +129,20 @@
 	.accordion("activate", 0);
 });
 
+test("accessibility", function () {
+	expect(8);
+	var ac = $('#list1').accordion().accordion("activate", 1);
+	var headers = $(".ui-accordion-header");
+		
+	equals( headers.attr("tabindex"), "0", "tabs should have tabindex=0");
+	equals( ac.attr("role"), "tablist", "main role");
+	equals( headers.attr("role"), "tab", "tab roles");
+	equals( headers.next().attr("role"), "tabpanel", "tabpanel roles");
+	equals( headers.eq(1).attr("aria-expanded"), "true", "active tab has aria-expanded");
+	equals( headers.eq(0).attr("aria-expanded"), "false", "inactive tab has aria-expanded");
+	ac.accordion("activate", 0);
+	equals( headers.eq(0).attr("aria-expanded"), "true", "newly active tab has aria-expanded");
+	equals( headers.eq(1).attr("aria-expanded"), "false", "newly inactive tab has aria-expanded");
+});
+
 })(jQuery);
Index: ui/ui.accordion.js
===================================================================
--- ui/ui.accordion.js	(revision 908)
+++ ui/ui.accordion.js	(working copy)
@@ -41,7 +41,7 @@
 			this.element.addClass("ui-accordion");
 			$('<span class="ui-accordion-left"/>').insertBefore(options.headers);
 			$('<span class="ui-accordion-right"/>').appendTo(options.headers);
-			options.headers.addClass("ui-accordion-header").attr("tabindex", "0");
+			options.headers.addClass("ui-accordion-header");
 		}
 		
 		var maxHeight;
@@ -60,23 +60,49 @@
 				maxHeight = Math.max(maxHeight, $(this).outerHeight());
 			}).height(maxHeight);
 		}
+				
+		this.element.attr('role','tablist');
+
+		var self=this;
+		options.headers
+			.attr('role','tab')
+			.attr("tabindex", "0") // todo: remove inner link from tab order?
+			.bind('keydown', function(e) { return self._keydown(e); })
+			.next()
+			.attr('role','tabpanel');
 		
 		options.headers
 			.not(options.active || "")
+			.attr('aria-expanded','false')
 			.next()
 			.hide();
-		options.active.parent().andSelf().addClass(options.selectedClass);
+			
+		options.active.attr('aria-expanded','true')
+				.parent().andSelf().addClass(options.selectedClass);
 		
 		if (options.event) {
 			this.element.bind((options.event) + ".accordion", clickHandler);
 		}
 	},
+	
+	_keydown: function(e) {
+		if (this.options.disabled)
+			return;
+
+		if (e.keyCode == $.keyCode.SPACE) {
+			return clickHandler.call(this.element[0], {
+				target: e.target
+			});
+		}
+	},
+	
 	activate: function(index) {
 		// call clickHandler with custom event
 		clickHandler.call(this.element[0], {
 			target: findActive( this.options.headers, index )[0]
 		});
 	},
+	
 	destroy: function() {
 		this.options.headers.parent().andSelf().removeClass(this.options.selectedClass);
 		this.options.headers.prev(".ui-accordion-left").remove();
@@ -189,6 +215,8 @@
 		}
 		complete(true);
 	}
+	toHide.prev().attr('aria-expanded','false');
+	toShow.prev().attr('aria-expanded','true');
 }
 
 function clickHandler(event) {