Skip to content

Commit 47478af

Browse files
author
Rafael J. Staib
committed
Add WIA-ARIA support to steps and their related elements
1 parent 877bcd7 commit 47478af

File tree

1 file changed

+63
-23
lines changed

1 file changed

+63
-23
lines changed

‎jquery.steps.js‎

Lines changed: 63 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -739,7 +739,7 @@
739739

740740
var contentContainer = wizard.children(".content"),
741741
header = $(document.createElement(options.headerTag)).html(step.title),
742-
body = $(document.createElement(options.bodyTag)).addClass("body").hide();
742+
body = $(document.createElement(options.bodyTag));
743743

744744
if (step.contentMode == null || step.contentMode === $.fn.steps.contentMode.html)
745745
{
@@ -763,6 +763,7 @@
763763
}
764764
state.stepCount++;
765765

766+
transformBody(wizard, body, index);
766767
transformTitle(wizard, header, index);
767768

768769
state.currentStep = getStepProperties(wizard, state.currentIndex);
@@ -849,14 +850,14 @@
849850
parent = anchor.parent(),
850851
isDisabled = parent.hasClass("disabled");
851852
// Remove the class to make the anchor clickable!
852-
parent.removeClass("disabled");
853+
parent.removeClass("disabled").attr("aria-disabled", "false");
853854
anchor.click();
854855

855856
// An error occured
856857
if (oldIndex === state.currentIndex && isDisabled)
857858
{
858859
// Add the class again to disable the anchor; avoid click action.
859-
parent.addClass("disabled");
860+
parent.addClass("disabled").attr("aria-disabled", "true");
860861
return false;
861862
}
862863

@@ -912,12 +913,13 @@
912913
state.transitionShowElement = stepContents.eq(index);
913914
stepContents.eq(oldIndex).fadeOut(options.transitionEffectSpeed, function ()
914915
{
915-
var wizard = $(this).parents(":has(.steps)");
916+
var wizard = $(this).attr("aria-hidden", "true").parents(":has(.steps)");
916917
var state = wizard.data("state");
917918

918919
if (state.transitionShowElement)
919920
{
920-
state.transitionShowElement.fadeIn(options.transitionEffectSpeed);
921+
state.transitionShowElement.fadeIn(options.transitionEffectSpeed,
922+
function () { $(this).attr("aria-hidden", "false"); });
921923
state.transitionShowElement = null;
922924
}
923925
}).promise();
@@ -927,12 +929,13 @@
927929
state.transitionShowElement = stepContents.eq(index);
928930
stepContents.eq(oldIndex).slideUp(options.transitionEffectSpeed, function ()
929931
{
930-
var wizard = $(this).parents(":has(.steps)");
932+
var wizard = $(this).attr("aria-hidden", "true").parents(":has(.steps)");
931933
var state = wizard.data("state");
932934

933935
if (state.transitionShowElement)
934936
{
935-
state.transitionShowElement.slideDown(options.transitionEffectSpeed);
937+
state.transitionShowElement.slideDown(options.transitionEffectSpeed,
938+
function () { $(this).attr("aria-hidden", "false"); });
936939
state.transitionShowElement = null;
937940
}
938941
}).promise();
@@ -946,14 +949,14 @@
946949
posFadeIn = (index > oldIndex) ? outerWidth : -(outerWidth);
947950

948951
currentStep.animate({ left: posFadeOut }, options.transitionEffectSpeed,
949-
function () { $(this).hide(); }).promise();
950-
newStep.css("left", posFadeIn + "px").show();
952+
function () { $(this).hide().attr("aria-hidden", "true"); }).promise();
953+
newStep.css("left", posFadeIn + "px").show().attr("aria-hidden", "false");
951954
newStep.animate({ left: 0 }, options.transitionEffectSpeed).promise();
952955
break;
953956

954957
default:
955-
stepContents.eq(oldIndex).hide();
956-
stepContents.eq(index).show();
958+
stepContents.eq(oldIndex).hide().attr("aria-hidden", "true");
959+
stepContents.eq(index).show().attr("aria-hidden", "false");
957960
break;
958961
}
959962

@@ -987,7 +990,7 @@
987990
wizard.attr("role", "application").addClass(options.cssClass).empty().append(contentWrapper);
988991

989992
var stepTitles = contentWrapper.children(options.headerTag),
990-
stepContents = contentWrapper.children(options.bodyTag).addClass("body").hide();
993+
stepContents = contentWrapper.children(options.bodyTag);
991994

992995
if (stepTitles.length > stepContents.length)
993996
{
@@ -1012,11 +1015,17 @@
10121015
}
10131016
}
10141017

1018+
// Add WIA-ARIA support
1019+
stepContents.each(function (index)
1020+
{
1021+
transformBody(wizard, $(this), index);
1022+
});
1023+
10151024
// Make the start step visible
1016-
stepContents.eq(startIndex).show();
1025+
stepContents.eq(startIndex).show().attr("aria-hidden", "false");
10171026

