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:
commit
10909c8879
20 changed files with 44 additions and 55 deletions
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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} » "
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -45,7 +45,6 @@ module ApplicationHelper
|
|||
when 'alert', 'error'
|
||||
class_names << 'alert-danger'
|
||||
end
|
||||
|
||||
if sticky
|
||||
class_names << 'sticky'
|
||||
end
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -1,14 +1,13 @@
|
|||
#flash_messages{ aria: { live: 'assertive' } }
|
||||
#flash_messages{ tabindex: '-1', data: { turbo_force: :server } }
|
||||
#flash_message.center{ class: defined?(unique_classname) ? unique_classname : '' }
|
||||
- if flash.any?
|
||||
#flash_message.center
|
||||
- flash.each do |key, value|
|
||||
- sticky = defined?(sticky) ? sticky : false
|
||||
- fixed = defined?(fixed) ? fixed : false
|
||||
.alert{ role: flash_role(key), class: flash_class(key, sticky: sticky, fixed: fixed) }
|
||||
- if value.class == Array
|
||||
.alert{ class: flash_class(key, sticky: sticky, fixed: fixed), role: flash_role(key) }
|
||||
- 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) }
|
||||
= sanitize_with_link(value)
|
||||
|
|
|
@ -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'
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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
|
||||
>
|
||||
|
|
|
@ -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
|
||||
>
|
||||
|
|
|
@ -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
|
||||
>
|
||||
|
|
|
@ -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
|
||||
>
|
||||
|
|
|
@ -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');")
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue