diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index be434a232..1c60811ad 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/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 { diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss index fb3923cfc..7097b9368 100644 --- a/app/assets/stylesheets/notifications.scss +++ b/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 { diff --git a/app/components/dossiers/batch_operation_component/batch_operation_component.html.haml b/app/components/dossiers/batch_operation_component/batch_operation_component.html.haml index f75cbc6da..c8357feca 100644 --- a/app/components/dossiers/batch_operation_component/batch_operation_component.html.haml +++ b/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 diff --git a/app/components/dropdown/menu_component/menu_component.html.haml b/app/components/dropdown/menu_component/menu_component.html.haml index b1a98d8bc..7b6f16b4f 100644 --- a/app/components/dropdown/menu_component/menu_component.html.haml +++ b/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 diff --git a/app/components/dsfr/input_status_message_component/input_status_message_component.html.haml b/app/components/dsfr/input_status_message_component/input_status_message_component.html.haml index 305d2d07f..9edef67b1 100644 --- a/app/components/dsfr/input_status_message_component/input_status_message_component.html.haml +++ b/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} » " diff --git a/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml b/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml index 09fdd72f9..a6dc331f1 100644 --- a/app/components/editable_champ/champ_label_content_component/champ_label_content_component.html.haml +++ b/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) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index a2f9c6029..88a398cd7 100644 --- a/app/helpers/application_helper.rb +++ b/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 diff --git a/app/views/invites/_dropdown.html.haml b/app/views/invites/_dropdown.html.haml index 45a00864c..3d7de5a12 100644 --- a/app/views/invites/_dropdown.html.haml +++ b/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? diff --git a/app/views/invites/_form.html.haml b/app/views/invites/_form.html.haml index 824d1b36b..8f3922f6f 100644 --- a/app/views/invites/_form.html.haml +++ b/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') diff --git a/app/views/layouts/_flash_messages.html.haml b/app/views/layouts/_flash_messages.html.haml index b0a3e5d72..d2e0eff4c 100644 --- a/app/views/layouts/_flash_messages.html.haml +++ b/app/views/layouts/_flash_messages.html.haml @@ -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) diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index fda1d2b0c..d65475e72 100644 --- a/app/views/layouts/_header.haml +++ b/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' diff --git a/app/views/layouts/application.turbo_stream.haml b/app/views/layouts/application.turbo_stream.haml index c359b707a..bb1d0ef95 100644 --- a/app/views/layouts/application.turbo_stream.haml +++ b/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 diff --git a/config/locales/metas.en.yml b/config/locales/metas.en.yml index a8533b1bf..fcec3b045 100644 --- a/config/locales/metas.en.yml +++ b/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: diff --git a/config/locales/metas.fr.yml b/config/locales/metas.fr.yml index b8cc06caf..44f503cd4 100644 --- a/config/locales/metas.fr.yml +++ b/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: diff --git a/public/500.html b/public/500.html index 2bb269345..0f25f7b6e 100644 --- a/public/500.html +++ b/public/500.html @@ -2109,7 +2109,7 @@