10181027
var stepsWrapper = $(document.createElement(options.stepsContainerTag))
1019-
.addClass("steps").append($(document.createElement("ol")));
1028+
.addClass("steps").append($("<ol role=\"tablist\"></ol>"));
10201029
wizard.prepend(stepsWrapper);
10211030

10221031
stepTitles.each(function (index)
@@ -1030,7 +1039,8 @@
10301039

10311040
if (index > startIndex && !options.enableAllSteps)
10321041
{
1033-
$(".steps > ol > li:eq(" + index + ")", wizard).addClass("disabled");
1042+
$(".steps > ol > li:eq(" + index + ")", wizard).addClass("disabled")
1043+
.attr("aria-disabled", "true");
10341044
}
10351045
});
10361046

@@ -1063,6 +1073,25 @@
10631073
}
10641074
}
10651075

1076+
/**
1077+
* Transforms the body to a proper tabpanel.
1078+
*
1079+
* @static
1080+
* @private
1081+
* @param wizard {Object} A jQuery wizard object
1082+
* @param body {Object} A jQuery body object
1083+
* @param index {Integer} The position of the body
1084+
* @since 0.9.7
1085+
*/
1086+
function transformBody(wizard, body, index)
1087+
{
1088+
var uniqueId = getUniqueId(wizard),
1089+
uniqueBodyId = uniqueId + "-tabpanel-" + index,
1090+
uniqueHeaderId = uniqueId + "-header-" + index;
1091+
body.attr("id", uniqueBodyId).attr("role", "tabpanel").attr("aria-labelledby", uniqueHeaderId)
1092+
.addClass("body").hide().attr("aria-hidden", "true");
1093+
}
1094+
10661095
/**
10671096
* Transforms the title to a step item button.
10681097
*
@@ -1074,16 +1103,21 @@
10741103
*/
10751104
function transformTitle(wizard, header, index)
10761105
{
1077-
header.attr("id", getUniqueId(wizard) + "-" + index).attr("tabindex", "-1").addClass("title");
1078-
1079-
var options = wizard.data("options"),
1106+
var uniqueId = getUniqueId(wizard),
1107+
uniqueStepId = uniqueId + "-tab-" + index,
1108+
uniqueBodyId = uniqueId + "-tabpanel-" + index,
1109+
uniqueHeaderId = uniqueId + "-header-" + index,
1110+
options = wizard.data("options"),
10801111
state = wizard.data("state"),
10811112
stepCollection = $(".steps > ol", wizard),
10821113
title = renderTemplate(options.titleTemplate, {
10831114
index: index + 1,
10841115
title: header.html()
10851116
}),
1086-
stepItem = $("<li><a href=\"#" + header.attr("id") + "\">" + title + "</a></li>");
1117+
stepItem = $("<li role=\"tab\"><a id=\"" + uniqueStepId + "\" href=\"#" + uniqueHeaderId +
1118+
"\" aria-controls=\"" + uniqueBodyId + "\">" + title + "</a></li>");
1119+
1120+
header.attr("id", uniqueHeaderId).attr("tabindex", "-1").addClass("title");
10871121

10881122
if (index === 0)
10891123
{
@@ -1159,10 +1193,15 @@
11591193

11601194
for (var i = index; i < wizard.data("state").stepCount; i++)
11611195
{
1162-
var uniqueStepId = getUniqueId(wizard) + "-" + i,
1163-
title = $(".content > .title:eq(" + i + ")", wizard).attr("id", uniqueStepId);
1164-
$(".steps > ol > li:eq(" + i + ") > a", wizard).attr("href", "#" + uniqueStepId)
1196+
var uniqueStepId = uniqueId + "-tab-" + i,
1197+
uniqueBodyId = uniqueId + "-tabpanel-" + i,
1198+
uniqueHeaderId = uniqueId + "-header-" + i,
1199+
title = $(".content > .title:eq(" + i + ")", wizard).attr("id", uniqueHeaderId);
1200+
$(".steps > ol > li:eq(" + i + ") > a", wizard).attr("id", uniqueStepId)
1201+
.attr("aria-controls", uniqueBodyId).attr("href", "#" + uniqueHeaderId)
11651202
.html(renderTemplate(options.titleTemplate, { index: i + 1, title: title.html() }));
1203+
$(".content > .body:eq(" + i + ")", wizard).attr("id", uniqueBodyId)
1204+
.attr("aria-labelledby", uniqueHeaderId);
11661205
}
11671206
}
11681207

@@ -1192,7 +1231,8 @@
11921231
currentOrNewStep.children("a").focus();
11931232
}
11941233

1195-
currentOrNewStep.addClass("current").removeClass("disabled done").children("a").prepend(currentInfo);
1234+
currentOrNewStep.addClass("current").removeClass("disabled done")
1235+
.attr("aria-disabled", "false").children("a").prepend(currentInfo);
11961236
stepTitles.eq(index).addClass("current").next(".body").addClass("current");
11971237
}
11981238

0 commit comments

Comments
 (0)