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

fix(a11y): add aria to tabs
2022-01-04 09:48:37 +01:00 · 2022-01-04 09:48:37 +01:00 · ec6c71beea
commit ec6c71beea
parent d15b85633a 7f0dde9be4
14 changed files with 141 additions and 130 deletions
--- a/app/views/administrateurs/procedures/apercu.html.haml
+++ b/app/views/administrateurs/procedures/apercu.html.haml
@ -2,14 +2,15 @@
  .container
    %h1.page-title Prévisualisation de la démarche «&nbsp;#{@dossier.procedure.libelle}&nbsp;»

-    %ul.tabs
-      = tab_item('le dossier',
-        apercu_admin_procedure_path(@dossier.procedure, tab: 'dossier'),
-        active: @tab == 'dossier')
-      - if @dossier.champs_private.size > 0
-        = tab_item('les annotations privées',
-          apercu_admin_procedure_path(@dossier.procedure, tab: 'annotations-privees'),
-          active: @tab == 'annotations-privees')
+    %nav.tabs
+      %ul
+        = tab_item('le dossier',
+          apercu_admin_procedure_path(@dossier.procedure, tab: 'dossier'),
+          active: @tab == 'dossier')
+        - if @dossier.champs_private.size > 0
+          = tab_item('les annotations privées',
+            apercu_admin_procedure_path(@dossier.procedure, tab: 'annotations-privees'),
+            active: @tab == 'annotations-privees')

 - if @tab == 'dossier'
  = render partial: "shared/dossiers/edit", locals: { dossier: @dossier, apercu: true }
--- a/app/views/administrateurs/procedures/index.html.haml
+++ b/app/views/administrateurs/procedures/index.html.haml
@ -3,10 +3,11 @@
    = link_to "Nouvelle Démarche", new_from_existing_admin_procedures_path, id: 'new-procedure', class: 'button primary'
  .container

-    %ul.tabs
-      = 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))
+    %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))

 .container#procedures{ data: { item_count: @statut === "publiees" ? @procedures_publiees_count : @statut === "brouillons" ? @procedures_draft_count : @procedures_closed_count } }
  - if @statut === "publiees"
--- a/app/views/experts/avis/_header.html.haml
+++ b/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
-      = 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))
+    %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))
--- a/app/views/experts/avis/procedure.html.haml
+++ b/app/views/experts/avis/procedure.html.haml
@ -11,17 +11,18 @@
      .procedure-header
        %h1= procedure_libelle @procedure

-        %ul.tabs
-          = tab_item('avis à donner',
-            procedure_expert_avis_index_path(statut: Instructeurs::AvisController::A_DONNER_STATUS),
-            active: @statut == Instructeurs::AvisController::A_DONNER_STATUS,
-            badge: @avis_a_donner.count,
-            notification: @avis_a_donner.any?)
+        %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,
+              badge: @avis_a_donner.count,
+              notification: @avis_a_donner.any?)

-          = tab_item("avis #{'donné'.pluralize(@avis_donnes.count)}",
-            procedure_expert_avis_index_path(statut: Instructeurs::AvisController::DONNES_STATUS),
-            active: @statut == Instructeurs::AvisController::DONNES_STATUS,
-            badge: @avis_donnes.count)
+            = tab_item("avis #{'donné'.pluralize(@avis_donnes.count)}",
+              procedure_expert_avis_index_path(statut: Instructeurs::AvisController::DONNES_STATUS),
+              active: @statut == Instructeurs::AvisController::DONNES_STATUS,
+              badge: @avis_donnes.count)

 .container
  - if @avis.present?
--- a/app/views/instructeurs/avis/_header.html.haml
+++ b/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
-      = 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))
+    %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))
--- a/app/views/instructeurs/avis/procedure.html.haml
+++ b/app/views/instructeurs/avis/procedure.html.haml
@ -11,17 +11,18 @@
      .procedure-header
        %h1= procedure_libelle @procedure

-        %ul.tabs
-          = tab_item('avis à donner',
-            procedure_instructeur_avis_index_path(statut: Instructeurs::AvisController::A_DONNER_STATUS),
-            active: @statut == Instructeurs::AvisController::A_DONNER_STATUS,
-            badge: @avis_a_donner.count,
-            notification: @avis_a_donner.any?)
+        %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,
+              badge: @avis_a_donner.count,
+              notification: @avis_a_donner.any?)

-          = tab_item("avis #{'donné'.pluralize(@avis_donnes.count)}",
-            procedure_instructeur_avis_index_path(statut: Instructeurs::AvisController::DONNES_STATUS),
-            active: @statut == Instructeurs::AvisController::DONNES_STATUS,
-            badge: @avis_donnes.count)
+            = tab_item("avis #{'donné'.pluralize(@avis_donnes.count)}",
+              procedure_instructeur_avis_index_path(statut: Instructeurs::AvisController::DONNES_STATUS),
+              active: @statut == Instructeurs::AvisController::DONNES_STATUS,
+              badge: @avis_donnes.count)

 .container
  - if @avis.present?
