Fix aria-valuenow attibute in ballot progress bar

We were setting it to 0, and so screen reader users might be confused by
it.

The easiest way to reuse the code and using it for both this attribute
and the width of the progress bar is to move this method to the voting
style, just like the other methods used in this view.

Note the progressbar ARIA role might not be right, since this isn't a
task which is "progressing", but an indicator of the amount spent and
amount available, which is exactly what the <meter> HTML5 tag was
designed for.

We might use a <meter> tag in the future. For now, I'm leaving it as it
is because I'm not certain about how well <meter> is supported in
accessibility tools, and because it's definitely not supported in
Internet Explorer 11, which we haven't officially dropped support for.

app/helpers/ballots_helper.rb

@@ -1,5 +0,0 @@
-module BallotsHelper
-  def progress_bar_width(amount_available, amount_spent)
-    (amount_spent / amount_available.to_f * 100).to_s + "%"
-  end
-end

app/models/budget/ballot.rb

@@ -66,7 +66,7 @@ class Budget
     delegate :amount_available, :amount_available_info, :amount_spent, :amount_spent_info,
              :amount_limit_info, :change_vote_info, :enough_resources?, :formatted_amount_available,
              :formatted_amount_limit, :formatted_amount_spent, :not_enough_resources_error,
-             :reason_for_not_being_ballotable, :voted_info,
+             :percentage_spent, :reason_for_not_being_ballotable, :voted_info,
              to: :voting_style
 
     private

app/models/budget/voting_styles/base.rb

@@ -34,6 +34,10 @@ class Budget::VotingStyles::Base
            amount: formatted_amount_limit(heading))
   end
 
+  def percentage_spent(heading)
+    100.0 * amount_spent(heading) / amount_limit(heading)
+  end
+
   private
 
     def investments(heading)

app/views/budgets/ballot/_progress_bar.html.erb

@@ -4,20 +4,16 @@
 
 <div class="progress" role="progressbar" tabindex="0"
      id="progress"
-     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+     aria-valuenow="<%= @ballot.percentage_spent(@heading) %>" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-meter"
-       style="width:
-       <%= progress_bar_width(@budget.heading_price(@heading),
-                              @ballot.amount_spent(@heading)) %>">
+       style="width: <%= @ballot.percentage_spent(@heading) %>%">
   </div>
 </div>
 
 <div class="progress spent-amount-progress" role="progressbar" tabindex="0"
      aria-valuenow="20" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
   <span class="progress-meter spent-amount-meter"
-        style="width:
-        <%= progress_bar_width(@budget.heading_price(@heading),
-                               @ballot.amount_spent(@heading)) %>">
+        style="width: <%= @ballot.percentage_spent(@heading) %>%">
     <p id="amount-spent" class="progress-meter-text spent-amount-text">
       <small><%= t("budgets.progress_bar.assigned") %></small><%= @ballot.formatted_amount_spent(@heading) %>
       <span id="amount-available" class="amount-available">