Remove redundant placeholders in forms

Using placeholders having similar (or identical) text as already present
as a label has a few issues.

First, it's a distraction. Reading the same information twice is
useless, requires an extra effort, and might even frustrate users.

Second, if users start typing before reading the placeholder and see it
disappear, they might think they're missing relevant information,
delete what they typed, and read the placeholder. That will get them
nowhere.

Finally, we display placeholders using a text offering very low contrast
against the background, so users don't think the placeholder is an
actual value entered in the field. Using such low contrast makes the
text hard to read, particularly for users with visual impairments.

So we're removing these placeholders.

This commit only deals with placeholder texts with similar (or
identical) texts as the label text. There might be other places where we
should replace placeholder texts with labels, but that's a different
topic.
This commit is contained in:
Javi Martín
2021-06-16 13:17:08 +02:00
parent 918276ec70
commit 1632540984
31 changed files with 38 additions and 124 deletions

View File

@@ -21,13 +21,13 @@
<div class="small-12 medium-10">
<% if @account.organization? %>
<%= f.fields_for :organization do |fo| %>
<%= fo.text_field :name, autofocus: true, maxlength: Organization.name_max_length, placeholder: t("account.show.organization_name_label") %>
<%= fo.text_field :responsible_name, autofocus: true, maxlength: Organization.responsible_name_max_length, placeholder: t("account.show.organization_responsible_name_placeholder") %>
<%= fo.text_field :name, autofocus: true, maxlength: Organization.name_max_length %>
<%= fo.text_field :responsible_name, autofocus: true, maxlength: Organization.responsible_name_max_length %>
<% end %>
<%= f.text_field :phone_number, placeholder: t("account.show.phone_number_label") %>
<%= f.text_field :phone_number %>
<% else %>
<%= f.text_field :username, maxlength: User.username_max_length, placeholder: t("account.show.username_label") %>
<%= f.text_field :username, maxlength: User.username_max_length %>
<% end %>
</div>

View File

@@ -14,8 +14,7 @@
</div>
<div class="small-12 medium-9 column">
<%= translations_form.text_field :title,
placeholder: t("admin.legislation.draft_versions.form.title_placeholder") %>
<%= translations_form.text_field :title %>
</div>
<div class="small-12 medium-9 column">
@@ -51,10 +50,7 @@
</div>
<div class="small-12 medium-6 column markdown-area">
<%= translations_form.text_area :body,
label: false,
rows: 10,
placeholder: t("admin.legislation.draft_versions.form.body_placeholder") %>
<%= translations_form.text_area :body, label: false, rows: 10 %>
</div>
<div class="small-12 medium-6 column markdown-preview">

View File

@@ -163,28 +163,24 @@
<div class="row">
<%= f.translatable_fields do |translations_form| %>
<div class="small-12 medium-9 column">
<%= translations_form.text_field :title,
placeholder: t("admin.legislation.processes.form.title_placeholder") %>
<%= translations_form.text_field :title %>
</div>
<div class="small-12 medium-9 column">
<%= translations_form.text_area :summary,
rows: 2,
placeholder: t("admin.legislation.processes.form.summary_placeholder"),
hint: t("admin.legislation.processes.form.use_markdown") %>
</div>
<div class="small-12 medium-9 column">
<%= translations_form.text_area :description,
rows: 5,
placeholder: t("admin.legislation.processes.form.description_placeholder"),
hint: t("admin.legislation.processes.form.use_markdown") %>
</div>
<div class="small-12 medium-9 column end">
<%= translations_form.text_area :additional_info,
rows: 10,
placeholder: t("admin.legislation.processes.form.additional_info_placeholder"),
hint: t("admin.legislation.processes.form.use_markdown") %>
</div>
<% end %>

View File

@@ -7,8 +7,7 @@
<div class="row">
<%= f.translatable_fields do |translations_form| %>
<div class="small-12 medium-9 column end">
<%= translations_form.text_area :title, rows: 5,
placeholder: t("admin.legislation.questions.form.title_placeholder") %>
<%= translations_form.text_area :title, rows: 5 %>
</div>
<% end %>
</div>

