Merge pull request #6785 from tchak/fix-a11y-current-page

fix(a11y): add aria to tabs

app/views/administrateurs/procedures/apercu.html.haml

@@ -2,7 +2,8 @@
   .container
     %h1.page-title Prévisualisation de la démarche « #{@dossier.procedure.libelle} »
 
-    %ul.tabs
+    %nav.tabs
+      %ul
         = tab_item('le dossier',
           apercu_admin_procedure_path(@dossier.procedure, tab: 'dossier'),
           active: @tab == 'dossier')

app/views/administrateurs/procedures/index.html.haml

@@ -3,7 +3,8 @@
     = link_to "Nouvelle Démarche", new_from_existing_admin_procedures_path, id: 'new-procedure', class: 'button primary'
   .container
 
-    %ul.tabs
+    %nav.tabs
+      %ul
         = tab_item(t('pluralize.published', count: @procedures_publiees.count), admin_procedures_path(statut: 'publiees'), active: @statut == 'publiees', badge: number_with_html_delimiter(@procedures_publiees_count))
         = tab_item('En test', admin_procedures_path(statut: 'brouillons'), active: @statut == 'brouillons', badge: number_with_html_delimiter(@procedures_draft_count))
         = tab_item(t('pluralize.closed', count: @procedures_closed.count), admin_procedures_path(statut: 'archivees'), active: @statut == 'archivees', badge: number_with_html_delimiter(@procedures_closed_count))

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

@@ -15,7 +15,8 @@
             - else
               %p.menu-item Le téléchargement des pièces jointes est désactivé pour les dossiers de plus de #{number_to_human_size Dossier::TAILLE_MAX_ZIP}.
 
-    %ul.tabs
+    %nav.tabs
+      %ul
         = dynamic_tab_item('Demande', expert_avis_path(avis.procedure, avis))
         = dynamic_tab_item('Avis', instruction_expert_avis_path(avis.procedure, avis), notification: avis.answer.blank?)
         = dynamic_tab_item('Messagerie', messagerie_expert_avis_path(avis.procedure, avis))

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

@@ -11,7 +11,8 @@
       .procedure-header
         %h1= procedure_libelle @procedure
 