--- a/app/views/instructeurs/dossiers/_header.html.haml
+++ b/app/views/instructeurs/dossiers/_header.html.haml
@ -15,27 +15,28 @@

    = render(partial: 'instructeurs/dossiers/expiration_banner', locals: {dossier: dossier})

-    %ul.tabs
-      - notifications_summary = current_instructeur.notifications_for_dossier(dossier)
+    %nav.tabs
+      %ul
+        - notifications_summary = current_instructeur.notifications_for_dossier(dossier)

-      = dynamic_tab_item('Demande',
-        instructeur_dossier_path(dossier.procedure, dossier),
-        notification: notifications_summary[:demande])
+        = dynamic_tab_item('Demande',
+          instructeur_dossier_path(dossier.procedure, dossier),
+          notification: notifications_summary[:demande])

-      = dynamic_tab_item('Annotations privées',
-        annotations_privees_instructeur_dossier_path(dossier.procedure, dossier),
-        notification: notifications_summary[:annotations_privees])
+        = dynamic_tab_item('Annotations privées',
+          annotations_privees_instructeur_dossier_path(dossier.procedure, dossier),
+          notification: notifications_summary[:annotations_privees])

-      = dynamic_tab_item('Avis externes',
-        avis_instructeur_dossier_path(dossier.procedure, dossier),
-        notification: notifications_summary[:avis])
+        = dynamic_tab_item('Avis externes',
+          avis_instructeur_dossier_path(dossier.procedure, dossier),
+          notification: notifications_summary[:avis])

-      = dynamic_tab_item('Messagerie',
-        messagerie_instructeur_dossier_path(dossier.procedure, dossier),
-        notification: notifications_summary[:messagerie])
+        = dynamic_tab_item('Messagerie',
+          messagerie_instructeur_dossier_path(dossier.procedure, dossier),
+          notification: notifications_summary[:messagerie])

-      = dynamic_tab_item('Personnes impliquées',
-        personnes_impliquees_instructeur_dossier_path(dossier.procedure, dossier))
+        = dynamic_tab_item('Personnes impliquées',
+          personnes_impliquees_instructeur_dossier_path(dossier.procedure, dossier))

 .container
  .print-header
--- a/app/views/instructeurs/procedures/_tabs.html.haml
+++ b/app/views/instructeurs/procedures/_tabs.html.haml
@ -1,34 +1,35 @@
-%ul.tabs.mt-3
-  = tab_item('à suivre',
-    instructeur_procedure_path(procedure, statut: 'a-suivre'),
-    active: statut == 'a-suivre',
-    badge: number_with_html_delimiter(a_suivre_count))
+%nav.tabs.mt-3
+  %ul
+    = tab_item('à suivre',
+      instructeur_procedure_path(procedure, statut: 'a-suivre'),
+      active: statut == 'a-suivre',
+      badge: number_with_html_delimiter(a_suivre_count))

-  = tab_item(t('pluralize.followed', count: suivis_count),
-    instructeur_procedure_path(procedure, statut: 'suivis'),
-    active: statut == 'suivis',
-    badge: number_with_html_delimiter(suivis_count),
-    notification: has_en_cours_notifications)
+    = tab_item(t('pluralize.followed', count: suivis_count),
+      instructeur_procedure_path(procedure, statut: 'suivis'),
+      active: statut == 'suivis',
+      badge: number_with_html_delimiter(suivis_count),
+      notification: has_en_cours_notifications)

-  = tab_item(t('pluralize.processed', count: traites_count),
-    instructeur_procedure_path(procedure, statut: 'traites'),
-    active: statut == 'traites',
-    badge: number_with_html_delimiter(traites_count),
-    notification: has_termine_notifications)
+    = tab_item(t('pluralize.processed', count: traites_count),
+      instructeur_procedure_path(procedure, statut: 'traites'),
+      active: statut == 'traites',
+      badge: number_with_html_delimiter(traites_count),
+      notification: has_termine_notifications)

-  = tab_item('au total',
-    instructeur_procedure_path(procedure, statut: 'tous'),
-    active: statut == 'tous',
-    badge: number_with_html_delimiter(tous_count))
+    = tab_item('au total',
+      instructeur_procedure_path(procedure, statut: 'tous'),
+      active: statut == 'tous',
+      badge: number_with_html_delimiter(tous_count))

-  - if procedure.procedure_expires_when_termine_enabled
-    = tab_item(t('pluralize.dossiers_close_to_expiration', count: expirant_count),
-      instructeur_procedure_path(procedure, statut: 'expirant'),
-      active: statut == 'expirant',
-      badge: number_with_html_delimiter(expirant_count))
+    - if procedure.procedure_expires_when_termine_enabled
+      = tab_item(t('pluralize.dossiers_close_to_expiration', count: expirant_count),
+        instructeur_procedure_path(procedure, statut: 'expirant'),
+        active: statut == 'expirant',
+        badge: number_with_html_delimiter(expirant_count))

