consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use buttons to vote in the final voting

Browse Source 
As mentioned in commits 5311daadf and bb958daf0, using links combined
with JavaScript to generate POST requests to the server has a few
issues.

We're also improving the keyboard access. Previously, the links were
focusable and clickable with the keyboard. Now we're disabling the
buttons when voting isn't allowed.

Since these elements can no longer be focused, we're adding an element
with `tabindex="0"` so the "participation not allowed" message is shown,
like we do in most places.

Note we're slightly changing one test because now when hovering over the
button on Chrome, the "participation not allowed" text isn't shown; it's
only shown when hovering on the parts of the `div.ballot` element
outside the button. Since we're already rewriting the behavior of the
"participation not allowed" text in a different pull request, we aren't
going to fix this behavior.
This commit is contained in:
Javi Martín
2021-09-30 22:07:14 +02:00
parent f970ddcb86
commit 7a25c61ae6
5 changed files with 66 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/components/budgets/investments/ballot_component.html.erb
View File

@@ -8,14 +8,15 @@
<%= investment.formatted_price %>
</p>
<% if investment.should_show_ballots? %>
<%= link_to t("budgets.ballots.show.remove"),
budget_ballot_line_path(id: investment.id,
budget_id: investment.budget_id,
investments_ids: investment_ids),
class: "button button-remove-support expanded",
method: :delete,
remote: true,
"aria-label": remove_vote_aria_label %>
<%= button_to budget_ballot_line_path(id: investment.id,
budget_id: investment.budget_id,
investments_ids: investment_ids),
class: "button button-remove-support expanded",
method: :delete,
remote: true,
"aria-label": remove_vote_aria_label do %>
<%= t("budgets.ballots.show.remove") %>
<% end %>
<% end %>
</div>
<% else %>
@@ -24,30 +25,34 @@
<%= investment.formatted_price %>
</p>
<% if investment.should_show_ballots? %>
<%= link_to t("budgets.investments.investment.add"),
budget_ballot_lines_path(investment_id: investment.id,
budget_id: investment.budget_id,
investments_ids: investment_ids),
class: "button button-support expanded",
title: t("budgets.investments.investment.support_title"),
method: :post,
remote: true,
"aria-label": vote_aria_label %>
<%= button_to budget_ballot_lines_path(investment_id: investment.id,
budget_id: investment.budget_id,
investments_ids: investment_ids),
class: "button button-support expanded",
title: t("budgets.investments.investment.support_title"),
method: :post,
remote: true,
disabled: reason.present?,
"aria-label": vote_aria_label do %>
<%= t("budgets.investments.investment.add") %>
<% end %>
<% end %>
</div>
<% end %>
<% if reason.present? && !voted? %>
<div class="participation-not-allowed" style="display:none">
<p>
<small>
<%= sanitize(t("budgets.ballots.reasons_for_not_balloting.#{reason}",
verify_account: link_to_verify_account, signin: link_to_signin,
signup: link_to_signup, my_heading: link_to_my_heading,
change_ballot: link_to_change_ballot,
heading_link: heading_link(assigned_heading, budget))) %>
</small>
</p>
<div tabindex="0">
<div class="participation-not-allowed" style="display:none">
<p>
<small>
<%= sanitize(t("budgets.ballots.reasons_for_not_balloting.#{reason}",
verify_account: link_to_verify_account, signin: link_to_signin,
signup: link_to_signup, my_heading: link_to_my_heading,
change_ballot: link_to_change_ballot,
heading_link: heading_link(assigned_heading, budget))) %>
</small>
</p>
</div>
</div>
<% end %>
</div>