Merge pull request #10838 from demarches-simplifiees/a11y-fix-password-security-alert

Ajoute la vocalisation du composant d'analyse de complexicité du mot de passe pour les technologies d'assistance

app/components/instructeurs/activate_account_form_component/activate_account_form_component.html.haml

@@ -16,7 +16,7 @@
 
       .fr-fieldset__element
         = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
-          opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }})
+          opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }, aria: {describedby: 'password_hint'}})
 
         #password_complexity
           = render PasswordComplexityComponent.new

app/components/password_complexity_component/password_complexity_component.html.haml

@@ -1,6 +1,7 @@
-%div{ class: complexity_classes }
+%div{ "aria-hidden":"true", class: complexity_classes }
 
-%div{ class: alert_classes }
-  %h3.fr-alert__title= title
+#password_hint{ class: alert_classes }
+  %h3.fr-alert__title{ "aria-live": "polite", "aria-atomic": "true" }
+    = title
   - if !success?
     = t(".hint_html")

app/views/administrateurs/activate/new.html.haml

@@ -18,7 +18,7 @@
 
           .fr-fieldset__element
             = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
-              opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }})
+              opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }, aria: {describedby: 'password_hint'}})
 
             #password_complexity
               = render PasswordComplexityComponent.new

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

@@ -12,17 +12,19 @@
         = f.hidden_field :reset_password_token
 
 
-        %fieldset.fr-mb-0.fr-fieldset{ aria: { labelledby: 'edit-password-legend' } }
-          %legend.fr-fieldset__legend#edit-password-legend
+        %fieldset.fr-mb-0.fr-fieldset
+          %legend.fr-fieldset__legend
             %h1.fr-h2= I18n.t('views.users.passwords.edit.subtitle')
 
+          .fr-fieldset__element
+            %p.fr-text--sm= t('utils.asterisk_html')
+
           .fr-fieldset__element
             = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
-              opts: { autofocus: 'true', autocomplete: 'new-password', minlength: PASSWORD_MIN_LENGTH, data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }}) do |c|
-              - c.with_describedby do
-                %div{ id: c.describedby_id }
-                  #password_complexity
-                    = render PasswordComplexityComponent.new
+              opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }, aria: {describedby: 'password_hint'}})
+
+            #password_complexity
+              = render PasswordComplexityComponent.new
 
           .fr-fieldset__element
             = render Dsfr::InputComponent.new(form: f, attribute: :password_confirmation, input_type: :password_field, opts: { autocomplete: 'new-password' })

app/views/experts/avis/sign_up.html.haml

@@ -14,7 +14,7 @@
 
           .fr-fieldset__element
             = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
-              opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }})
+              opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }, aria: {describedby: 'password_hint'}})
 
             #password_complexity
               = render PasswordComplexityComponent.new

app/views/gestionnaires/activate/new.html.haml

@@ -18,7 +18,7 @@
 
           .fr-fieldset__element
             = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
-              opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }})
+              opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }, aria: {describedby: 'password_hint'}})
 
             #password_complexity
               = render PasswordComplexityComponent.new

app/views/users/registrations/new.html.haml

@@ -19,7 +19,7 @@
 
       .fr-fieldset__element
         = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
-          opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }})
+          opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }, aria: {describedby: 'password_hint'}})
 
         #password_complexity
           = render PasswordComplexityComponent.new