Add aria-pressed to in comments votes component

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

app/assets/stylesheets/layout.scss

@@ -1683,7 +1683,8 @@ table {
   .in-favor button {
     @include has-fa-icon(thumbs-up, solid);
 
-    &:hover {
+    &:hover,
+    &[aria-pressed=true] {
       color: $like;
     }
   }
@@ -1691,7 +1692,8 @@ table {
   .against button {
     @include has-fa-icon(thumbs-down, solid);
 
-    &:hover {
+    &:hover,
+    &[aria-pressed=true] {
       color: $unlike;
     }
   }

app/components/comments/votes_component.html.erb

@@ -6,6 +6,7 @@
     <%= button_to vote_comment_path(comment, value: "yes"),
                   method: "post",
                   remote: can?(:vote, comment),
+                  "aria-pressed": pressed?("yes"),
                   title: t("votes.agree") do %>
       <span class="show-for-sr"><%= t("votes.agree") %></span>
     <% end %>
@@ -16,6 +17,7 @@
     <%= button_to vote_comment_path(comment, value: "no"),
                   method: "post",
                   remote: can?(:vote, comment),
+                  "aria-pressed": pressed?("no"),
                   title: t("votes.disagree") do %>
       <span class="show-for-sr"><%= t("votes.disagree") %></span>
     <% end %>

app/components/comments/votes_component.rb

@@ -1,8 +1,19 @@
 class Comments::VotesComponent < ApplicationComponent
   attr_reader :comment
-  delegate :can?, to: :helpers
+  delegate :can?, :current_user, to: :helpers
 
   def initialize(comment)
     @comment = comment
   end
+
+  def pressed?(value)
+    case current_user&.voted_as_when_voted_for(comment)
+    when true
+      value == "yes"
+    when false
+      value == "no"
+    else
+      false
+    end
+  end
 end

spec/components/comments/votes_component_spec.rb

@@ -0,0 +1,53 @@
+require "rails_helper"
+
+describe Comments::VotesComponent do
+  let(:user) { create(:user) }
+  let(:comment) { create(:comment, user: user) }
+  let(:component) { Comments::VotesComponent.new(comment) }
+
+  describe "aria-pressed attribute" do
+    it "is true when the in-favor button is pressed" do
+      comment.vote_by(voter: user, vote: "yes")
+      sign_in(user)
+
+      render_inline component
+
+      page.find(".in-favor") do |in_favor_block|
+        expect(in_favor_block).to have_css "button[aria-pressed='true']"
+      end
+
+      page.find(".against") do |against_block|
+        expect(against_block).to have_css "button[aria-pressed='false']"
+      end
+    end
+
+    it "is true when the against button is pressed" do
+      comment.vote_by(voter: user, vote: "no")
+      sign_in(user)
+
+      render_inline component
+
+      page.find(".in-favor") do |in_favor_block|
+        expect(in_favor_block).to have_css "button[aria-pressed='false']"
+      end
+
+      page.find(".against") do |against_block|
+        expect(against_block).to have_css "button[aria-pressed='true']"
+      end
+    end
+
+    it "is false when neither the 'in-favor' button nor the 'against' button are pressed" do
+      sign_in(user)
+
+      render_inline component
+
+      page.find(".in-favor") do |in_favor_block|
+        expect(in_favor_block).to have_css "button[aria-pressed='false']"
+      end
+
+      page.find(".against") do |against_block|
+        expect(against_block).to have_css "button[aria-pressed='false']"
+      end
+    end
+  end
+end