View File

@@ -9,7 +9,6 @@
<div class="small-12 column">
<%= translations_form.text_field :title,
maxlength: Debate.title_max_length,
placeholder: t("debates.form.debate_title"),
data: suggest_data(@debate) %>
</div>
<div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>

View File

@@ -6,7 +6,7 @@
<div class="row">
<div class="small-12 columns">
<%= f.email_field :email, autofocus: true, placeholder: t("devise_views.confirmations.new.email_label"), value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
<%= f.email_field :email, autofocus: true, value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
<% if @requires_password %>
<p><%= f.password_field :password %></p>

View File

@@ -5,7 +5,7 @@
<div class="row">
<div class="small-12 column">
<%= f.email_field :email, autofocus: true, placeholder: t("devise_views.passwords.new.email_label") %>
<%= f.email_field :email, autofocus: true %>
<div class="small-12 medium-6 small-centered">
<%= f.submit t("devise_views.passwords.new.send_submit"), class: "button expanded" %>

View File

@@ -11,11 +11,11 @@
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="row">
<div class="small-12 column">
<%= f.text_field :login, autofocus: true, placeholder: t("devise_views.sessions.new.login_label") %>
<%= f.text_field :login, autofocus: true %>
</div>
<div class="small-12 column">
<%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.sessions.new.password_label") %>
<%= f.password_field :password, autocomplete: "off" %>
<%= link_to t("devise_views.shared.links.new_password"), new_password_path(resource_name), class: "float-right" %>
</div>

View File

@@ -1,6 +1,6 @@
<div id="<%= dom_id(f.object) %>" class="nested-fields">
<div class="small-12 column attachment-actions">
<%= f.text_field :label, placeholder: t("links.link_fields.label_placeholder") %>
<%= f.text_field :label %>
<%= f.text_field :url, placeholder: t("links.link_fields.url_placeholder") %>

View File

@@ -4,7 +4,6 @@
<label><%= t("management.user_invites.new.label") %></label>
<p class="help-text" id="emails-help-text"><%= t("management.user_invites.new.info") %></p>
<%= text_area_tag "emails", nil, rows: 5,
placeholder: t("management.user_invites.new.info"),
aria: { describedby: "emails-help-text" } %>
<div class="small-12 medium-6 large-3">
<input type="submit" name="" value="<%= t("management.user_invites.new.submit") %>" class="button expanded">

View File

@@ -7,11 +7,9 @@
<%= f.hidden_field :document_type %>
<%= f.hidden_field :document_number %>
<%= f.text_field :username,
label: t("management.username_label"),
placeholder: t("management.username_label") %>
label: t("management.username_label") %>
<%= f.text_field :email,
label: t("management.users.email_optional_label"),
placeholder: t("management.email_label") %>
label: t("management.users.email_optional_label") %>
<div class="date-of-birth">
<%= f.date_select :date_of_birth,
prompt: true,

View File

@@ -9,7 +9,6 @@
<%= f.select :document_type, document_types, prompt: "" %>
<%= f.text_field :document_number,
placeholder: t("officing.residence.new.document_number"),
autocomplete: "off" %>
</div>

View File

@@ -7,25 +7,22 @@
<div class="small-12 column">
<%= f.fields_for :organization do |fo| %>
<%= fo.text_field :name, autofocus: true, maxlength: Organization.name_max_length, placeholder: t("devise_views.organizations.registrations.new.organization_name_label") %>
<%= fo.text_field :name, autofocus: true, maxlength: Organization.name_max_length %>
<%= fo.text_field :responsible_name,
placeholder: t("devise_views.organizations.registrations.new.responsible_name_label"),
maxlength: Organization.responsible_name_max_length,
hint: t("devise_views.organizations.registrations.new.responsible_name_note") %>
<% end %>
<%= f.email_field :email, placeholder: t("devise_views.organizations.registrations.new.email_label") %>
<%= f.email_field :email %>
<%= f.text_field :phone_number, placeholder: t("devise_views.organizations.registrations.new.phone_number_label") %>
<%= f.text_field :phone_number %>
<%= f.invisible_captcha :address %>
<%= f.password_field :password, autocomplete: "off",
placeholder: t("devise_views.organizations.registrations.new.password_label") %>
<%= f.password_field :password, autocomplete: "off" %>
<%= f.password_field :password_confirmation, autocomplete: "off",
label: t("devise_views.organizations.registrations.new.password_confirmation_label"),
placeholder: t("devise_views.organizations.registrations.new.password_confirmation_label") %>
label: t("devise_views.organizations.registrations.new.password_confirmation_label") %>
<%= f.check_box :terms_of_service,
title: t("devise_views.users.registrations.new.terms_title"),