-        %ul.tabs
+        %nav.tabs
+          %ul
             = tab_item('avis à donner',
               procedure_expert_avis_index_path(statut: Instructeurs::AvisController::A_DONNER_STATUS),
               active: @statut == Instructeurs::AvisController::A_DONNER_STATUS,

app/views/instructeurs/avis/_header.html.haml

@@ -5,7 +5,8 @@
       %li= link_to(dossier.procedure.libelle, procedure_instructeur_avis_index_path(avis.procedure))
       %li= link_to("Dossier nº #{dossier.id}", instructeur_avis_path(avis.procedure, avis))
 
-    %ul.tabs
+    %nav.tabs
+      %ul
         = dynamic_tab_item('Demande', instructeur_avis_path(avis.procedure, avis))
         = dynamic_tab_item('Avis', instruction_instructeur_avis_path(avis.procedure, avis), notification: avis.answer.blank?)
         = dynamic_tab_item('Messagerie', messagerie_instructeur_avis_path(avis.procedure, avis))

app/views/instructeurs/avis/procedure.html.haml

@@ -11,7 +11,8 @@
       .procedure-header
         %h1= procedure_libelle @procedure
 
-        %ul.tabs
+        %nav.tabs
+          %ul
             = tab_item('avis à donner',
               procedure_instructeur_avis_index_path(statut: Instructeurs::AvisController::A_DONNER_STATUS),
               active: @statut == Instructeurs::AvisController::A_DONNER_STATUS,

app/views/instructeurs/dossiers/_header.html.haml

@@ -15,7 +15,8 @@
 
     = render(partial: 'instructeurs/dossiers/expiration_banner', locals: {dossier: dossier})
 
-    %ul.tabs
+    %nav.tabs
+      %ul
         - notifications_summary = current_instructeur.notifications_for_dossier(dossier)
 
         = dynamic_tab_item('Demande',

app/views/instructeurs/procedures/_tabs.html.haml

@@ -1,4 +1,5 @@
-%ul.tabs.mt-3
+%nav.tabs.mt-3
+  %ul
     = tab_item('à suivre',
       instructeur_procedure_path(procedure, statut: 'a-suivre'),
       active: statut == 'a-suivre',

app/views/root/patron.html.haml

@@ -244,7 +244,8 @@
   .sub-header
     .container
       Titre
-      %ul.tabs
+      %nav.tabs
+        %ul
           = tab_item("Onglet actif", "#", active: true)
           = tab_item("Onglet inactif", "#")
           = tab_item("Onglet avec badge", "#", badge: 2)

app/views/shared/_tab_item.html.haml

@@ -1,7 +1,7 @@
 %li{ class: (active ? 'active' : nil) }
   - if notification
     %span.notifications{ 'aria-label': 'notifications' }
-  = link_to(url) do
+  = link_to(url, 'aria-current': active ? 'page' : nil) do
     - if badge.present?
       %span.badge= badge
     = label

app/views/users/dossiers/index.html.haml

@@ -14,7 +14,8 @@
 
     - else
       %h1.page-title= t('views.users.dossiers.index.dossiers')
-      %ul.tabs
+      %nav.tabs
+        %ul
           - if @user_dossiers.present?
             = tab_item(t('pluralize.en_cours', count: @user_dossiers.count),
               dossiers_path(statut: 'en-cours'),

app/views/users/dossiers/show/_header.html.haml

@@ -26,7 +26,8 @@
               = link_to t('views.users.dossiers.show.header.print_dossier'), dossier_path(dossier, format: :pdf), target: "_blank", rel: "noopener", class: "menu-item menu-link"
 
 
-    %ul.tabs
+    %nav.tabs
+      %ul
         = dynamic_tab_item(t('views.users.dossiers.show.header.summary'), dossier_path(dossier))
         = dynamic_tab_item(t('views.users.dossiers.show.header.request'), [demande_dossier_path(dossier), modifier_dossier_path(dossier)])
         = dynamic_tab_item(t('views.users.dossiers.show.header.mailbox'), messagerie_dossier_path(dossier))

spec/views/users/dossiers/index.html.haml_spec.rb

@@ -56,7 +56,7 @@ describe 'users/dossiers/index.html.haml', type: :view do
     end
 
     it 'n’affiche la barre d’onglets' do
-      expect(rendered).to have_selector('ul.tabs')
+      expect(rendered).to have_selector('nav.tabs')
     end
   end
 
@@ -68,9 +68,9 @@ describe 'users/dossiers/index.html.haml', type: :view do
     end
 
     it 'affiche la barre d’onglets' do
-      expect(rendered).to have_selector('ul.tabs')
+      expect(rendered).to have_selector('nav.tabs')
-      expect(rendered).to have_selector('ul.tabs li', count: 4)
+      expect(rendered).to have_selector('nav.tabs li', count: 4)
-      expect(rendered).to have_selector('ul.tabs li.active', count: 1)
+      expect(rendered).to have_selector('nav.tabs li.active', count: 1)
     end
   end
 

spec/views/users/dossiers/show/_header.html.haml_spec.rb

@@ -12,7 +12,7 @@ describe 'users/dossiers/show/header.html.haml', type: :view do
     expect(rendered).to have_text("Dossier nº #{dossier.id}")
     expect(rendered).to have_text("en construction")
 
-    expect(rendered).to have_selector("ul.tabs")
+    expect(rendered).to have_selector("nav.tabs")
     expect(rendered).to have_link("Résumé", href: dossier_path(dossier))
     expect(rendered).to have_link("Demande", href: demande_dossier_path(dossier))
   end