Merge pull request #10654 from demarches-simplifiees/a11y-forgotten-password

Améliore l'accessibilité de la page mot de passe oublié

app/assets/stylesheets/01_common.scss

@@ -6,6 +6,11 @@ body {
   scroll-behavior: smooth;
 }
 
+// Forces line breaks to prevent buttons from overflowing their container
+input[type="submit"] {
+  white-space: normal;
+}
+
 .page-wrapper {
   position: relative;
   min-height: 100%;

app/assets/stylesheets/link-sent.scss

@@ -1,42 +0,0 @@
-@import "constants";
-@import "colors";
-
-#link-sent {
-  padding-top: 2 * $default-padding;
-  padding-bottom: 2 * $default-padding;
-  text-align: center;
-  max-width: 700px;
-
-  section {
-    text-align: left;
-    margin: 3 * $default-padding auto;
-  }
-
-  p,
-  ol {
-    margin-top: $default-padding;
-    margin-bottom: $default-padding;
-  }
-
-  .link-sent-info {
-    color: #000000;
-    background-color: $yellow;
-    padding: 0 $default-padding;
-    border: 1px solid transparent; // prevent margin collapse of first paragraph
-  }
-
-  .link-sent-help {
-    border-top: 1px solid $grey;
-    padding-top: $default-padding;
-    margin-bottom: $default-padding;
-  }
-
-  .link-sent-help-title {
-    font-weight: bold;
-  }
-
-  .link-sent-help-list {
-    list-style-position: outside;
-    padding-left: $default-padding;
-  }
-}

app/views/devise/passwords/new.html.haml

@@ -9,8 +9,8 @@
       = devise_error_messages!
 
       = form_for(resource, as: resource_name, url: password_path(resource_name)) do |f|
-        %fieldset.fr-mb-0.fr-fieldset{ aria: { labelledby: 'new-password-legend' } }
-          %legend.fr-fieldset__legend#new-password-legend
+        %fieldset.fr-mb-0.fr-fieldset
+          %legend.fr-fieldset__legend
             %h1.fr-h2= t('devise.passwords.new.forgot_your_password')
 
           .fr-fieldset__element

app/views/users/passwords/reset_link_sent.html.haml

@@ -3,24 +3,26 @@
 - content_for :footer do
   = render partial: 'root/footer'
 
-#link-sent.container
-  = image_tag('user/confirmation-email.svg', "aria-hidden": true)
-  %h1
+.fr-container.fr-mt-4w.fr-mb-3w
+  .fr-grid-row.fr-grid-row--center
+    .fr-col-12.fr-col-md-9.fr-col-lg-7
+      .center
+        = image_tag('user/confirmation-email.svg', alt: "")
+        %h1.fr-mb-6w
           = t('views.users.passwords.reset_link_sent.got_it')
           %br
           = t('views.users.passwords.reset_link_sent.open_your_mailbox')
 
-  %section.link-sent-info
-    %p
+      .fr-callout.fr-callout--green-emeraude.fr-mb-6w
+        %p.fr-callout__text.fr-mb-2w
           = t('views.users.passwords.reset_link_sent.email_sent_html', email: @email, application_name: Current.application_name)
-    %p
+        %p.fr-callout__text.fr-mb-2w
           = t('views.users.passwords.reset_link_sent.click_link_to_reset_password')
-    %p
+        %p.fr-callout__text
           = t('views.users.shared.email_can_take_a_while_html')
 
-  %section.link-sent-help
-    %h2.link-sent-help-title= t('views.users.passwords.reset_link_sent.no_mail')
-    %ol.link-sent-help-list
+      %h2= t('views.users.passwords.reset_link_sent.no_mail')
+      %ol
         %li
           = t('views.users.passwords.reset_link_sent.check_spams')
         %li
@@ -28,7 +30,6 @@
         - if FranceConnectService.enabled?
           %li
             = t('views.users.passwords.reset_link_sent.check_france_connect_html', href: france_connect_particulier_path)
-
         %li
           = t('views.users.passwords.reset_link_sent.check_gpdr')
       %p