View File

@@ -16,7 +16,6 @@
<%= f.text_field :erase_reason,
autofocus: true,
placeholder: t("devise_views.users.registrations.delete_form.erase_reason_label"),
label: t("devise_views.users.registrations.delete_form.erase_reason_label") %>
<%= f.submit t("devise_views.users.registrations.delete_form.submit"), class: "button alert expanded" %>

View File

@@ -8,8 +8,7 @@
<div class="small-12 column">
<%= f.email_field :email,
label: t("devise_views.users.registrations.edit.email_label"),
autofocus: true,
placeholder: t("devise_views.users.registrations.edit.email_label") %>
autofocus: true %>
</div>
<div class="small-12 column">
@@ -22,22 +21,19 @@
<%= f.password_field :password,
autocomplete: "off",
label: t("devise_views.users.registrations.edit.password_label"),
placeholder: t("devise_views.users.registrations.edit.password_label"),
hint: t("devise_views.users.registrations.edit.leave_blank") %>
</div>
<div class="small-12 column">
<%= f.password_field :password_confirmation,
label: t("devise_views.users.registrations.edit.password_confirmation_label"),
autocomplete: "off",
placeholder: t("devise_views.users.registrations.edit.password_confirmation_label") %>
autocomplete: "off" %>
</div>
<div class="small-12 column">
<%= f.password_field :current_password,
label: t("devise_views.users.registrations.edit.current_password_label"),
autocomplete: "off",
placeholder: t("devise_views.users.registrations.edit.current_password_label"),
hint: t("devise_views.users.registrations.edit.need_current") %>
</div>

View File

@@ -8,13 +8,13 @@
</div>
<% if current_user.errors.include? :username %>
<%= f.text_field :username, placeholder: t("devise_views.users.registrations.new.username_label") %>
<%= f.text_field :username %>
<% else %>
<%= f.hidden_field :username %>
<% end %>
<% if current_user.errors.include? :email %>
<%= f.email_field :email, placeholder: t("devise_views.users.registrations.new.email_label") %>
<%= f.email_field :email %>
<% else %>
<%= f.hidden_field :email %>
<% end %>

View File

@@ -18,22 +18,19 @@
<%= f.hidden_field :locale, value: I18n.locale %>
<%= f.text_field :username, autofocus: true, maxlength: User.username_max_length,
placeholder: t("devise_views.users.registrations.new.username_label"),
hint: t("devise_views.users.registrations.new.username_note") %>
<%= f.invisible_captcha :address %>
<%= f.email_field :email, placeholder: t("devise_views.users.registrations.new.email_label") %>
<%= f.email_field :email %>
<%= f.password_field :password, autocomplete: "off",
placeholder: t("devise_views.users.registrations.new.password_label") %>
<%= f.password_field :password, autocomplete: "off" %>
<%= f.password_field :password_confirmation, autocomplete: "off",
label: t("devise_views.users.registrations.new.password_confirmation_label"),
placeholder: t("devise_views.users.registrations.new.password_confirmation_label") %>
label: t("devise_views.users.registrations.new.password_confirmation_label") %>
<% if resource.use_redeemable_code %>
<%= f.text_field :redeemable_code, placeholder: t("devise_views.users.registrations.new.redeemable_code") %>
<%= f.text_field :redeemable_code %>
<% end %>
<%= f.check_box :terms_of_service,

