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

Restitution des bandeau de statut (erreur ou succès)
This commit is contained in:
Corinne Durrmeyer 2024-10-28 10:34:38 +00:00 committed by GitHub
commit 10909c8879
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 44 additions and 55 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -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} » "

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -12,13 +12,13 @@ en:
identite:
title: "New file (%{procedure_label}) - Step 1: Identity"
show:
title: "Summary · File %{number} (%{procedure_label})"
title: "Summary · File %{number} (%{procedure_label})"
demande:
title: "Application · File %{number} (%{procedure_label})"
title: "Application · File %{number} (%{procedure_label})"
messagerie:
title: "Mailbox · File %{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:

View file

@ -12,13 +12,13 @@ fr:
identite:
title: "Nouveau dossier (%{procedure_label}) - Étape 1 : Identité"
show:
title: "Résumé · Dossier %{number} (%{procedure_label})"
title: "Résumé · Dossier %{number} (%{procedure_label})"
demande:
title: "Demande · Dossier %{number} (%{procedure_label})"
title: "Demande · Dossier %{number} (%{procedure_label})"
messagerie:
title: "Messagerie · Dossier %{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:

View file

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

View file

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

View file

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

View file

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

View file

@ -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');")

View file

@ -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('age (facultatif)', with: 10)
fill_in('UNIQ_LABEL', 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