Add permissions hint for visually impaired people

We were displaying an icon showing that certain actions can't be
performed. However, people who can't see the icons were hearing that
they _can_ perform certain actions while the opposite is true.

We've considered other options to solve this problem. One was to split
the list in two: actions that can be performed and actions that can't be
performed. It was tricky because in some cases we're listing that
actions that can be performed now and in other cases we're displaying
the actions that people will be able to perform once they verify their
account.

Another option was to include the word "Cannot" as a prefix instead of
"Additional verification needed". We haven't done so because, while in
English we say "cannot do this thing", in other languages they say
"this thing cannot do".

So we've gone with a solution where people hearing what's on the screen
know what's going on and we don't have to make big changes in the code.

app/components/account/permissions_list_component.html.erb

@@ -1,6 +1,10 @@
 <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 %>

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

@@ -7,4 +7,11 @@ describe Account::PermissionsListComponent do
     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