Add aria-pressed to in favor against component

In order to the users using screen readers know whether the button is pressed
or not.

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 %>
       <span class="show-for-sr"><%= t("votes.agree") %></span>
@@ -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 %>
       <span class="show-for-sr"><%= t("votes.disagree") %></span>

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

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

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

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