tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-10-22 17:05:42 +02:00
Code Issues Projects Releases Wiki Activity

Improve progress bar accessibility

Browse Source
This commit is contained in:
David Craig 2015-08-19 15:29:14 +12:00
parent ee62d8956f
commit 74e2f2b315
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
javascript/UserForm.js
View File

@ -499,7 +499,8 @@ jQuery(function ($) {
*/ */
ProgressBar.prototype.update = function (stepID) { ProgressBar.prototype.update = function (stepID) {
var $newStepElement = $($('.form-step')[stepID]), var $newStepElement = $($('.form-step')[stepID]),
stepNumber = 0; stepNumber = 0,
barWidth = stepID / (this.$buttons.length - 1) * 100;
// Set the current step number. // Set the current step number.
this.$buttons.each(function (i, button) { this.$buttons.each(function (i, button) {
@ -538,10 +539,11 @@ jQuery(function ($) {
}); });
// Update the progress bar's title with the new step's title. // Update the progress bar's title with the new step's title.
this.$el.find('.progress-title').text($newStepElement.data('title')); this.$el.siblings('.progress-title').text($newStepElement.data('title'));
// Update the width of the progress bar. // Update the width of the progress bar.
this.$el.find('.progress-bar').width(stepID / (this.$buttons.length - 1) * 100 + '%'); barWidth = barWidth ? barWidth + '%' : '';
this.$el.find('.progress-bar').width(barWidth);
}; };
/** /**

4
templates/Includes/UserFormProgress.ss
View File

@ -1,11 +1,10 @@
<% if $Steps.Count > 1 %> <% if $Steps.Count > 1 %>
<div id="userform-progress" class="userform-progress" aria-hidden="true" style="display:none;"> <div id="userform-progress" class="userform-progress" aria-hidden="true" style="display:none;">
<h2 class="progress-title"></h2>
<p>Page <span class="current-step-number">1</span> of <span class="total-step-number">$Steps.Count</span></p> <p>Page <span class="current-step-number">1</span> of <span class="total-step-number">$Steps.Count</span></p>
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$Steps.Count"></div> <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$Steps.Count"></div>
</div> </div>
<nav> <nav aria-label="Pages in this form">
<ul class="step-buttons"> <ul class="step-buttons">
<% loop $Steps %> <% loop $Steps %>
<li class="step-button-wrapper<% if $First %> current<% end_if %>" data-for="$Name"> <li class="step-button-wrapper<% if $First %> current<% end_if %>" data-for="$Name">
@ -16,4 +15,5 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<h2 class="progress-title"></h2>
<% end_if %> <% end_if %>