From 8edcbcfd3b6b80cacd1768a2f0e3aea37ae3875f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 30 Jul 2020 13:58:07 +0200
Subject: [PATCH] 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                   |  5 -----
 app/models/budget/ballot.rb                     |  2 +-
 app/models/budget/voting_styles/base.rb         |  4 ++++
 app/views/budgets/ballot/_progress_bar.html.erb | 10 +++-------
 4 files changed, 8 insertions(+), 13 deletions(-)
 delete mode 100644 app/helpers/ballots_helper.rb

diff --git a/app/helpers/ballots_helper.rb b/app/helpers/ballots_helper.rb
deleted file mode 100644
index c6fde9c57..000000000
--- a/app/helpers/ballots_helper.rb
+++ /dev/null
@@ -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
diff --git a/app/models/budget/ballot.rb b/app/models/budget/ballot.rb
index 399982d8e..34939adcd 100644
--- a/app/models/budget/ballot.rb
+++ b/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
diff --git a/app/models/budget/voting_styles/base.rb b/app/models/budget/voting_styles/base.rb
index e407641db..87bca2d59 100644
--- a/app/models/budget/voting_styles/base.rb
+++ b/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)
diff --git a/app/views/budgets/ballot/_progress_bar.html.erb b/app/views/budgets/ballot/_progress_bar.html.erb
index 06206b7da..a068016ba 100644
--- a/app/views/budgets/ballot/_progress_bar.html.erb
+++ b/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">