Merge pull request #10965 from demarches-simplifiees/a11y-process-screen-2

Restitution des bandeau de statut (erreur ou succès)

app/assets/stylesheets/buttons.scss

@@ -151,10 +151,8 @@
   .dropdown-button {
     white-space: nowrap;
 
-    &::after {
+    [aria-hidden="true"].fr-ml-2v::after {
       content: "▾";
-      margin-left: $default-spacer;
-      font-weight: bold;
     }
 
     &.icon-only {

app/assets/stylesheets/notifications.scss

@@ -1,11 +1,9 @@
-@import "colors";
-
 span.notifications {
   position: absolute;
   width: 8px;
   height: 8px;
   border-radius: 4px;
-  background-color: $orange;
+  background-color: var(--background-flat-warning);
 }
 
 .fr-tabs__list span.notifications {

app/components/dossiers/batch_operation_component/batch_operation_component.html.haml

@@ -13,6 +13,7 @@
         -# Dropdown button title
         %button#batch_operation_others.fr-btn.fr-btn--sm.fr-btn--secondary.fr-ml-1w.dropdown-button{ disabled: true, data: { menu_button_target: 'button', batch_operation_target: 'dropdown' } }
           = t('.operations.other')
+          %span.fr-ml-2v{ 'aria-hidden': 'true' }
 
         #state-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' }, "aria-labelledby" => "batch_operation_others" }
           %ul.dropdown-items

app/components/dropdown/menu_component/menu_component.html.haml

@@ -1,8 +1,9 @@
 = content_tag(@wrapper, wrapper_options) do
   %button{ class: button_class_names, id: button_id, disabled: disabled?, data: data, "aria-expanded": "false", 'aria-haspopup': 'true', 'aria-controls': menu_id }
     = button_inner_html
+    %span.fr-ml-2v{ 'aria-hidden': 'true' }
 
-  %div{ data: { menu_button_target: 'menu' }, id: menu_id, 'aria-labelledby': button_id, role: menu_role, 'tab-index': -1, class: menu_class_names }
+  %div{ data: { menu_button_target: 'menu' }, id: menu_id, 'aria-labelledby': button_id, role: menu_role, 'tabindex': -1, class: menu_class_names }
     = menu_header_html
 
     -# the dropdown can be a menu with a list of item

app/components/dsfr/input_status_message_component/input_status_message_component.html.haml

@@ -1,4 +1,4 @@
-.fr-messages-group{ id: @describedby_id, aria: { live: :assertive } }
+.fr-messages-group{ id: @describedby_id }
   - if @error_full_messages.size > 0
     %p{ class: class_names('fr-message' => true, "fr-message--#{@errors_on_attribute ? 'error' : 'valid'}" => true) }
       = "« #{@champ.libelle} » "

app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml

@@ -2,8 +2,6 @@
 - if @champ.public?
   - if @champ.mandatory?
     = render EditableChamp::AsteriskMandatoryComponent.new
-  - else
-    %span.sr-only= t('.optional_champ')
 
 - if @champ.forked_with_changes?
   %span.updated-at.highlighted
@@ -21,7 +19,7 @@
   %span.fr-hint-text{ data: { controller: 'date-input-hint' } }= hint
 
 - if @champ.description.present?
-  %span.fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
+  %span.fr-hint-text= render SimpleFormatComponent.new(@champ.description, allow_a: true)
 
 - if @champ.textarea?
   %span.sr-only= t('.recommended_size', size: @champ.character_limit_base)

app/helpers/application_helper.rb

@@ -45,7 +45,6 @@ module ApplicationHelper
     when 'alert', 'error'
       class_names << 'alert-danger'
     end
-
     if sticky
       class_names << 'sticky'
     end

app/views/invites/_dropdown.html.haml

@@ -1,5 +1,6 @@
 - invites = dossier.invites.load
-= render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: {class: 'invite-user-action'}, button_options: { class: ['fr-btn--secondary'] }, menu_options: { id: 'invite-content' }) do |menu|
+= render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: {class: 'invite-user-action'}, button_options: { class: ['fr-btn--secondary'] }, menu_options: { id: 'invite-content' }) do |menu|
+  = 'lab'
   - menu.with_button_inner_html do
     = dsfr_icon('fr-icon-user-add-fill', :sm, :mr)
     - if invites.present?

app/views/invites/_form.html.haml

@@ -4,13 +4,13 @@
 
   %h5.fr-h6= t('views.invites.form.edit_dossier', count: invites.size)
   - if invites.present?
-    #invite-list{ morphing ? { tabindex: "-1" } : {} }
+    #invite-list
       %ul
-        - invites.each do |invite|
+        - invites.each_with_index do |invite, index|
           %li
-            = invite.email
+            %span{ :id => "invite_#{index}" }= invite.email
             %small{ 'data-turbo': 'true' }
-              = link_to t('views.invites.form.withdraw_permission'), invite_path(invite), data: { turbo_method: :delete, turbo_confirm: t('views.invites.form.want_to_withdraw_permission', email: invite.email) }, class: "fr-btn fr-btn--sm fr-btn--tertiary-no-outline"
+              = link_to t('views.invites.form.withdraw_permission'), invite_path(invite), data: { turbo_method: :delete, turbo_confirm: t('views.invites.form.want_to_withdraw_permission', email: invite.email) }, class: "fr-btn fr-btn--sm fr-btn--tertiary-no-outline", id: "link_#{index}", "aria-labelledby": "link_#{index} invite_#{index}"
 
     - if dossier.brouillon?
       %p= t('views.invites.form.submit_dossier_yourself')

app/views/layouts/_flash_messages.html.haml

@@ -1,14 +1,13 @@
-#flash_messages{ aria: { live: 'assertive' } }
+#flash_messages{ tabindex: '-1', data: { turbo_force: :server } }
-  - if flash.any?
+  #flash_message.center{ class: defined?(unique_classname) ? unique_classname : '' }
-    #flash_message.center
+    - if flash.any?
       - flash.each do |key, value|
         - sticky = defined?(sticky) ? sticky : false
         - fixed = defined?(fixed) ? fixed : false
-        - if value.class == Array
+        .alert{ role: flash_role(key), class: flash_class(key, sticky: sticky, fixed: fixed) }
-          .alert{ class: flash_class(key, sticky: sticky, fixed: fixed), role: flash_role(key) }
+          - if value.class == Array
             - value.each do |message|
               = sanitize_with_link(message)
               %br
-        - elsif value.present?
+          - elsif value.present?
-          .alert{ class: flash_class(key, sticky: sticky, fixed: fixed), role: flash_role(key) }
             = sanitize_with_link(value)

app/views/layouts/_header.haml

@@ -53,7 +53,7 @@
                     = render partial: 'shared/help/help_dropdown_instructeur'
                   - else
                     -# NB: on mobile in order to have links correctly aligned, we need a left icon #
-                    = link_to t('help'), t("links.common.faq.url"), class: 'fr-btn dropdown-button'
+                    = link_to t('help'), t("links.common.faq.url"), class: 'fr-btn'
 
 
 

app/views/layouts/application.turbo_stream.haml

@@ -1,7 +1,9 @@
 - if flash.any?
-  = turbo_stream.replace 'flash_messages', partial: 'layouts/flash_messages'
+  - unique_classname= "u#{SecureRandom.hex}"
+  = turbo_stream.replace 'flash_messages', partial: 'layouts/flash_messages', locals: { unique_classname: }
+  = turbo_stream.focus 'flash_messages'
   = turbo_stream.show 'flash_messages'
-  = turbo_stream.hide 'flash_messages', delay: 30000
+  = turbo_stream.hide_all ".#{unique_classname}", delay: 15000
   - flash.clear
 
 = yield

config/locales/metas.en.yml

@@ -12,13 +12,13 @@ en:
         identite:
           title: "New file (%{procedure_label}) - Step 1: Identity"
         show:
-          title: "Summary · File nº %{number} (%{procedure_label})"
+          title: "Summary · File %{number} (%{procedure_label})"
         demande:
-          title: "Application · File nº %{number} (%{procedure_label})"
+          title: "Application · File %{number} (%{procedure_label})"
         messagerie:
-          title: "Mailbox · File nº %{number} (%{procedure_label})"
+          title: "Mailbox · File %{number} (%{procedure_label})"
         brouillon:
-          title: "Modification of draft nº %{number} (%{procedure_label})"
+          title: "File %{number} in draft (%{procedure_label}) - Step 2: Form"
         merci:
           title: "File submitted (%{procedure_label})"
       activate:

config/locales/metas.fr.yml

@@ -12,13 +12,13 @@ fr:
         identite:
           title: "Nouveau dossier (%{procedure_label}) - Étape 1 : Identité"
         show:
-          title: "Résumé · Dossier nº %{number} (%{procedure_label})"
+          title: "Résumé · Dossier %{number} (%{procedure_label})"
         demande:
-          title: "Demande · Dossier nº %{number} (%{procedure_label})"
+          title: "Demande · Dossier %{number} (%{procedure_label})"
         messagerie:
-          title: "Messagerie · Dossier nº %{number} (%{procedure_label})"
+          title: "Messagerie · Dossier %{number} (%{procedure_label})"
         brouillon:
-          title: "Modification du brouillon nº %{number} (%{procedure_label})"
+          title: "Dossier %{number} en brouillon (%{procedure_label}) - Étape 2 : Formulaire"
         merci:
           title: "Dossier envoyé (%{procedure_label})"
       activate:

public/500.html

@@ -2109,7 +2109,7 @@
                   <li>
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
-                      class="fr-btn dropdown-button"
+                      class="fr-btn"
                       href="/faq"
                       >Aide</a
                     >

public/502.html

@@ -2108,7 +2108,7 @@
                   <li>
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
-                      class="fr-btn dropdown-button"
+                      class="fr-btn"
                       href="/faq"
                       >Aide</a
                     >

public/503.html

@@ -2108,7 +2108,7 @@
                   <li>
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
-                      class="fr-btn dropdown-button"
+                      class="fr-btn"
                       href="/faq"
                       >Aide</a
                     >

public/504.html

@@ -2108,7 +2108,7 @@
                   <li>
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
-                      class="fr-btn dropdown-button"
+                      class="fr-btn"
                       href="/faq"
                       >Aide</a
                     >

spec/support/system_helpers.rb

@@ -76,13 +76,6 @@ module SystemHelpers
     click_on 'Ajouter un champ'
   end
 
-  def remove_flash_message
-    expect(page).to have_button('Ajouter un champ', disabled: false)
-    expect(page).to have_content('Formulaire enregistré')
-    execute_script("document.querySelector('#flash_message').remove();")
-    execute_script("document.querySelector('#autosave-notice').remove();")
-  end
-
   def hide_autonotice_message
     expect(page).to have_text('Formulaire enregistré')
     execute_script("document.querySelector('#autosave-notice').classList.add('hidden');")

spec/system/users/brouillon_spec.rb

@@ -428,7 +428,7 @@ describe 'The user', js: true do
       let(:procedure) do
         create(:procedure, :published, :for_individual,
           types_de_champ_public: [
-            { type: :integer_number, libelle: 'age', mandatory: false, stable_id: },
+            { type: :integer_number, libelle: 'UNIQ_LABEL', mandatory: false, stable_id: },
             {
               type: :repetition, libelle: 'repetition', condition:, children: [
                 { type: :text, libelle: 'nom', mandatory: true }
@@ -441,8 +441,7 @@ describe 'The user', js: true do
         log_in(user, procedure)
 
         fill_individual
-
+        fill_in('UNIQ_LABEL', with: 10)
-        fill_in('age (facultatif)', with: 10)
         click_on 'Déposer le dossier'
         expect(page).to have_current_path(merci_dossier_path(user_dossier))
       end
@@ -494,7 +493,7 @@ describe 'The user', js: true do
       let(:procedure) do
         create(:procedure, :published, :for_individual,
           types_de_champ_public: [
-            { type: :integer_number, libelle: 'age', mandatory: false, stable_id: },
+            { type: :integer_number, libelle: 'UNIQ_LABEL', mandatory: false, stable_id: },
             { type: :text, libelle: 'nom', mandatory: true, condition: }
           ])
       end
@@ -513,7 +512,7 @@ describe 'The user', js: true do
 
         fill_individual
 
-        fill_in('age (facultatif)', with: '18')
+        fill_in('UNIQ_LABEL', with: '18')
         expect(page).to have_css('label', text: 'nom', visible: :visible)
         expect(page).to have_css('.icon.mandatory')
         click_on 'Déposer le dossier'
@@ -550,7 +549,7 @@ describe 'The user', js: true do
         expect(page).to have_no_css('legend', text: 'info voiture', visible: true)
         expect(page).to have_no_css('label', text: 'tonnage', visible: true)
 
-        fill_in('age du candidat (facultatif)', with: '18')
+        fill_in('age du candidat', with: '18')
         expect(page).to have_css('legend', text: 'permis de conduire', visible: true)
         expect(page).to have_css('legend', text: 'info voiture', visible: true)
         expect(page).to have_no_css('label', text: 'tonnage', visible: true)
@@ -563,10 +562,10 @@ describe 'The user', js: true do
         expect(page).to have_css('label', text: 'parking', visible: true)
 
         # try to fill with invalid data
-        fill_in('tonnage (facultatif)', with: 'a')
+        fill_in('tonnage', with: 'a')
         expect(page).to have_no_css('label', text: 'parking', visible: true)
 
-        fill_in('age du candidat (facultatif)', with: '2')
+        fill_in('age du candidat', with: '2')
         expect(page).to have_no_css('legend', text: 'permis de conduire', visible: true)
         expect(page).to have_no_css('label', text: 'tonnage', visible: true)
 
@@ -578,7 +577,7 @@ describe 'The user', js: true do
         expect(page).to have_no_css('legend', text: 'permis de conduire', visible: true)
         expect(page).to have_no_css('label', text: 'tonnage', visible: true)
 
-        fill_in('age du candidat (facultatif)', with: '18')
+        fill_in('age du candidat', with: '18')
         wait_for_autosave
 
         # the champ keeps their previous value so they are all displayed