View File

@@ -30,7 +30,6 @@
<span class="inline-block"><%= sanitize(t("verification.sms.new.phone_format")) %></span>
<p class="help-text" id="phone-text-help"><%= t("verification.sms.new.phone_note") %></p>
<%= f.text_field :phone, label: false,
placeholder: t("verification.sms.new.phone_placeholder"),
aria: { describedby: "phone-help-text" } %>
</div>

View File

@@ -571,10 +571,6 @@ en:
allegations_phase: Comments phase
proposals_phase: Proposals phase
use_markdown: Use Markdown to format the text
title_placeholder: The title of the process
summary_placeholder: Short summary of the description
description_placeholder: Add a description of the process
additional_info_placeholder: Add an additional information you consider useful
homepage_description: Here you can explain the content of the process
banner_title: Header colors
index:
@@ -647,9 +643,7 @@ en:
status:
draft: You can preview as admin, no one else can see it
published: Visible for everybody
title_placeholder: Write the title of the draft version
changelog_placeholder: Add the main changes from the previous version
body_placeholder: Write down the draft text
index:
title: Draft versions
create: Create version
@@ -680,7 +674,6 @@ en:
submit_button: Save changes
form:
add_option: Add option
title_placeholder: Add question
value_placeholder: Add a closed answer
question_options: "Possible answers (optional, by default open answers)"
index:

View File

@@ -2,7 +2,6 @@ en:
devise_views:
confirmations:
new:
email_label: Email
submit: Re-send instructions
title: Re-send confirmation instructions
show:
@@ -39,12 +38,7 @@ en:
organizations:
registrations:
new:
email_label: Email
organization_name_label: Name of organisation
password_confirmation_label: Confirm password
password_label: Password
phone_number_label: Phone number
responsible_name_label: Full name of the person responsible for the collective
responsible_name_note: This would be the person representing the association/collective in whose name the proposals are presented
submit: Register
title: Register as an organisation or collective
@@ -62,13 +56,10 @@ en:
password_label: New password
title: Change your password
new:
email_label: Email
send_submit: Send instructions
title: Forgotten password?
sessions:
new:
login_label: Email or username
password_label: Password
remember_me: Remember me
submit: Enter
title: Sign in
@@ -106,12 +97,9 @@ en:
waiting_for: "Awaiting confirmation of:"
new:
cancel: Cancel login
email_label: Email
organization_signup: Do you represent an organisation or collective? %{signup_link}
organization_signup_link: Sign up here
password_confirmation_label: Confirm password
password_label: Password
redeemable_code: Verification code received via email (optional)
submit: Register
terms: By registering you accept the %{terms}
terms_link: terms and conditions of use
@@ -119,7 +107,6 @@ en:
title: Register
username_is_available: Username available
username_is_not_available: Username already in use
username_label: Username
username_note: Name that appears next to your posts
success:
back_to_index: I understand; go back to main page

View File

@@ -5,10 +5,7 @@ en:
erase_account_link: Erase my account
finish_verification: Complete verification
notifications: Notifications
organization_name_label: Name of organization
organization_responsible_name_placeholder: Representative of the organization/collective
personal: Personal details
phone_number_label: Phone number
public_interests_my_title_list: Tags of elements you follow
public_interests_user_title_list: Tags of elements this user follows
save_changes_submit: Save changes
@@ -22,7 +19,6 @@ en:
user_permission_verify: To perform all the actions verify your account.
user_permission_verify_info: "* Only for users on Census."
user_permission_votes: Participate on final voting
username_label: Username
verified_account: Account verified
verify_my_account: Verify my account
application:
@@ -93,7 +89,6 @@ en:
submit_button: Save changes
show_link: View debate
form:
debate_title: Debate title
tags_instructions: Tag this debate.
tags_placeholder: "Enter the tags you would like to use, separated by commas (',')"
index:
@@ -958,7 +953,6 @@ en:
note: Add the links that are of interest
add_new_link: Add new link
link_fields:
label_placeholder: Link title
url_placeholder: Link address
communities:
show:

