Merge pull request #4902 from consul/permission_list_accessibility

Add account permissions hint for screen reader users

app/assets/stylesheets/account/permissions_list.scss

@@ -0,0 +1,31 @@
+.permissions-list {
+  list-style-type: none;
+  margin-bottom: 0;
+  margin-left: 0;
+
+  li {
+    font-size: $small-font-size;
+    margin-bottom: $line-height / 2;
+
+    &::before {
+      font-size: 0.9em;
+      margin-#{$global-right}: 0.2em;
+    }
+
+    &.permission-allowed {
+      @include has-fa-icon(check, solid);
+
+      &::before {
+        color: $check;
+      }
+    }
+
+    &.permission-denied {
+      @include has-fa-icon(times, solid);
+
+      &::before {
+        color: $delete;
+      }
+    }
+  }
+}

app/assets/stylesheets/admin.scss

@@ -525,32 +525,6 @@ code {
 // 05. Management
 // --------------
 
-.user-permissions {
-
-  ul {
-    list-style-type: none;
-    margin-left: 0;
-  }
-
-  li {
-    font-size: rem-calc(14);
-    margin-bottom: rem-calc(12);
-
-    span {
-      color: $text-medium;
-      font-size: rem-calc(12);
-    }
-
-    .icon-check {
-      color: $check;
-    }
-
-    .icon-x {
-      color: $delete;
-    }
-  }
-}
-
 .account-info,
 .login-as {
   background-color: $highlight;

app/assets/stylesheets/application.scss

@@ -41,6 +41,7 @@
 @import "stats";
 @import "sticky_overrides";
 @import "tags";
+@import "account/**/*";
 @import "admin/**/*";
 @import "budgets/**/*";
 @import "debates/**/*";

app/assets/stylesheets/layout.scss

@@ -1278,30 +1278,6 @@ form {
       font-size: rem-calc(12);
     }
   }
-
-  ul {
-    list-style-type: none;
-    margin-bottom: 0;
-    margin-left: 0;
-  }
-
-  li {
-    font-size: $small-font-size;
-    margin-bottom: $line-height / 2;
-
-    span {
-      color: $text-medium;
-      font-size: rem-calc(12);
-    }
-
-    .icon-check {
-      color: $check;
-    }
-
-    .icon-x {
-      color: $delete;
-    }
-  }
 }
 
 .notifications-list {

app/components/account/permissions_list_component.html.erb

@@ -0,0 +1,11 @@
+<ul class="permissions-list">
+  <% permissions.each do |text, allowed| %>
+    <li class="<%= allowed_class(allowed) %>">
+      <% unless allowed %>
+        <span class="show-for-sr"><%= t("verification.verification_needed") %></span>
+      <% end %>
+
+      <%= text %>
+    </li>
+  <% end %>
+</ul>

app/components/account/permissions_list_component.rb

@@ -0,0 +1,26 @@
+class Account::PermissionsListComponent < ApplicationComponent
+  attr_reader :user
+
+  def initialize(user)
+    @user = user
+  end
+
+  private
+
+    def permissions
+      {
+        t("verification.user_permission_debates") => true,
+        t("verification.user_permission_proposal") => true,
+        t("verification.user_permission_support_proposal") => user.level_two_or_three_verified?,
+        t("verification.user_permission_votes") => user.level_three_verified?
+      }
+    end
+
+    def allowed_class(allowed)
+      if allowed
+        "permission-allowed"
+      else
+        "permission-denied"
+      end
+    end
+end

app/controllers/management/users_controller.rb

@@ -1,6 +1,6 @@
 class Management::UsersController < Management::BaseController
   def new
-    @user = User.new(user_params)
+    @user = User.new(user_params.merge(verified_at: Time.current))
   end
 
   def create

app/views/account/show.html.erb

@@ -93,26 +93,7 @@
 
           <p><%= t("account.show.user_permission_info") %></p>
 
-          <ul>
+          <%= render Account::PermissionsListComponent.new(current_user) %>
-            <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_debates") %></li>
-            <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_proposal") %></li>
-            <li>
-              <% if current_user.level_two_or_three_verified? %>
-                <span class="icon-check"></span>
-              <% else %>
-                <span class="icon-x"></span>
-              <% end %>
-              <%= t("verification.user_permission_support_proposal") %>
-            </li>
-            <li>
-              <% if current_user.level_three_verified? %>
-                <span class="icon-check"></span>
-              <% else %>
-                <span class="icon-x"></span>
-              <% end %>
-              <%= t("verification.user_permission_votes") %>
-            </li>
-          </ul>
 
           <p>
             <%= t("account.show.user_permission_verify") %>

app/views/management/_user_permissions.html.erb

@@ -1,18 +1,5 @@
-<%# # Parameters:
-    #   message: A string explaining the permissions
-    #   permissions: An array of symbols containing the permissions
-    #   (can be :debates, :proposal, :support_proposal, :votes) %>
 <div class="user-permissions">
-
   <p><%= message %></p>
 
-  <ul>
+  <%= render Account::PermissionsListComponent.new(user) %>
-    <% [:debates, :proposal, :support_proposal, :votes].each do |permission| %>
-      <li>
-        <span class="<%= permissions.include?(permission) ? "icon-check" : "icon-x" %>"></span>
-        <%= t("verification.user_permission_#{permission}") %>
-      </li>
-    <% end %>
-  </ul>
-
 </div>

app/views/management/document_verifications/invalid_document.html.erb

@@ -8,7 +8,7 @@
 
 <%= render "management/user_permissions",
       message: t("management.document_verifications.not_in_census_info"),
-      permissions: [:debates, :proposal] %>
+      user: User.new %>
 
 <p>
   <%= sanitize(t("management.document_verifications.has_no_account",

app/views/management/document_verifications/new.html.erb

@@ -4,7 +4,7 @@
 
 <%= render "management/user_permissions",
       message: t("management.document_verifications.in_census_has_following_permissions"),
-      permissions: [:debates, :proposal, :support_proposal] %>
+      user: @document_verification.user %>
 
 <%= form_for @document_verification,
     as: :document_verification,

app/views/management/document_verifications/verified.html.erb

@@ -4,6 +4,6 @@
 
 <%= render "management/user_permissions",
       message: t("management.document_verifications.in_census_has_following_permissions"),
-      permissions: [:debates, :proposal, :support_proposal, :votes] %>
+      user: @document_verification.user %>
 
 <a href="javascript:window.print();" class="button warning"><%= t("management.print_info") %></a>

app/views/management/email_verifications/sent.html.erb

@@ -4,7 +4,7 @@
 
 <%= render "management/user_permissions",
       message: t("management.email_verifications.document_found_in_census"),
-      permissions: [:debates, :proposal, :support_proposal, :votes] %>
+      user: @email_verification.user %>
 
 <p>
   <a href="javascript:window.print();" class="button warning"><%= t("management.print_info") %></a>

app/views/management/users/new.html.erb

@@ -25,6 +25,6 @@
   <div class="callout">
     <%= render "management/user_permissions",
                 message: t("management.document_verifications.in_census_has_following_permissions"),
-                permissions: [:debates, :proposal, :support_proposal, :votes] %>
+                user: @user %>
   </div>
 </div>

app/views/management/users/show.html.erb

@@ -6,6 +6,6 @@
 
 <%= render "management/user_permissions",
       message: t("management.document_verifications.in_census_has_following_permissions"),
-      permissions: [:debates, :proposal, :support_proposal, :votes] %>
+      user: @user %>
 
 <a href="javascript:window.print();" class="button warning radius"><%= t("management.print_info") %></a>

app/views/verification/letter/new.html.erb

@@ -24,15 +24,9 @@
       <h1><%= t("verification.letter.new.title") %></h1>
 
       <div class="user-permissions">
-
         <p><%= t("verification.letter.new.user_permission_info") %></p>
 
-        <ul>
+        <%= render Account::PermissionsListComponent.new(current_user) %>
-          <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_debates") %></li>
-          <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_proposal") %></li>
-          <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_support_proposal") %></li>
-          <li><span class="icon-x"></span>&nbsp;<%= t("verification.user_permission_votes") %></li>
-        </ul>
       </div>
 
       <%= link_to t("verification.letter.new.go_to_index"), root_path, class: "button warning" %>

app/views/verification/residence/new.html.erb

@@ -24,12 +24,7 @@
     <div class="user-permissions small-12">
       <p><%= t("verification.user_permission_info") %></p>
 
-      <ul>
+      <%= render Account::PermissionsListComponent.new(User.new(level_two_verified_at: Time.current)) %>
-        <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_debates") %></li>
-        <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_proposal") %></li>
-        <li><span class="icon-check"></span>&nbsp;<%= t("verification.user_permission_support_proposal") %></li>
-        <li><span class="icon-x"></span>&nbsp;<%= t("verification.user_permission_votes") %></li>
-      </ul>
     </div>
 
     <%= form_for @residence, as: "residence", url: residence_path do |f| %>

config/locales/en/verification.yml

@@ -92,6 +92,7 @@ en:
     user_permission_proposal: Create new proposals
     user_permission_support_proposal: Support proposals
     user_permission_votes: Vote for budget projects
+    verification_needed: Additional verification needed
     verified_user:
       form:
         submit_button: Send code

config/locales/es/verification.yml

@@ -92,6 +92,7 @@ es:
     user_permission_proposal: Crear nuevas propuestas
     user_permission_support_proposal: Apoyar propuestas
     user_permission_votes: Votar proyectos en los presupuestos participativos
+    verification_needed: Verificación adicional necesaria
     verified_user:
       form:
         submit_button: Enviar código

spec/components/account/permissions_list_component_spec.rb

@@ -0,0 +1,17 @@
+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
+
+  it "adds a hint when an action cannot be performed" do
+    render_inline Account::PermissionsListComponent.new(User.new)
+
+    expect(page).to have_css "li", exact_text: "Additional verification needed Support proposals", normalize_ws: true
+    expect(page).to have_css "li", exact_text: "Participate in debates", normalize_ws: true
+  end
+end