tonyair
/
silverstripe-userforms
mirror of https://github.com/silverstripe/silverstripe-userforms.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve progress bar accessibility

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) {
var $newStepElement = $($('.form-step')[stepID]),
stepNumber = 0;
stepNumber = 0,
barWidth = stepID / (this.$buttons.length - 1) * 100;
// Set the current step number.
this.$buttons.each(function (i, button) {
@ -538,10 +539,11 @@ jQuery(function ($) {
});
// 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.
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 %>
<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>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$Steps.Count"></div>
</div>
<nav>
<nav aria-label="Pages in this form">
<ul class="step-buttons">
<% loop $Steps %>
<li class="step-button-wrapper<% if $First %> current<% end_if %>" data-for="$Name">
@ -16,4 +15,5 @@
</ul>
</nav>
</div>
<h2 class="progress-title"></h2>
<% end_if %>