Acantin/recruiter form accessibility fix

labonneboite/web/app.py

@@ -210,6 +210,33 @@ def inject_user():
     def inject_jepostule_enabled():
         return {'jepostule_enabled': jepostule_enabled}
 
+    def inject_compute_input_attributes():
+        """
+        Template side function to populate 'aria-required' and
+        'aria-describedby' attributes in form fields
+        """
+        def compute_input_attributes(field):
+            attrs = {}
+
+            if field.flags.required:
+                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)

labonneboite/web/contact_form/forms.py

@@ -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",
     )
@@ -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):
@@ -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.',

labonneboite/web/contact_form/views.py

@@ -152,7 +152,7 @@ def change_info():
     if form.validate_on_submit():
         office = models.Office.query.filter(models.Office.siret == form.siret.data).first()
         if not office:
-            flash(unknown_siret_message(), 'error')
+            form.siret.errors.append(unknown_siret_message())
         else:
             params = {key: form.data[key] for key in ['siret', 'last_name', 'first_name', 'phone', 'email']}
             if is_recruiter_from_lba():
@@ -162,14 +162,15 @@ def change_info():
             return redirect(url)
 
     return render_template('contact_form/form.html',
-        title='Identifiez-vous',
+        title='Erreur - Identifiez-vous' if form.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,
     )
@@ -237,7 +238,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'),
@@ -249,8 +250,9 @@ def update_coordinates_form(form):
                 )
 
     return render_template('contact_form/form.html',
-        title='Modifier ma fiche entreprise',
+        title='Erreur - Modifier ma fiche entreprise' if form.errors else '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,
@@ -297,7 +299,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'),
@@ -311,8 +313,9 @@ def update_jobs_form(form):
 
 
     return render_template('contact_form/change_job_infos.html',
-        title='Demande de modification des métiers',
+        title='Erreur - Demande de modification des métiers' if form.errors else '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),
@@ -340,7 +343,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'),
@@ -351,8 +354,9 @@ def delete_form(form):
 
 
     return render_template('contact_form/form.html',
-        title='Supprimer mon entreprise',
+        title='Erreur - Supprimer mon entreprise' if form.errors else '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',
@@ -378,7 +382,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'),
@@ -390,8 +394,9 @@ def other_form(form):
 
     return render_template(
         'contact_form/form.html',
+        title='Erreur - Autre demande' if form.errors else 'Autre demande',
         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,

labonneboite/web/static/css/forms.css

@@ -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;
 }
 
@@ -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 {

labonneboite/web/static/js/recruiter-forms.js

@@ -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,

labonneboite/web/templates/base.html

@@ -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>

labonneboite/web/templates/base_lba.html

@@ -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>

labonneboite/web/templates/contact_form/ask_action.html

@@ -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>

labonneboite/web/templates/contact_form/ask_recruiter_pe_connect.html

@@ -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>

labonneboite/web/templates/contact_form/change_info_or_apply_for_job.html

@@ -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>