From daf96927538ab2246d54ea08edb46ad9956c4819 Mon Sep 17 00:00:00 2001 From: taitus Date: Mon, 29 May 2023 10:49:16 +0200 Subject: [PATCH] Add aria-pressed to in favor against component In order to the users using screen readers know whether the button is pressed or not. --- .../in_favor_against_component.html.erb | 2 + .../shared/in_favor_against_component.rb | 11 ++++ .../debates/votes_component_spec.rb | 14 ----- .../proposals/votes_component_spec.rb | 14 ----- .../shared/in_favor_against_component_spec.rb | 54 +++++++++++++++++++ 5 files changed, 67 insertions(+), 28 deletions(-) create mode 100644 spec/components/shared/in_favor_against_component_spec.rb diff --git a/app/components/shared/in_favor_against_component.html.erb b/app/components/shared/in_favor_against_component.html.erb index b78e245f2..671215bd4 100644 --- a/app/components/shared/in_favor_against_component.html.erb +++ b/app/components/shared/in_favor_against_component.html.erb @@ -4,6 +4,7 @@ class: "like #{voted_classes[:in_favor]}", title: t("votes.agree"), "aria-label": agree_aria_label, + "aria-pressed": pressed?("yes"), method: "post", remote: true do %> <%= t("votes.agree") %> @@ -16,6 +17,7 @@ class: "unlike #{voted_classes[:against]}", title: t("votes.disagree"), "aria-label": disagree_aria_label, + "aria-pressed": pressed?("no"), method: "post", remote: true do %> <%= t("votes.disagree") %> diff --git a/app/components/shared/in_favor_against_component.rb b/app/components/shared/in_favor_against_component.rb index 8806057c6..419a51995 100644 --- a/app/components/shared/in_favor_against_component.rb +++ b/app/components/shared/in_favor_against_component.rb @@ -30,4 +30,15 @@ class Shared::InFavorAgainstComponent < ApplicationComponent def disagree_aria_label t("votes.disagree_label", title: votable.title) end + + def pressed?(value) + case current_user&.voted_as_when_voted_for(votable) + when true + value == "yes" + when false + value == "no" + else + false + end + end end diff --git a/spec/components/debates/votes_component_spec.rb b/spec/components/debates/votes_component_spec.rb index 6d1c973aa..b859f58ed 100644 --- a/spec/components/debates/votes_component_spec.rb +++ b/spec/components/debates/votes_component_spec.rb @@ -25,19 +25,5 @@ describe Debates::VotesComponent do expect(page).to have_button "I don't agree with What about the 2030 agenda?" expect(page).not_to have_content "You must sign in or sign up to continue." end - - it "does not include result percentages" do - create(:vote, votable: debate) - sign_in(create(:user)) - - render_inline component - - expect(page).to have_button count: 2 - expect(page).to have_button "I agree" - expect(page).to have_button "I disagree" - expect(page).not_to have_button text: "%" - expect(page).not_to have_button text: "100" - expect(page).not_to have_button text: "0" - end end end diff --git a/spec/components/legislation/proposals/votes_component_spec.rb b/spec/components/legislation/proposals/votes_component_spec.rb index 81649bf9f..65418b001 100644 --- a/spec/components/legislation/proposals/votes_component_spec.rb +++ b/spec/components/legislation/proposals/votes_component_spec.rb @@ -38,19 +38,5 @@ describe Legislation::Proposals::VotesComponent do expect(page).to have_button "I don't agree with Require wearing masks at home" expect(page).not_to have_content "You must sign in or sign up to continue." end - - it "does not include result percentages" do - create(:vote, votable: proposal) - sign_in(create(:user)) - - render_inline component - - expect(page).to have_button count: 2 - expect(page).to have_button "I agree" - expect(page).to have_button "I disagree" - expect(page).not_to have_button text: "%" - expect(page).not_to have_button text: "100" - expect(page).not_to have_button text: "0" - end end end diff --git a/spec/components/shared/in_favor_against_component_spec.rb b/spec/components/shared/in_favor_against_component_spec.rb new file mode 100644 index 000000000..32d88f574 --- /dev/null +++ b/spec/components/shared/in_favor_against_component_spec.rb @@ -0,0 +1,54 @@ +require "rails_helper" + +describe Shared::InFavorAgainstComponent do + let(:debate) { create(:debate) } + let(:component) { Shared::InFavorAgainstComponent.new(debate) } + let(:user) { create(:user) } + + describe "Agree and disagree buttons" do + it "does not include result percentages" do + create(:vote, votable: debate) + sign_in(user) + + render_inline component + + expect(page).to have_button count: 2 + expect(page).to have_button "I agree" + expect(page).to have_button "I disagree" + expect(page).not_to have_button text: "%" + expect(page).not_to have_button text: "100" + expect(page).not_to have_button text: "0" + end + + describe "aria-pressed attribute" do + it "is true when the in-favor button is pressed" do + debate.register_vote(user, "yes") + sign_in(user) + + render_inline component + + expect(page.find(".in-favor")).to have_css "button[aria-pressed='true']" + expect(page.find(".against")).to have_css "button[aria-pressed='false']" + end + + it "is true when the against button is pressed" do + debate.register_vote(user, "no") + sign_in(user) + + render_inline component + + expect(page.find(".in-favor")).to have_css "button[aria-pressed='false']" + expect(page.find(".against")).to have_css "button[aria-pressed='true']" + end + + it "is false when neither the 'in-favor' button nor the 'against' button are pressed" do + sign_in(user) + + render_inline component + + expect(page.find(".in-favor")).to have_css "button[aria-pressed='false']" + expect(page.find(".against")).to have_css "button[aria-pressed='false']" + end + end + end +end