Skip to content
This repository has been archived by the owner on Nov 15, 2024. It is now read-only.

Commit

Permalink
Better accessibility recruiter form
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexandreCantin committed May 24, 2019
1 parent 8d3891c commit 75d79c3
Show file tree
Hide file tree
Showing 13 changed files with 172 additions and 115 deletions.
23 changes: 23 additions & 0 deletions labonneboite/web/app.py
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,29 @@ def inject_user():
def inject_jepostule_enabled():
return {'jepostule_enabled': jepostule_enabled}

def inject_compute_input_attributes():
def compute_input_attributes(field):
attrs = {}

if field.validators and field.validators[0].__class__.__name__ == "DataRequired":
attrs['aria-required'] = 'true'

# aria-describedby are used to link input fields to their description and/or error messages
aria_describedby = []
if field.description:
aria_describedby.append('{}_description'.format(field.id))
if field.errors:
aria_describedby.append('{}_errors'.format(field.id))

if aria_describedby:
attrs['aria-describedby'] = ' '.join(aria_describedby)

return attrs

return dict(compute_input_attributes=compute_input_attributes)


flask_app.context_processor(inject_compute_input_attributes)
flask_app.context_processor(inject_dict_for_all_templates)
flask_app.context_processor(inject_user)
flask_app.context_processor(inject_jepostule_enabled)
Expand Down
46 changes: 22 additions & 24 deletions labonneboite/web/contact_form/forms.py
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class OfficeIdentificationForm(FlaskForm):
'N° de Siret *',
validators=[
DataRequired(),
Regexp('[0-9]{14}', message=("Le siret de l'établissement est invalide (14 chiffres)"))
Regexp('[0-9]{14}', message=("Le siret de l'établissement est invalide (14 chiffres sans espace)"))
],
description="14 chiffres, sans espace. Exemple: 36252187900034",
)
Expand All @@ -34,30 +34,22 @@ class OfficeIdentificationForm(FlaskForm):
first_name = StringField('Prénom *', validators=[DataRequired()])
phone = TelField(
'Téléphone *',
validators=[DataRequired(), Regexp(PHONE_REGEX)],
render_kw={"placeholder": "01 77 86 39 49, +331 77 86 39 49"}
description="Exemple: 01 77 86 39 49 ou +331 77 86 39 49",
validators=[DataRequired(), Regexp(PHONE_REGEX, message="Entrée invalide. Exemple valide: 01 77 86 39 49 ou +331 77 86 39 49")],
)
email = EmailField(
'Adresse email *',
validators=[DataRequired(), Email()],
render_kw={"placeholder": "[email protected]"}
description="Exemple: [email protected]",
validators=[DataRequired(), Email(message="Entrée invalide. Exemple valide: [email protected]")],
)


class OfficeHiddenIdentificationForm(FlaskForm):
siret = HiddenField('Siret *', validators=[DataRequired()])
last_name = HiddenField('Nom *', validators=[DataRequired()])
first_name = HiddenField('Prénom *', validators=[DataRequired()])
phone = HiddenField(
'Téléphone *',
validators=[DataRequired(), Regexp(PHONE_REGEX)],
render_kw={"placeholder": "01 77 86 39 49, +331 77 86 39 49"}
)
email = HiddenField(
'Adresse email *',
validators=[DataRequired(), Email()],
render_kw={"placeholder": "[email protected]"}
)
phone = HiddenField('Téléphone *', validators=[DataRequired(), Regexp(PHONE_REGEX)])
email = HiddenField('Adresse email *', validators=[DataRequired(), Email()])


