fix(a11y): wizard, sessions, habilitations — h1, tableau, couleur statut, DataPass (NC 3.1, 5.3, 9.1, 13.2)

- sessions/_new: h2 → h1 class="fr-h2" (NC 9.1) + fr-sr-only sur lien ProConnect (NC 13.2)
- wizard/_header: h2 → h1 class="fr-h2" (NC 9.1) + fr-sr-only sur lien DataPass (NC 13.2)
- wizard/contacts: h4 → h3 (hiérarchie correcte sous h1) (NC 9.1)
- wizard/prolonged: h3.fr-alert__title → p.fr-alert__title (NC 9.1)
- wizard/owner + authorization_requests/_header: fr-sr-only sur liens DataPass (NC 13.2)
- authorization_requests/show: caption tableau + h2 contact_technique → h3 (NC 5.3, 9.1)
- pages/current_status: aria-hidden sur cercle + fr-sr-only statut textuel (NC 3.1, 13.2)

Partially solves API-6952

Author: Samuelfaure

site/app/views/shared/authorization_requests/_header.html.erb

@@ -13,7 +13,7 @@
     <b><%= t('.delivered_at', humanized_date: friendly_format_from_timestamp(authorization_request.created_at)) %></b>
     -
     <% if to_datapass %>
-    <%= link_to t('shared.links.to_datapass', external_id: authorization_request.external_id).html_safe,
+    <%= link_to (t('shared.links.to_datapass', external_id: authorization_request.external_id) + content_tag(:span, ' (nouvelle fenêtre)', class: 'fr-sr-only')).html_safe,
       datapass_authorization_request_url(authorization_request),
       id: :authorization_request_link,
       class: %w(fr-link fr-text--xs),

site/app/views/shared/authorization_requests/show.html.erb

@@ -121,6 +121,7 @@
           <div class="fr-collapse" id="accordion-106"/>
           <div class="fr-table fr-table--bordered fr-table--layout-fixed fr-m-0 fr-p-0">
             <table>
+              <caption class="fr-sr-only"><%= t('.other_tokens.title') %></caption>
               <thead>
                   <tr>
                     <th scope="col"><%= t('.other_tokens.table.identifier')%></th>
@@ -231,10 +232,10 @@
               <% end %>
               <% if @authorization_request.contact_technique.present? %>
                 <div id="contact_technique" class="fr-col-12 fr-col-md-6 fr-col-lg-4 fr-mb-16v">
-                  <h2 class="fr-h6">
+                  <h3 class="fr-h6">
                     <i class="fr-icon fr-icon-user-star-line fr-mr-1v" aria-hidden="true"></i>
                     <%= t('.contacts.contact_technique.title').html_safe %>
-                  </h2>
+                  </h3>
                   <div class="fr-card">
                     <% if @authorization_request.contact_technique == current_user %>
                       <div class="fr-card__header">

site/app/views/shared/pages/current_status.html.erb

@@ -1,5 +1,8 @@
 <turbo-frame id="current_status">
   <a class="fr-link" href="https://status.<%= namespace == 'api_entreprise' ? 'entreprise' : 'particulier' %>.api.gouv.fr" title="API <%= namespace.humanize %> Status Page" target="_blank">
-    <span class="circle circle-<%= status_to_color(@current_status) %> fr-mr-1w"></span> <%= t('.title') %>
+    <span class="circle circle-<%= status_to_color(@current_status) %> fr-mr-1w" aria-hidden="true"></span>
+    <span class="fr-sr-only"><%= @current_status %> — </span>
+    <%= t('.title') %>
+    <span class="fr-sr-only">(nouvelle fenêtre)</span>
   </a>
 </turbo-frame>

site/app/views/shared/prolong_token_wizard/build/_header.html.erb

@@ -1,18 +1,18 @@
 <div class="fr-pb-4v">
