From 74e2f2b315caa1022a0e75065a83f5ffaefd738c Mon Sep 17 00:00:00 2001
From: David Craig <david@silverstripe.com>
Date: Wed, 19 Aug 2015 15:29:14 +1200
Subject: [PATCH] Improve progress bar accessibility

---
 javascript/UserForm.js                 | 8 +++++---
 templates/Includes/UserFormProgress.ss | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/javascript/UserForm.js b/javascript/UserForm.js
index 787b7ce..c00e696 100644
--- a/javascript/UserForm.js
+++ b/javascript/UserForm.js
@@ -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);
 	};
 
 	/**
diff --git a/templates/Includes/UserFormProgress.ss b/templates/Includes/UserFormProgress.ss
index 0be1d19..0097ce3 100644
--- a/templates/Includes/UserFormProgress.ss
+++ b/templates/Includes/UserFormProgress.ss
@@ -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 %>