View File

@@ -43,7 +43,6 @@ en:
title: User management
under_age: "You don't have the required age to verify your account."
verify: Verify
email_label: Email
date_of_birth: Date of birth
email_verifications:
already_verified: This user account is already verified.

View File

@@ -69,7 +69,6 @@ en:
not_allowed: "You don't have officing shifts today"
new:
title: Validate document
document_number: "Document number (including letters)"
submit: Validate document
error_verifying_census: "The Census was unable to verify this document."
form_errors: prevented the verification of this document

View File

@@ -75,7 +75,6 @@ en:
phone: Enter your mobile phone number to receive the code
phone_format: "<strong><em>(Example: 612345678 or +34612345678)</em></strong>"
phone_note: We only use your phone to send you a code, never to contact you.
phone_placeholder: "Example: 612345678 or +34612345678"
submit_button: Send
title: Send confirmation code
update:

View File

@@ -571,10 +571,6 @@ es:
allegations_phase: Fase de comentarios
proposals_phase: Fase de propuestas
use_markdown: Usa Markdown para formatear el texto
title_placeholder: Escribe el título del proceso
summary_placeholder: Resumen corto de la descripción
description_placeholder: Añade una descripción del proceso
additional_info_placeholder: Añade cualquier información adicional que pueda ser de interés
homepage_description: Aquí puedes explicar el contenido del proceso
banner_title: Colores del encabezado
index:
@@ -646,9 +642,7 @@ es:
status:
draft: Podrás previsualizarlo como logueado, nadie más lo podrá ver
published: Será visible para todo el mundo
title_placeholder: Escribe el título de esta versión del borrador
changelog_placeholder: Describe cualquier cambio relevante con la versión anterior
body_placeholder: Escribe el texto del borrador
index:
title: Versiones del borrador
create: Crear versión
@@ -679,7 +673,6 @@ es:
submit_button: Guardar cambios
form:
add_option: Añadir respuesta cerrada
title_placeholder: Escribe un título a la pregunta
value_placeholder: Escribe una respuesta cerrada
question_options: "Posibles respuestas (opcional, por defecto respuestas abiertas)"
index:

View File

@@ -2,7 +2,6 @@ es:
devise_views:
confirmations:
new:
email_label: Email
submit: Reenviar instrucciones
title: Reenviar instrucciones de confirmación
show:
@@ -39,12 +38,7 @@ es:
organizations:
registrations:
new:
email_label: Email
organization_name_label: Nombre de la organización
password_confirmation_label: Repite la contraseña anterior
password_label: Contraseña que utilizarás para acceder a este sitio web
phone_number_label: Teléfono
responsible_name_label: Nombre y apellidos de la persona responsable del colectivo
responsible_name_note: Será la persona representante de la asociación/colectivo en cuyo nombre se presenten las propuestas
submit: Registrarse
title: Registrarse como organización / colectivo
@@ -62,13 +56,10 @@ es:
password_label: Contraseña nueva
title: Cambia tu contraseña
new:
email_label: Email
send_submit: Recibir instrucciones
title: '¿Has olvidado tu contraseña?'
sessions:
new:
login_label: Email o nombre de usuario
password_label: Contraseña que utilizarás para acceder a este sitio web
remember_me: Recordarme
submit: Entrar
title: Iniciar sesión
@@ -106,12 +97,9 @@ es:
waiting_for: "Esperando confirmación de:"
new:
cancel: Cancelar login
email_label: Tu correo electrónico
organization_signup: '¿Representas a una organización / colectivo? %{signup_link}'
organization_signup_link: Regístrate aquí
password_confirmation_label: Repite la contraseña anterior
password_label: Contraseña que utilizarás para acceder a este sitio web
redeemable_code: Tu código de verificación (si has recibido una carta con él)
submit: Registrarse
terms: Al registrarte aceptas las %{terms}
terms_link: condiciones de uso
@@ -119,7 +107,6 @@ es:
title: Registrarse
username_is_available: Nombre de usuario disponible
username_is_not_available: Nombre de usuario ya existente
username_label: Nombre de usuario
username_note: Nombre público que aparecerá en tus publicaciones
success:
back_to_index: Entendido, volver a la página principal