-  = tab_item(t('pluralize.archived', count: archives_count),
-    instructeur_procedure_path(procedure, statut: 'archives'),
-    active: statut == 'archives',
-    badge: number_with_html_delimiter(archives_count))
+    = tab_item(t('pluralize.archived', count: archives_count),
+      instructeur_procedure_path(procedure, statut: 'archives'),
+      active: statut == 'archives',
+      badge: number_with_html_delimiter(archives_count))

--- a/app/views/root/patron.html.haml
+++ b/app/views/root/patron.html.haml
@ -244,11 +244,12 @@
  .sub-header
    .container
      Titre
-      %ul.tabs
-        = tab_item("Onglet actif", "#", active: true)
-        = tab_item("Onglet inactif", "#")
-        = tab_item("Onglet avec badge", "#", badge: 2)
-        = tab_item("Onglet avec notification", "#", notification: true)
+      %nav.tabs
+        %ul
+          = tab_item("Onglet actif", "#", active: true)
+          = tab_item("Onglet inactif", "#")
+          = tab_item("Onglet avec badge", "#", badge: 2)
+          = tab_item("Onglet avec notification", "#", notification: true)

  .container
    %h1 Breadcrumbs
--- a/app/views/shared/_tab_item.html.haml
+++ b/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
--- a/app/views/users/dossiers/index.html.haml
+++ b/app/views/users/dossiers/index.html.haml
@ -14,41 +14,42 @@

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

-        - if @dossiers_invites.present?
-          = tab_item(t('pluralize.dossiers_invites', count: @dossiers_invites.count),
-            dossiers_path(statut: 'dossiers-invites'),
-            active: @statut == 'dossiers-invites',
-            badge: number_with_html_delimiter(@dossiers_invites.count))
+          - if @dossiers_invites.present?
+            = tab_item(t('pluralize.dossiers_invites', count: @dossiers_invites.count),
+              dossiers_path(statut: 'dossiers-invites'),
+              active: @statut == 'dossiers-invites',
+              badge: number_with_html_delimiter(@dossiers_invites.count))

-        - if @dossiers_close_to_expiration.count > 0
-          = tab_item(t('pluralize.dossiers_close_to_expiration', count: @dossiers_close_to_expiration.count),
-            dossiers_path(statut: 'dossiers-expirant'),
-            active: @statut == 'dossiers-expirant',
-            badge: number_with_html_delimiter(@dossiers_close_to_expiration.count))
+          - if @dossiers_close_to_expiration.count > 0
+            = tab_item(t('pluralize.dossiers_close_to_expiration', count: @dossiers_close_to_expiration.count),
+              dossiers_path(statut: 'dossiers-expirant'),
+              active: @statut == 'dossiers-expirant',
+              badge: number_with_html_delimiter(@dossiers_close_to_expiration.count))

-        - if @dossiers_supprimes.present?
-          = tab_item(t('pluralize.dossiers_supprimes', count: @dossiers_supprimes.count),
-            dossiers_path(statut: 'dossiers-supprimes'),
-            active: @statut == 'dossiers-supprimes',
-            badge: number_with_html_delimiter(@dossiers_supprimes.count))
+          - if @dossiers_supprimes.present?
+            = tab_item(t('pluralize.dossiers_supprimes', count: @dossiers_supprimes.count),
+              dossiers_path(statut: 'dossiers-supprimes'),
+              active: @statut == 'dossiers-supprimes',
+              badge: number_with_html_delimiter(@dossiers_supprimes.count))

-        - if @dossier_transfers.present?
-          = tab_item(t('pluralize.dossiers_transferes', count: @dossier_transfers.count),
-            dossiers_path(statut: 'dossiers-transferes'),
-            active: @statut == 'dossiers-transferes',
-            badge: number_with_html_delimiter(@dossier_transfers.count))
+          - if @dossier_transfers.present?
+            = tab_item(t('pluralize.dossiers_transferes', count: @dossier_transfers.count),
+              dossiers_path(statut: 'dossiers-transferes'),
+              active: @statut == 'dossiers-transferes',
+              badge: number_with_html_delimiter(@dossier_transfers.count))

 .container
  - if @statut == "en-cours"
--- a/app/views/users/dossiers/show/_header.html.haml
+++ b/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
-      = 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))
+    %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))
--- a/spec/views/users/dossiers/index.html.haml_spec.rb
+++ b/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('ul.tabs li', count: 4)
-      expect(rendered).to have_selector('ul.tabs li.active', count: 1)
+      expect(rendered).to have_selector('nav.tabs')
+      expect(rendered).to have_selector('nav.tabs li', count: 4)
+      expect(rendered).to have_selector('nav.tabs li.active', count: 1)
    end
  end

--- a/spec/views/users/dossiers/show/_header.html.haml_spec.rb
+++ b/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