-  <h2>
+  <h1 class="fr-h2">
     <%= t('shared.prolong_token_wizard.header.title') %>
-  </h2>
+  </h1>
   <p>
   <%= t(
     'shared.prolong_token_wizard.header.description', 
     humanize_date: friendly_format_from_timestamp(prolong_token_wizard.token.exp), 
     link_to_datapass: link_to(
-      t('shared.links.to_datapass', external_id: prolong_token_wizard.token.authorization_request.external_id).html_safe, 
-      datapass_authorization_request_url(prolong_token_wizard.token.authorization_request), 
+      (t('shared.links.to_datapass', external_id: prolong_token_wizard.token.authorization_request.external_id) + content_tag(:span, ' (nouvelle fenêtre)', class: 'fr-sr-only')).html_safe,
+      datapass_authorization_request_url(prolong_token_wizard.token.authorization_request),
       id: :authorization_request_link,
-      class: %w(fr-link), 
+      class: %w(fr-link),
       target: '_blank'
-    ).html_safe, 
+    ).html_safe,
     api: t("#{namespace}.api"),
     api_name: t("#{namespace}.name")
     ).html_safe

site/app/views/shared/prolong_token_wizard/contacts.html.erb

@@ -3,9 +3,9 @@
 <div class="fr-p-4v" style="background-color: var(--background-default-grey)">
   <%= render partial: 'shared/prolong_token_wizard/build/stepper', locals: { prolong_token_wizard: @prolong_token_wizard } %>
   <%= form_for @prolong_token_wizard, url: wizard_path, method: :put do |f| %>
-    <h4>
+    <h3>
       <%= t('.subtitle') %>
-    </h4>
+    </h3>
 
     <% if @prolong_token_wizard.authorization_request.api == 'particulier' %>
       <div class="fr-fieldset__element">

site/app/views/shared/prolong_token_wizard/owner.html.erb

@@ -8,7 +8,7 @@
       <%= f.label :owner,
         t('.label',
           link_to_datapass: link_to(
-            t('shared.links.to_datapass', external_id: @prolong_token_wizard.token.authorization_request.external_id).html_safe,
+            (t('shared.links.to_datapass', external_id: @prolong_token_wizard.token.authorization_request.external_id) + content_tag(:span, ' (nouvelle fenêtre)', class: 'fr-sr-only')).html_safe,
             datapass_authorization_request_url(@prolong_token_wizard.token.authorization_request),
             id: :authorization_request_link,
             class: %w(fr-link),

site/app/views/shared/prolong_token_wizard/prolonged.html.erb

@@ -1,5 +1,5 @@
 <div class="fr-alert fr-alert--success">
-    <h3 class="fr-alert__title"><%= t('.title', humanized_date: friendly_format_from_timestamp(@prolong_token_wizard.token.exp)) %></h3>
+    <p class="fr-alert__title"><%= t('.title', humanized_date: friendly_format_from_timestamp(@prolong_token_wizard.token.exp)) %></p>
     <p><%= t('.description', api_name: t("#{namespace}.name")) %></p>
 </div>
 

site/app/views/shared/sessions/_new.html.erb

@@ -1,6 +1,6 @@
-<h2 class="center">
+<h1 class="center fr-h2">
   <%= t('.title').html_safe %>
-</h2>
+</h1>
 
 <div class="fr-container">
   <div class="fr-grid-row">
@@ -12,8 +12,9 @@
             <span class="fr-connect__brand">ProConnect</span>
           <% end %>
             <p>
-              <a href="https://www.proconnect.gouv.fr/" target="_blank"  rel="noopener" title="Qu’est-ce que ProConnect ? - Nouvelle fenêtre">
+              <a href="https://www.proconnect.gouv.fr/" target="_blank" rel="noopener">
                 Qu’est-ce que ProConnect ?
+                <span class="fr-sr-only">(nouvelle fenêtre)</span>
               </a>
             </p>
         <% end %>