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>
- <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>
+ <%= render Account::PermissionsListComponent.new(current_user) %>
 
  <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>
- <% [: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>
-
+ <%= render Account::PermissionsListComponent.new(user) %>
 </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>
- <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>
+ <%= render Account::PermissionsListComponent.new(current_user) %>
  </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>
- <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>
+ <%= render Account::PermissionsListComponent.new(User.new(level_two_verified_at: Time.current)) %>
  </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