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