class OfficeOtherRequestForm(OfficeHiddenIdentificationForm):
Expand All @@ -77,27 +69,33 @@ class OfficeUpdateCoordinatesForm(OfficeHiddenIdentificationForm):
new_contact_mode = RadioField('Mode de contact à privilégier', choices=CONTACT_MODES, default='email')
new_website = StringField(
'Site Internet',
validators=[URL(), Optional()], render_kw={"placeholder": "http://exemple.com"}
description="Exemple: http://exemple.com",
validators=[URL(message="Entrée invalide. Exemple: http://exemple.com"), Optional()]
)
new_email = EmailField(
'Email recruteur',
validators=[Email(), Optional()], render_kw={"placeholder": "[email protected]"}
description="Exemple: [email protected]",
validators=[Email(message="Entrée invalide. Exemple valide: [email protected]"), Optional()]
)
new_phone = StringField(
'Téléphone',
validators=[Optional(), Regexp(PHONE_REGEX)],
render_kw={"placeholder": "01 77 86 39 49, +331 77 86 39 49"}
description="Exemple: 01 77 86 39 49 ou +331 77 86 39 49",
validators=[Optional(), Regexp(PHONE_REGEX, message="Entrée invalide. Exemple valide: 01 77 86 39 49 ou +331 77 86 39 49")]
)
social_network = StringField(
'Réseau social',
description="Exemple: https://twitter.com/0123456_abcdef",
validators=[URL(message="Entrée invalide. Exemple: https://twitter.com/0123456_abcdef"), Optional()]
)
social_network = StringField('Réseau social', validators=[URL(), Optional()])
new_email_alternance = EmailField(
'Email recruteur spécialisé alternance',
validators=[validators.optional(), Email()],
render_kw={"placeholder": "exemple-alternance@domaine.com"}
description="Exemple: [email protected]",
validators=[validators.optional(), Email(message="Entrée invalide. Exemple valide: [email protected]")]
)
new_phone_alternance = StringField(
'Téléphone du recruteur spécialisé alternance',
validators=[validators.optional(), Regexp(PHONE_REGEX)],
render_kw={"placeholder": "01 77 86 39 49, +331 77 86 39 49"}
description="Exemple: 01 77 86 39 49 ou +331 77 86 39 49",
validators=[validators.optional(), Regexp(PHONE_REGEX, message="Entrée invalide. Exemple valide: 01 77 86 39 49 ou +331 77 86 39 49")]
)
rgpd_consent = BooleanField(
'En cochant cette case, vous consentez à diffuser des données à caractère personnel sur les services numériques de Pôle emploi.',
Expand Down
24 changes: 18 additions & 6 deletions labonneboite/web/contact_form/views.py
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,8 @@ def change_info():
fix_csrf_session()
form = forms.OfficeIdentificationForm()

form_has_errors = False

# Clear session if user comes from 'I don't have recruiter account'
if request.args.get('no_pe_connect', ''):
peam_recruiter.clear_pe_connect_recruiter_session()
Expand All @@ -138,6 +140,7 @@ def change_info():

action_name = get_action_name()
if not action_name:
form_has_errors = True
flash('Une erreur inattendue est survenue, veuillez sélectionner à nouveau une action', 'error')
return redirect(url_for('contact_form.ask_action'))

Expand All @@ -152,6 +155,7 @@ def change_info():
if form.validate_on_submit():
office = models.Office.query.filter(models.Office.siret == form.siret.data).first()
if not office:
form_has_errors = True
flash(unknown_siret_message(), 'error')
else:
params = {key: form.data[key] for key in ['siret', 'last_name', 'first_name', 'phone', 'email']}
Expand All @@ -161,15 +165,19 @@ def change_info():
url = url_for(action_form_url, **params)
return redirect(url)

if form.errors and not form_has_errors:
form_has_errors = True

return render_template('contact_form/form.html',
title='Identifiez-vous',
title='Erreur - Identifiez-vous' if form_has_errors else 'Identifiez-vous',
submit_text='suivant',
extra_submit_class='identification-form',
form=form,
is_certified_recruiter=peam_recruiter.is_certified_recruiter(),
is_recruiter=peam_recruiter.is_recruiter(),
use_lba_template=is_recruiter_from_lba(),
show_disclaimer=True,
show_credentials_disclaimer=True,
show_required_disclaimer=True,
hide_return=True,
custom_ga_pageview='/recruteur/%s/identification' % action_name,
)
Expand Down Expand Up @@ -237,7 +245,7 @@ def update_coordinates_form(form):
else:
redirect_params = get_success_value()
return render_template('contact_form/success_message.html',
title="Merci pour votre message",
title="Confirmation - Merci pour votre message",
use_lba_template=is_recruiter_from_lba(),
site_name=redirect_params.get('site_name'),
email=redirect_params.get('email'),
Expand All @@ -251,6 +259,7 @@ def update_coordinates_form(form):
return render_template('contact_form/form.html',
title='Modifier ma fiche entreprise',
form=form,
submit_text='Modifier ma fiche entreprise',
params=extract_recruiter_data(),
use_lba_template=is_recruiter_from_lba(),
show_entreprise_page=True,
Expand Down Expand Up @@ -297,7 +306,7 @@ def update_jobs_form(form):
else:
redirect_params = get_success_value()
return render_template('contact_form/success_message.html',
title="Merci pour votre message",
title="Confirmation - Merci pour votre message",
use_lba_template=is_recruiter_from_lba(),
site_name=redirect_params.get('site_name'),
email=redirect_params.get('email'),
Expand All @@ -313,6 +322,7 @@ def update_jobs_form(form):
return render_template('contact_form/change_job_infos.html',
title='Demande de modification des métiers',
form=form,
submit_text='Modifier mes métiers',
params=extract_recruiter_data(),
use_lba_template=is_recruiter_from_lba(),
manually_added_jobs=extract_manually_added_jobs(office),
Expand Down Expand Up @@ -340,7 +350,7 @@ def delete_form(form):
else:
redirect_params = get_success_value()
return render_template('contact_form/success_message.html',
title="Merci pour votre message",
title="Confirmation - Merci pour votre message",
use_lba_template=is_recruiter_from_lba(),
site_name=redirect_params.get('site_name'),
email=redirect_params.get('email'),
Expand All @@ -353,6 +363,7 @@ def delete_form(form):
return render_template('contact_form/form.html',
title='Supprimer mon entreprise',
form=form,
submit_text='Supprimer mon entreprise',
params=extract_recruiter_data(),
use_lba_template=is_recruiter_from_lba(),
custom_ga_pageview='/recruteur/delete/delete',
Expand All @@ -378,7 +389,7 @@ def other_form(form):
else:
redirect_params = get_success_value()
return render_template('contact_form/success_message.html',
title="Merci pour votre message",
title="Confirmation - Merci pour votre message",
use_lba_template=is_recruiter_from_lba(),
site_name=redirect_params.get('site_name'),
email=redirect_params.get('email'),
Expand All @@ -392,6 +403,7 @@ def other_form(form):
'contact_form/form.html',
form=form,
title='Autre demande',
submit_text='Envoyer votre message',
params=extract_recruiter_data(),
use_lba_template=is_recruiter_from_lba(),
show_required_disclaimer=True,
Expand Down
19 changes: 17 additions & 2 deletions labonneboite/web/static/css/forms.css
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ textarea.form-error,
margin-bottom: 30px;
font-size: 1.1em;
}
.action-chooser-form h2 {
.action-chooser-form h1 {
margin-bottom: 50px;
}

Expand Down Expand Up @@ -229,14 +229,29 @@ textarea.form-error,
margin-top: 50px;
}

/* Fieldset */
fieldset {
padding: 0;
border: none;
}
fieldset legend {
padding: 0;
font-weight: bold;
}


/* Update jobs form */
.update-jobs-form table,
.update-jobs-form table th,
.update-jobs-form table td {
border: none;
}
.update-jobs-form table th {
.update-jobs-form table tr.header td {
text-align: center;
background: #e0e0e0;
vertical-align: bottom;
font-weight: bold;
padding: .625rem 1rem;
}

.update-jobs-form table td {
Expand Down
8 changes: 4 additions & 4 deletions labonneboite/web/static/js/recruiter-forms.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,10 +118,10 @@
var $newJobTable = $('.add-new-jobs table');
var $newJobTbody = $newJobTable.find('tbody');
var $newJobInput = $('.add-new-jobs input[name=new-job]');
var jobRowTemplate = '<tr id="{ROME}"><td><span><label for="{ROME}">{LABEL}</label></span></td>' +
'<td class="text-center"><span class="sr-only">Intéressé par les candidatures</span><input checked="checked" type="checkbox" name="{ROME}" value="lbb"></td>' +
'<td class="text-center"><span class="sr-only">Ouvert aux contrats d\'alternance</span><input checked="checked" type="checkbox" name="{ROME}" value="lba"></td>' +
'<td class="text-center"><button class="btn remove" data-rome="{ROME}">Supprimer</button></td></tr>';
var jobRowTemplate = '<tr id="{ROME}"><td class="text-left"><b>{LABEL}</b></td>' +
'<td class="text-center"><label for="lbb-{ROME}" class="sr-only">Intéressé par les candidatures pour le métier de {LABEL}</label><input checked="checked" id="lbb-{ROME}" type="checkbox" name="{ROME}" value="lbb" /></td>' +
'<td class="text-center"><label for="lbb-{ROME}" class="sr-only">Ouvert aux contrats d\'alternance pour le métier de {LABEL}</span><input checked="checked" id="lbb-{ROME}" type="checkbox" name="{ROME}" value="lba" /></td>' +
'<td class="text-center"><button class="btn remove" data-rome="{ROME}" title="Supprimer le métier {LABEL}">Supprimer<span class="sr-only">le métier de {LABEL}</span></button></td></tr>';

$newJobInput.autocomplete({
delay: 200,
Expand Down
2 changes: 1 addition & 1 deletion labonneboite/web/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="lbb-flash-alerts">
<div class="lbb-flash-alerts" role="alert">
{% for category, message in messages %}
<div class="alert alert-{{ category }} js-alert-close">
<p>{{ message }}</p>
Expand Down
2 changes: 1 addition & 1 deletion labonneboite/web/templates/base_lba.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="lbb-flash-alerts">
<div class="lbb-flash-alerts" role="alert">
{% for category, message in messages %}
<div class="alert alert-{{ category }} js-alert-close">
<p>{{ message }}</p>
Expand Down
2 changes: 1 addition & 1 deletion labonneboite/web/templates/contact_form/ask_action.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="lbb-content">
<div class="lbb-single-column-content action-chooser-form">

<h2>Que voulez-vous faire ?</h2>
<h1>Que voulez-vous faire ?</h1>

<a class="btn btn-small" href="{{ url_for('contact_form.ask_recruiter_pe_connect', siret=siret, action_name='update_coordinates', origin=('labonnealternance' if use_lba_template else '')) }}">Modifier les coordonnées de mon entreprise</a>
<a class="btn btn-small" href="{{ url_for('contact_form.ask_recruiter_pe_connect', siret=siret, action_name='update_jobs', origin=('labonnealternance' if use_lba_template else '')) }}">Modifier les métiers pour lesquels je reçois des candidatures spontanées</a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="lbb-content">
<div class="lbb-single-column-content verification-form">

<h2>Demande de modification des informations de mon entreprise</h2>
<h1>Demande de modification des informations de mon entreprise</h1>

<p class="text-center">Veuillez utiliser vos identifiants Pôle emploi “accès recruteur” pour une prise en
compte plus rapide de vos modifications.</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="lbb-content">
<div class="lbb-single-column-content verification-form">

<h2>Demande de modification des informations de mon entreprise</h2>
<h1>Demande de modification des informations de mon entreprise</h1>

<p class="text-center">Veuillez sélectionner votre situation :</p>

Expand Down
Loading

0 comments on commit 75d79c3

Please sign in to comment.