From 66c258355707e9bc6d66aebcf145fd735ae30a31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 11 Aug 2022 02:35:06 +0200
Subject: [PATCH] Render icons using CSS in user permissions

As mentioned in commit 925f04e3f, icon classes make screen readers
announce strange symbols and aren't properly displayed for people who
have changed their preferred font family.
---
 .../stylesheets/account/permissions_list.scss | 22 +++++++++++++------
 .../permissions_list_component.html.erb       |  8 +------
 .../account/permissions_list_component.rb     |  8 +++++++
 .../permissions_list_component_spec.rb        | 10 +++++++++
 4 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 spec/components/account/permissions_list_component_spec.rb

diff --git a/app/assets/stylesheets/account/permissions_list.scss b/app/assets/stylesheets/account/permissions_list.scss
index 2e476d6b0..fbd0a5043 100644
--- a/app/assets/stylesheets/account/permissions_list.scss
+++ b/app/assets/stylesheets/account/permissions_list.scss
@@ -7,17 +7,25 @@
     font-size: $small-font-size;
     margin-bottom: $line-height / 2;
 
-    span {
-      color: $text-medium;
-      font-size: rem-calc(12);
+    &::before {
+      font-size: 0.9em;
+      margin-#{$global-right}: 0.2em;
     }
 
-    .icon-check {
-      color: $check;
+    &.permission-allowed {
+      @include has-fa-icon(check, solid);
+
+      &::before {
+        color: $check;
+      }
     }
 
-    .icon-x {
-      color: $delete;
+    &.permission-denied {
+      @include has-fa-icon(times, solid);
+
+      &::before {
+        color: $delete;
+      }
     }
   }
 }
diff --git a/app/components/account/permissions_list_component.html.erb b/app/components/account/permissions_list_component.html.erb
index 2d7c63687..055c9a922 100644
--- a/app/components/account/permissions_list_component.html.erb
+++ b/app/components/account/permissions_list_component.html.erb
@@ -1,12 +1,6 @@
 <ul class="permissions-list">
   <% permissions.each do |text, allowed| %>
-    <li>
-      <% if allowed %>
-        <span class="icon-check"></span>
-      <% else %>
-        <span class="icon-x"></span>
-      <% end %>
-
+    <li class="<%= allowed_class(allowed) %>">
       <%= text %>
     </li>
   <% end %>
diff --git a/app/components/account/permissions_list_component.rb b/app/components/account/permissions_list_component.rb
index 6120ea3f7..619ef8b5f 100644
--- a/app/components/account/permissions_list_component.rb
+++ b/app/components/account/permissions_list_component.rb
@@ -15,4 +15,12 @@ class Account::PermissionsListComponent < ApplicationComponent
         t("verification.user_permission_votes") => user.level_three_verified?
       }
     end
+
+    def allowed_class(allowed)
+      if allowed
+        "permission-allowed"
+      else
+        "permission-denied"
+      end
+    end
 end
diff --git a/spec/components/account/permissions_list_component_spec.rb b/spec/components/account/permissions_list_component_spec.rb
new file mode 100644
index 000000000..864a21bd5
--- /dev/null
+++ b/spec/components/account/permissions_list_component_spec.rb
@@ -0,0 +1,10 @@
+require "rails_helper"
+
+describe Account::PermissionsListComponent do
+  it "adds different classes for actions that can and cannot be performed" do
+    render_inline Account::PermissionsListComponent.new(User.new)
+
+    expect(page).to have_css "li.permission-allowed", text: "Participate in debates"
+    expect(page).to have_css "li.permission-denied", text: "Support proposals"
+  end
+end