diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 9c3780f56..d16c4f9be 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/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;
}
}
diff --git a/app/components/comments/votes_component.html.erb b/app/components/comments/votes_component.html.erb
index 9e3deae86..155ba9ae4 100644
--- a/app/components/comments/votes_component.html.erb
+++ b/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 %>
<%= t("votes.agree") %>
<% 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 %>
<%= t("votes.disagree") %>
<% end %>
diff --git a/app/components/comments/votes_component.rb b/app/components/comments/votes_component.rb
index d93a24b0f..701b402f9 100644
--- a/app/components/comments/votes_component.rb
+++ b/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
diff --git a/spec/components/comments/votes_component_spec.rb b/spec/components/comments/votes_component_spec.rb
new file mode 100644
index 000000000..884a6765c
--- /dev/null
+++ b/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