Substitute ol by ul for steps and add aria-selected

Rafael J. Staib · Rafael J. Staib · commit 90b0615bf6b4 · 2013-05-29T18:16:09.000+02:00
diff --git a/demo/css/jquery.steps.css b/demo/css/jquery.steps.css
@@ -39,35 +39,35 @@
     font-weight: bold;
 }
 
-.wizard > .steps > ol > li,
-.wizard > .actions > ul > li
+.wizard li[role="tab"],
+.wizard > .actions li
 {
     float: left;
 }
 
-.wizard > .steps a
+.wizard li[role="tab"] a
 {
     background: #999;
 }
 
-.wizard > .steps .disabled a
+.wizard li[role="tab"].disabled a
 {
     background: #ccc;
     cursor: default;
 }
 
-.wizard > .steps .current a
+.wizard li[role="tab"].current a
 {
     background: rgb(241, 101, 41);
     cursor: default;
 }
 
-.wizard > .steps .done a
+.wizard li[role="tab"].done a
 {
     background: #4cff00;
 }
 
-.wizard > .steps .error a
+.wizard li[role="tab"].error a
 {
     background: #f00;
 }
diff --git a/jquery.steps.js b/jquery.steps.js
@@ -633,7 +633,7 @@
         var wizard = $(this),
             options = wizard.data("options"),
             state = wizard.data("state"),
-            currentStep = $(".steps li:eq(" + state.currentIndex + ")", wizard);
+            currentStep = $("li[role=tab]:eq(" + state.currentIndex + ")", wizard);
 
         if (wizard.triggerHandler("finishing", [state.currentIndex]))
         {
@@ -668,7 +668,7 @@
         var contentContainer = wizard.children(".content");
         $(".title:eq(" + index + ")", contentContainer).remove();
         $(".body:eq(" + index + ")", contentContainer).remove();
-        $(".steps > ol > li:eq(" + index + ")", wizard).remove();
+        $("li[role=tab]:eq(" + index + ")", wizard).remove();
 
         // Reset state values
         if (state.currentIndex > index)
@@ -682,13 +682,13 @@
         // Set the "first" class to the new first step button 
         if (index === 0)
         {
-            $(".steps > ol > li:first", wizard).addClass("first");
+            $("li[role=tab]:first", wizard).addClass("first");
         }
 
         // Set the "last" class to the new last step button 
         if (index === state.stepCount)
         {
-            $(".steps > ol > li:eq(" + index + ")", wizard).addClass("last");
+            $("li[role=tab]:eq(" + index + ")", wizard).addClass("last");
         }
 
         updateSteps(wizard, index);
@@ -769,7 +769,7 @@
         state.currentStep = getStepProperties(wizard, state.currentIndex);
 
         // Add click event
-        $(".steps > ol > li:eq(" + index + ") > a", wizard).bind("click.steps", stepClickHandler);
+        $("li[role=tab]:eq(" + index + ") > a", wizard).bind("click.steps", stepClickHandler);
 
         updateSteps(wizard, index);
         refreshActionState(wizard);
@@ -810,7 +810,7 @@
 
             if (opts.autoFocus && _uniqueId === 1)
             {
-                $(".steps li.current a", $this).focus();
+                $("li[role=tab].current a", $this).focus();
             }
 
             $this.bind("finishing.steps", opts.onFinishing);
@@ -1025,7 +1025,7 @@
         stepContents.eq(startIndex).show().attr("aria-hidden", "false");
 
         var stepsWrapper = $(document.createElement(options.stepsContainerTag))
-            .addClass("steps").append($("<ol role=\"tablist\"></ol>"));
+            .addClass("steps").append($("<ul role=\"tablist\"></ul>"));
         wizard.prepend(stepsWrapper);
 
         stepTitles.each(function (index)
@@ -1034,12 +1034,12 @@
 
             if (index < startIndex)
             {
-                $(".steps > ol > li:eq(" + index + ")", wizard).addClass("done");
+                $("li[role=tab]:eq(" + index + ")", wizard).addClass("done");
             }
 
             if (index > startIndex && !options.enableAllSteps)
             {
-                $(".steps > ol > li:eq(" + index + ")", wizard).addClass("disabled")
+                $("li[role=tab]:eq(" + index + ")", wizard).addClass("disabled")
                     .attr("aria-disabled", "true");
             }
         });
@@ -1109,7 +1109,7 @@
             uniqueHeaderId = uniqueId + "-header-" + index,
             options = wizard.data("options"),
             state = wizard.data("state"),
