Accordion: Added .ui-accordion-heading class to header's first child. Fixes #6743 - Accordion: Add .ui-accordion-heading class.

Author: Adovenmuehle

tests/unit/accordion/accordion.html

@@ -64,7 +64,7 @@ <h2 id="qunit-userAgent"></h2>
 
 	<div>
 		<div id="list1" class="foo">
-	        <a class="bar">There is one obvious advantage:</a>
+	        <h3 class="bar"><a class="anchor">There is one obvious advantage:</a></h3>
 	        <div class="foo">
 	            <p>
 	                You've seen it coming!
@@ -74,7 +74,7 @@ <h2 id="qunit-userAgent"></h2>
 	                Well, at least no free beer. Perhaps a bear, if you can afford it.
 	            </p>
 	        </div>
-	        <a class="bar">Now that you've got...</a>
+	        <h3 class="bar"><a class="anchor">Now that you've got...</a></h3>
 	        <div class="foo">
 	            <p>
 	                your bear, you have to admit it!
@@ -85,7 +85,7 @@ <h2 id="qunit-userAgent"></h2>
 	                We could talk about renting one.
 	            </p>
 	        </div>
-	        <a class="bar">Rent one bear, ...</a>
+	        <h3 class="bar"><a class="anchor">Rent one bear, ...</a></h3>
 	        <div class="foo">
 	            <p>
 	                get two for three beer.

tests/unit/accordion/accordion_core.js

@@ -13,6 +13,13 @@ test("handle click on header-descendant", function() {
 	state(ac, 0, 1, 0);
 });
 
+test("ui-accordion-heading class added to headers anchor", function() {
+	expect(1);
+	var ac = $("#list1").accordion();
+	var anchors = $(".ui-accordion-heading");
+	equals( anchors.length, "3"); 
+});
+
 test("accessibility", function () {
 	expect(9);
 	var ac = $('#list1').accordion().accordion("activate", 1);

tests/unit/accordion/accordion_methods.js

@@ -95,7 +95,7 @@ test("activate, boolean, collapsible: false", function() {
 });
 
 test("activate, string expression", function() {
-	var ac = $('#list1').accordion({ active: "a:last" });
+	var ac = $('#list1').accordion({ active: "h3:last" });
 	state(ac, 0, 0, 1);
 	ac.accordion("activate", ":first");
 	state(ac, 1, 0, 0);
@@ -106,11 +106,11 @@ test("activate, string expression", function() {
 });
 
 test("activate, jQuery or DOM element", function() {
-	var ac = $('#list1').accordion({ active: $("#list1 a:last") });
+	var ac = $('#list1').accordion({ active: $("#list1 h3:last") });
 	state(ac, 0, 0, 1);
-	ac.accordion("activate", $("#list1 a:first"));
+	ac.accordion("activate", $("#list1 h3:first"));
 	state(ac, 1, 0, 0);
-	ac.accordion("activate", $("#list1 a")[1]);
+	ac.accordion("activate", $("#list1 h3")[1]);
 	state(ac, 0, 1, 0);
 });
 

tests/unit/accordion/accordion_options.js

@@ -13,28 +13,28 @@ test("{ active: first child }, default", function() {
 
 test("{ active: Selector }", function() {
 	var ac = $("#list1").accordion({
-		active: "a:last"
+		active: "h3:last"
 	});
 	state(ac, 0, 0, 1);
-	ac.accordion('option', 'active', "a:eq(1)");
+	ac.accordion('option', 'active', "h3:eq(1)");
 	state(ac, 0, 1, 0);
 });
 
 test("{ active: Element }", function() {
 	var ac = $("#list1").accordion({
-		active: $("#list1 a:last")[0]
+		active: $("#list1 h3:last")[0]
 	});
 	state(ac, 0, 0, 1);
-	ac.accordion('option', 'active', $("#list1 a:eq(1)")[0]);
+	ac.accordion('option', 'active', $("#list1 h3:eq(1)")[0]);
 	state(ac, 0, 1, 0);
 });
 
 test("{ active: jQuery Object }", function() {
 	var ac = $("#list1").accordion({
-		active: $("#list1 a:last")
+		active: $("#list1 h3:last")
 	});
 	state(ac, 0, 0, 1);
-	ac.accordion('option', 'active', $("#list1 a:eq(1)"));
+	ac.accordion('option', 'active', $("#list1 h3:eq(1)"));
 	state(ac, 0, 1, 0);
 });
 

themes/base/jquery.ui.accordion.css

@@ -12,8 +12,8 @@
 .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
 .ui-accordion .ui-accordion-li-fix { display: inline; }
 .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
-.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
-.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
+.ui-accordion .ui-accordion-heading { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
+.ui-accordion-icons .ui-accordion-heading { padding-left: 2.2em; }
 .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
 .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
-.ui-accordion .ui-accordion-content-active { display: block; }
+.ui-accordion .ui-accordion-content-active { display: block; }

ui/jquery.ui.accordion.js

@@ -75,6 +75,7 @@ $.widget( "ui.accordion", {
 
 		self.headers.next()
 			.addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" );
+		self.headers.find( ":first-child" ).addClass( "ui-accordion-heading" );
 
 		if ( options.navigation ) {
 			var current = self.element.find( "a" ).filter( options.navigationFilter ).eq( 0 );
@@ -177,6 +178,7 @@ $.widget( "ui.accordion", {
 
 		this.headers.find( "a" ).removeAttr( "tabIndex" );
 		this._destroyIcons();
+		this.headers.find( "a:first-child" ).removeClass( "ui-accordion-heading" );
 		var contents = this.headers.next()
 			.css( "display", "" )
 			.removeAttr( "role" )