View File

@@ -5,10 +5,7 @@ es:
erase_account_link: Darme de baja
finish_verification: Finalizar verificación
notifications: Notificaciones
organization_name_label: Nombre de la organización
organization_responsible_name_placeholder: Representante de la asociación/colectivo
personal: Datos personales
phone_number_label: Teléfono
public_interests_my_title_list: Etiquetas de los elementos que sigues
public_interests_user_title_list: Etiquetas de los elementos que sigue este usuario
save_changes_submit: Guardar cambios
@@ -22,7 +19,6 @@ es:
user_permission_verify: Para poder realizar todas las acciones, verifica tu cuenta.
user_permission_verify_info: "* Sólo usuarios empadronados."
user_permission_votes: Participar en las votaciones finales*
username_label: Nombre de usuario
verified_account: Cuenta verificada
verify_my_account: Verificar mi cuenta
application:
@@ -93,7 +89,6 @@ es:
submit_button: Guardar cambios
show_link: Ver debate
form:
debate_title: Título del debate
tags_instructions: Etiqueta este debate.
tags_placeholder: "Escribe las etiquetas que desees separadas por coma (',')"
index:
@@ -958,7 +953,6 @@ es:
note: Añade los enlaces que sean de interés.
add_new_link: Añadir nuevo enlace
link_fields:
label_placeholder: Título del enlace
url_placeholder: Dirección del enlace
communities:
show:

View File

@@ -43,7 +43,6 @@ es:
title: Gestión de usuarios
under_age: "No tienes edad suficiente para verificar tu cuenta."
verify: Verificar usuario
email_label: Email
date_of_birth: Fecha de nacimiento
email_verifications:
already_verified: Esta cuenta de usuario ya está verificada.

View File

@@ -69,7 +69,6 @@ es:
not_allowed: "Hoy no tienes turno de presidente de mesa"
new:
title: Validar documento
document_number: "Número de documento (incluida letra)"
submit: Validar documento
error_verifying_census: "El Padrón no pudo verificar este documento."
form_errors: evitaron verificar este documento

View File

@@ -75,7 +75,6 @@ es:
phone: Introduce tu teléfono móvil para recibir el código
phone_format: "<strong><em>(Ejemplo: 612345678 ó +34612345678)</em></strong>"
phone_note: Sólo usaremos tu teléfono para enviarte un código, nunca te contactaremos.
phone_placeholder: "Ejemplo: 612345678 ó +34612345678"
submit_button: Enviar
title: SMS de confirmación
update:

View File

@@ -91,13 +91,11 @@ describe "Admin custom information texts", :admin do
end
scenario "Remove a translation" do
first_key = "debates.form.debate_title"
debate_title = create(:i18n_content, key: first_key,
value_en: "Custom debate title",
value_es: "Título personalizado de debate")
featured = create(:i18n_content, key: "debates.index.featured_debates",
value_en: "Custom featured",
value_es: "Destacar personalizado")
second_key = "debates.new.start_new"
page_title = create(:i18n_content, key: second_key,
page_title = create(:i18n_content, key: "debates.new.start_new",
value_en: "Start a new debate",
value_es: "Empezar un debate")
@@ -113,15 +111,15 @@ describe "Admin custom information texts", :admin do
select "English", from: :select_language
expect(page).to have_content "Start a new debate"
expect(page).to have_content "Custom debate title"
expect(page).to have_content "Custom featured"
debate_title.reload
featured.reload
page_title.reload
expect(page_title.value_es).to be(nil)
expect(debate_title.value_es).to be(nil)
expect(page_title.value_en).to eq("Start a new debate")
expect(debate_title.value_en).to eq("Custom debate title")
expect(page_title.value_es).to be nil
expect(featured.value_es).to be nil
expect(page_title.value_en).to eq "Start a new debate"
expect(featured.value_en).to eq "Custom featured"
end
end
end