-            stepCollection = $(".steps > ol", wizard),
+            stepCollection = $(".steps > ul", wizard),
             title = renderTemplate(options.titleTemplate, {
                 index: index + 1,
                 title: header.html()
@@ -1197,7 +1197,7 @@
                 uniqueBodyId = uniqueId + "-tabpanel-" + i,
                 uniqueHeaderId = uniqueId + "-header-" + i,
                 title = $(".content > .title:eq(" + i + ")", wizard).attr("id", uniqueHeaderId);
-            $(".steps > ol > li:eq(" + i + ") > a", wizard).attr("id", uniqueStepId)
+            $("li[role=tab]:eq(" + i + ") > a", wizard).attr("id", uniqueStepId)
                 .attr("aria-controls", uniqueBodyId).attr("href", "#" + uniqueHeaderId)
                 .html(renderTemplate(options.titleTemplate, { index: i + 1, title: title.html() }));
             $(".content > .body:eq(" + i + ")", wizard).attr("id", uniqueBodyId)
@@ -1225,13 +1225,13 @@
 
         if (oldIndex != null)
         {
-            var oldStep = steps.eq(oldIndex).addClass("done").removeClass("current error");
+            var oldStep = steps.eq(oldIndex).addClass("done").removeClass("current error").attr("aria-selected", "false");
             stepTitles.eq(oldIndex).removeClass("current").next(".body").removeClass("current");
             currentInfo = $("a > .current-info", oldStep);
             currentOrNewStep.children("a").focus();
         }
 
-        currentOrNewStep.addClass("current").removeClass("disabled done")
+        currentOrNewStep.addClass("current").attr("aria-selected", "true").removeClass("disabled done")
             .attr("aria-disabled", "false").children("a").prepend(currentInfo);
         stepTitles.eq(index).addClass("current").next(".body").addClass("current");
     }
diff --git a/test/tests.js b/test/tests.js
@@ -38,7 +38,7 @@ test("stepClassFirstAndLast", 12, function ()
 {
     function checkOnlyFirstItemHasClass()
     {
-        var steps = $("#vis > .steps > ol > li");
+        var steps = $("#vis li[role=tab]");
         for (var i = 0; i < steps.length; i++)
         {
             if (i > 0 && steps.eq(i).hasClass("first"))
@@ -51,7 +51,7 @@ test("stepClassFirstAndLast", 12, function ()
 
     function checkOnlyLastItemHasClass()
     {
-        var steps = $("#vis > .steps > ol > li");
+        var steps = $("#vis li[role=tab]");
         for (var i = 0; i < steps.length; i++)
         {
             if (i < (steps.length - 1) && steps.eq(i).hasClass("last"))
@@ -96,7 +96,7 @@ test("stepClassCurrent", 6, function ()
 {
     function checkOnlyItemOnPositionHasClass(index)
     {
-        var steps = $("#vis > .steps > ol > li");
+        var steps = $("#vis li[role=tab]");
         for (var i = 0; i < steps.length; i++)
         {
             if (i !== index && steps.eq(i).hasClass("current"))
@@ -135,28 +135,28 @@ test("stepClassDisabledAndDone", 12, function ()
 {
     function checkOnlyItemAfterPositionHasClass(index)
     {
-        var steps = $("#vis > .steps > ol > li");
+        var steps = $("#vis li[role=tab]");
         for (var i = 0; i < steps.length; i++)
         {
             if (i <= index && steps.eq(i).hasClass("disabled"))
             {
                 return false;
             }
         }
-        return (index > (steps.length - 1)) ? $("#vis > .steps > ol > li:gt(" + index + ")").hasClass("disabled") : true;
+        return (index > (steps.length - 1)) ? $("#vis li[role=tab]:gt(" + index + ")").hasClass("disabled") : true;
     }
 
     function checkOnlyItemBeforePositionHasClass(index)
     {
-        var steps = $("#vis > .steps > ol > li");
+        var steps = $("#vis li[role=tab]");
         for (var i = 0; i < steps.length; i++)
         {
             if (i >= index && steps.eq(i).hasClass("done"))
             {
                 return false;
             }
         }
-        return (index > 0) ? $("#vis > .steps > ol > li:lt(" + index + ")").hasClass("done") : true;
+        return (index > 0) ? $("#vis li[role=tab]:lt(" + index + ")").hasClass("done") : true;
     }
 
     ok(checkOnlyItemAfterPositionHasClass(0), "Valid after init (disabled)!");

Original file line number	Diff line number	Diff line change
`@@ -39,35 +39,35 @@`
`39`	`39`	`font-weight: bold;`
`40`	`40`	`}`
`41`	`41`
`42`		`-.wizard > .steps > ol > li,`
`43`		`-.wizard > .actions > ul > li`
	`42`	`+.wizard li[role="tab"],`
	`43`	`+.wizard > .actions li`
`44`	`44`	`{`
`45`	`45`	`float: left;`
`46`	`46`	`}`
`47`	`47`
`48`		`-.wizard > .steps a`
	`48`	`+.wizard li[role="tab"] a`
`49`	`49`	`{`
`50`	`50`	`background: #999;`
`51`	`51`	`}`
`52`	`52`
`53`		`-.wizard > .steps .disabled a`
	`53`	`+.wizard li[role="tab"].disabled a`
`54`	`54`	`{`
`55`	`55`	`background: #ccc;`
`56`	`56`	`cursor: default;`
`57`	`57`	`}`
`58`	`58`
`59`		`-.wizard > .steps .current a`
	`59`	`+.wizard li[role="tab"].current a`
`60`	`60`	`{`
`61`	`61`	`background: rgb(241, 101, 41);`
`62`	`62`	`cursor: default;`
`63`	`63`	`}`
`64`	`64`
`65`		`-.wizard > .steps .done a`
	`65`	`+.wizard li[role="tab"].done a`
`66`	`66`	`{`
`67`	`67`	`background: #4cff00;`
`68`	`68`	`}`
`69`	`69`
`70`		`-.wizard > .steps .error a`
	`70`	`+.wizard li[role="tab"].error a`
`71`	`71`	`{`
`72`	`72`	`background: #f00;`
`73`	`73`	`}`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ test("stepClassFirstAndLast", 12, function ()`
`38`	`38`	`{`
`39`	`39`	`function checkOnlyFirstItemHasClass()`
`40`	`40`	`{`
`41`		`- var steps = $("#vis > .steps > ol > li");`
	`41`	`+ var steps = $("#vis li[role=tab]");`
`42`	`42`	`for (var i = 0; i < steps.length; i++)`
`43`	`43`	`{`
`44`	`44`	`if (i > 0 && steps.eq(i).hasClass("first"))`
`@@ -51,7 +51,7 @@ test("stepClassFirstAndLast", 12, function ()`
`51`	`51`
`52`	`52`	`function checkOnlyLastItemHasClass()`
`53`	`53`	`{`
`54`		`- var steps = $("#vis > .steps > ol > li");`
	`54`	`+ var steps = $("#vis li[role=tab]");`
`55`	`55`	`for (var i = 0; i < steps.length; i++)`
`56`	`56`	`{`
`57`	`57`	`if (i < (steps.length - 1) && steps.eq(i).hasClass("last"))`
`@@ -96,7 +96,7 @@ test("stepClassCurrent", 6, function ()`
`96`	`96`	`{`
`97`	`97`	`function checkOnlyItemOnPositionHasClass(index)`
`98`	`98`	`{`
`99`		`- var steps = $("#vis > .steps > ol > li");`
	`99`	`+ var steps = $("#vis li[role=tab]");`
`100`	`100`	`for (var i = 0; i < steps.length; i++)`
`101`	`101`	`{`
`102`	`102`	`if (i !== index && steps.eq(i).hasClass("current"))`
`@@ -135,28 +135,28 @@ test("stepClassDisabledAndDone", 12, function ()`
`135`	`135`	`{`
`136`	`136`	`function checkOnlyItemAfterPositionHasClass(index)`
`137`	`137`	`{`
`138`		`- var steps = $("#vis > .steps > ol > li");`
	`138`	`+ var steps = $("#vis li[role=tab]");`
`139`	`139`	`for (var i = 0; i < steps.length; i++)`
`140`	`140`	`{`
`141`	`141`	`if (i <= index && steps.eq(i).hasClass("disabled"))`
`142`	`142`	`{`
`143`	`143`	`return false;`
`144`	`144`	`}`
`145`	`145`	`}`
`146`		`- return (index > (steps.length - 1)) ? $("#vis > .steps > ol > li:gt(" + index + ")").hasClass("disabled") : true;`
	`146`	`+ return (index > (steps.length - 1)) ? $("#vis li[role=tab]:gt(" + index + ")").hasClass("disabled") : true;`
`147`	`147`	`}`
`148`	`148`
`149`	`149`	`function checkOnlyItemBeforePositionHasClass(index)`
`150`	`150`	`{`
`151`		`- var steps = $("#vis > .steps > ol > li");`
	`151`	`+ var steps = $("#vis li[role=tab]");`
`152`	`152`	`for (var i = 0; i < steps.length; i++)`
`153`	`153`	`{`
`154`	`154`	`if (i >= index && steps.eq(i).hasClass("done"))`
`155`	`155`	`{`
`156`	`156`	`return false;`
`157`	`157`	`}`
`158`	`158`	`}`
`159`		`- return (index > 0) ? $("#vis > .steps > ol > li:lt(" + index + ")").hasClass("done") : true;`
	`159`	`+ return (index > 0) ? $("#vis li[role=tab]:lt(" + index + ")").hasClass("done") : true;`
`160`	`160`	`}`
`161`	`161`
`162`	`162`	`ok(checkOnlyItemAfterPositionHasClass(0), "Valid after init (disabled)!");`