Merge pull request #8146 from colinux/fix-a11y-criteria-6.1

a11y: fix non explicit links (criteria 6.1)

app/assets/stylesheets/new_footer.scss

@@ -13,10 +13,8 @@
   opacity: 0.8;
 }
 
-.footer-logo-beta-gouv-fr {
+.fr-footer__logo {
-  @include ie-compatible-background-image("footer/logo-beta-gouv-fr.svg");
+  &.logo-beta-gouv-fr {
-
+    width: 9rem;
-  width: 150px;
+  }
-  height: 25px;
-  margin-top: 14px;
 }

app/helpers/application_helper.rb

@@ -72,13 +72,13 @@ module ApplicationHelper
   def root_path_info_for_profile(nav_bar_profile)
     case nav_bar_profile
     when :administrateur
-      [admin_procedures_path, "Aller au panneau d’administration"]
+      [admin_procedures_path, t("admin", scope: "layouts.root_path_link_title")]
     when :instructeur
-      [instructeur_procedures_path, 'Aller à la liste des démarches']
+      [instructeur_procedures_path, t("instructeur", scope: "layouts.root_path_link_title")]
     when :user
-      [dossiers_path, 'Aller à la liste des dossiers']
+      [dossiers_path, t("user", scope: "layouts.root_path_link_title")]
     else
-      [root_path, "Aller à la page d’accueil"]
+      [root_path, t("default", scope: "layouts.root_path_link_title")]
     end
   end
 
@@ -129,6 +129,10 @@ module ApplicationHelper
     { target: "_blank", rel: "noopener noreferrer" }
   end
 
+  def new_tab_suffix(title)
+    "#{title} — #{t('utils.new_tab')}"
+  end
+
   def download_details(attachment)
     "#{attachment.filename.extension.upcase} – #{number_to_human_size(attachment.byte_size)}"
   end

app/views/layouts/_header.haml

@@ -24,7 +24,7 @@
           .fr-header__service
             - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile)
 
-            = link_to root_profile_link, :title => root_profile_libelle do
+            = link_to root_profile_link, title: "#{root_profile_libelle} — #{APPLICATION_NAME}" do
               %p.fr-header__service-title= APPLICATION_NAME
 
         .fr-header__tools

app/views/layouts/commencer/_no_procedure.html.haml

@@ -12,4 +12,4 @@
       %span.small-simple= t('.are_you_new', app_name: APPLICATION_NAME.gsub("-","‑")).html_safe
       %br
       %br
-      = link_to t('views.users.sessions.new.find_procedure'), COMMENT_TROUVER_MA_DEMARCHE_URL, target: "_blank", class: "fr-btn fr-btn--secondary"
+      = link_to t('views.users.sessions.new.find_procedure'), COMMENT_TROUVER_MA_DEMARCHE_URL, title: new_tab_suffix(t('views.users.sessions.new.find_procedure')), class: "fr-btn fr-btn--secondary", **external_link_attributes

app/views/root/_footer.html.haml

@@ -45,24 +45,16 @@
           premier
           %br
           ministre
-        = link_to t("links.footer.betagouv.url"), title: t("links.footer.betagouv.title"), 'aria-label': t("links.footer.betagouv.label"), class: "fr-footer__brand-link" do
+        = link_to t("links.footer.betagouv.url"), title: t("links.footer.betagouv.title"), class: "fr-footer__brand-link" do
-          %span.footer-logo.footer-logo-beta-gouv-fr{ role: 'img', 'aria-label': "Logo #{t('links.footer.betagouv.label')}" }
+          = image_tag("footer/logo-beta-gouv-fr.svg", class: "fr-footer__logo logo-beta-gouv-fr", alt: "beta.gouv.fr")
       .fr-footer__content
         %p.fr-footer__content-desc
           = t('links.footer.description_1')
-          = link_to t('links.footer.link_1_label'), t('links.footer.link_1_url'), target: '_blank'
+          = link_to(t('links.footer.link_1_label'), t('links.footer.link_1_url'), title: new_tab_suffix(t('links.footer.link_1_label')), **external_link_attributes) + "."
         %p.fr-footer__content-desc
-          = link_to t('links.footer.link_2_label'), t("links.footer.code.url"), target: '_blank'
+          = link_to t('links.footer.link_2_label'), t("links.footer.code.url"), title: new_tab_suffix(t('links.footer.link_2_label')), **external_link_attributes
           = t('links.footer.description_2')
-        %ul.fr-footer__content-list
+        = render partial: "shared/footer_content_list"
-          %li.fr-footer__content-item
-            = link_to t('users.procedure_footer.official_links.legifrance.title'), t('users.procedure_footer.official_links.legifrance.url'), class: 'fr-footer__content-link', target: '_blank'
-          %li.fr-footer__content-item
-            = link_to t('users.procedure_footer.official_links.gouvernement.title'), t('users.procedure_footer.official_links.gouvernement.url'), class: 'fr-footer__content-link', target: '_blank'
-          %li.fr-footer__content-item
-            = link_to t('users.procedure_footer.official_links.service_public.title'), t('users.procedure_footer.official_links.service_public.url'), class: 'fr-footer__content-link', target: '_blank'
-          %li.fr-footer__content-item
-            = link_to t('users.procedure_footer.official_links.data_gouv.title'), t('users.procedure_footer.official_links.data_gouv.url'), class: 'fr-footer__content-link', target: '_blank'
 
     .fr-footer__bottom
       = render partial: 'users/general_footer_row'

app/views/root/landing.html.haml

@@ -26,7 +26,7 @@
           %h2 Vous souhaitez effectuer une demande auprès d’une administration ?
           %p.fr-h5 Réalisez vos demandes en toute simplicité et retrouvez vos dossiers en ligne
 
-          = link_to "Comment trouver ma démarche ?", COMMENT_TROUVER_MA_DEMARCHE_URL, class: "fr-btn fr-btn--lg fr-mr-1w fr-mb-2w", **external_link_attributes
+          = link_to "Comment trouver ma démarche ?", COMMENT_TROUVER_MA_DEMARCHE_URL, class: "fr-btn fr-btn--lg fr-mr-1w fr-mb-2w", title: new_tab_suffix("Comment trouver ma démarche ?"), **external_link_attributes
           = link_to "Se connecter", new_user_session_path, class: "fr-btn fr-btn--secondary fr-btn--lg"
 
   - cache "numbers-panel", :expires_in => 3.hours do
@@ -63,7 +63,7 @@
           %h2.cta-panel-title Une question, un problème ?
           %p.cta-panel-explanation La réponse est dans l’aide en ligne
         %div
-          = link_to "Accéder à l’aide en ligne", FAQ_URL, class: "fr-btn fr-btn--lg", **external_link_attributes
+          = link_to "Accéder à l’aide en ligne", FAQ_URL, class: "fr-btn fr-btn--lg", title: new_tab_suffix("Accéder à l’aide en ligne"), **external_link_attributes
         -#   We temporarily disable the link to the contact page on the homepage
         -#   %p.cta-panel-explanation Notre équipe est disponible pour vous renseigner et vous aider
         -# %div

app/views/shared/_footer_content_list.html.haml

@@ -0,0 +1,9 @@
+%ul.fr-footer__content-list
+  %li.fr-footer__content-item
+    = link_to t('users.procedure_footer.official_links.legifrance.title'), t('users.procedure_footer.official_links.legifrance.url'), title: new_tab_suffix(t('users.procedure_footer.official_links.legifrance.title')), class: 'fr-footer__content-link', **external_link_attributes
+  %li.fr-footer__content-item
+    = link_to t('users.procedure_footer.official_links.gouvernement.title'), t('users.procedure_footer.official_links.gouvernement.url'), title: new_tab_suffix(t('users.procedure_footer.official_links.gouvernement.title')), class: 'fr-footer__content-link', **external_link_attributes
+  %li.fr-footer__content-item
+    = link_to t('users.procedure_footer.official_links.service_public.title'), t('users.procedure_footer.official_links.service_public.url'), title: new_tab_suffix(t('users.procedure_footer.official_links.service_public.title')), class: 'fr-footer__content-link', **external_link_attributes
+  %li.fr-footer__content-item
+    = link_to t('users.procedure_footer.official_links.data_gouv.title'), t('users.procedure_footer.official_links.data_gouv.url'), title: new_tab_suffix(t('users.procedure_footer.official_links.data_gouv.title')), class: 'fr-footer__content-link', **external_link_attributes

app/views/shared/_footer_copy.html.haml

@@ -1,4 +1,4 @@
 .fr-footer__bottom-copy
   %p
     Sauf mention contraire, tous les contenus de ce site sont sous
-    %a{ href: "https://github.com/etalab/licence-ouverte/blob/master/LO.md", target:"_blank", rel: "noopener", title: "licence etalab-2.0 - nouvelle fenêtre" } licence etalab-2.0
+    %a{ href: "https://github.com/etalab/licence-ouverte/blob/master/LO.md", target:"_blank", rel: "noopener", title: new_tab_suffix("licence etalab-2.0") } licence etalab-2.0

app/views/shared/_france_connect_login.html.haml

@@ -11,7 +11,7 @@
           = t('views.shared.france_connect_login.login_button')
         %span.fr-connect__brand FranceConnect
       %p
-        = link_to t('views.shared.france_connect_login.help_link'), "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener"
+        = link_to t('views.shared.france_connect_login.help_link'), "https://franceconnect.gouv.fr/", title: new_tab_suffix(t('views.shared.france_connect_login.help_link')), **external_link_attributes
 
     .france-connect-login-separator
       = t('views.shared.france_connect_login.separator')

app/views/shared/help/_help_button.html.haml

@@ -1 +1 @@
-= link_to t('help'), FAQ_URL, class: 'fr-btn', target: '_blank', rel: 'noopener'
+= link_to t('help'), FAQ_URL, class: 'fr-btn', title: new_tab_suffix(t('help')), **external_link_attributes

app/views/shared/help/dropdown_items/_faq_item.html.haml

@@ -1,5 +1,5 @@
 %li
-  = link_to FAQ_URL, target: "_blank", rel: "noopener" do
+  = link_to FAQ_URL, title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes do
     %span.icon.help
     .dropdown-description
       %span.help-dropdown-title

app/views/users/_procedure_footer.html.haml

@@ -69,15 +69,7 @@
             = "#{service.nom},"
             = "#{service.organisme},"
             = string_to_html(service.adresse, wrapper_tag = 'span')
-          %ul.fr-footer__content-list
+          = render partial: "shared/footer_content_list"
-            %li.fr-footer__content-item
-              = link_to t('users.procedure_footer.official_links.legifrance.title'), t('users.procedure_footer.official_links.legifrance.url'), class: 'fr-footer__content-link', target: '_blank'
-            %li.fr-footer__content-item
-              = link_to t('users.procedure_footer.official_links.gouvernement.title'), t('users.procedure_footer.official_links.gouvernement.url'), class: 'fr-footer__content-link', target: '_blank'
-            %li.fr-footer__content-item
-              = link_to t('users.procedure_footer.official_links.service_public.title'), t('users.procedure_footer.official_links.service_public.url'), class: 'fr-footer__content-link', target: '_blank'
-            %li.fr-footer__content-item
-              = link_to t('users.procedure_footer.official_links.data_gouv.title'), t('users.procedure_footer.official_links.data_gouv.url'), class: 'fr-footer__content-link', target: '_blank'
 
     .fr-footer__bottom
       = render partial: 'users/general_footer_row', locals: { dossier: dossier }

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

@@ -34,5 +34,5 @@
 
       %p
         Vous pouvez également consulter notre
-        = link_to('FAQ', FAQ_EMAIL_NON_RECU_URL, target: '_blank', rel: 'noopener')
+        = link_to('FAQ', FAQ_EMAIL_NON_RECU_URL, title: new_tab_suffix('FAQ'), **external_link_attributes)
         \.

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

@@ -18,7 +18,8 @@
       .header-actions
         = render partial: 'invites/dropdown', locals: { dossier: dossier }
         - if dossier.can_be_updated_by_user? && !current_page?(modifier_dossier_path(dossier))
-          = link_to t('views.users.dossiers.show.header.edit_dossier'), modifier_dossier_path(dossier), class: 'button accepted edit-form', 'title'=> "Vous pouvez modifier votre dossier tant qu'il n'est passé en instruction"
+          = link_to t('views.users.dossiers.show.header.edit_dossier'), modifier_dossier_path(dossier), class: 'button accepted edit-form', 'title'=> "Vous pouvez modifier votre dossier tant qu'il n'est passé en instruction",
+            aria: { label: "Modifier mon dossier - Vous pouvez modifier votre dossier tant qu'il n'est passé en instruction" }
         = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier })
 
     %nav.tabs

config/locales/en.yml

@@ -35,6 +35,7 @@ en:
 
   help: 'Help'
   help_dropdown:
+    general_title: "Online help"
     problem_title: A problem with the website ?
     problem_description: Find your answer in the online help.
     technical_contact_title: Technical contact
@@ -50,6 +51,7 @@ en:
     message: Message
     send_mail: Send message
     procedure: Procedures
+    new_tab: New tab
   helpers:
     procedure:
       testing_procedure: testing procedure
@@ -84,6 +86,11 @@ en:
         access: View your File
         question: I have a question
         reply: Reply to this message
+    root_path_link_title:
+      default: 'Go to homepage'
+      user: 'Go to files list'
+      instructeur: 'Go to procedures list'
+      admin: 'Go to administration panel'
   views:
     commencer:
       show:

config/locales/fr.yml

@@ -24,6 +24,7 @@ fr:
     sentence_for_humans: 'Si vous êtes un humain, laissez ce champ vide'
   help: 'Aide'
   help_dropdown:
+    general_title: "Aide en ligne"
     problem_title: Un problème avec le site ?
     problem_description: Trouvez votre réponse dans l’aide en ligne.
     technical_contact_title: Contact technique
@@ -40,6 +41,7 @@ fr:
     message: Message
     send_mail: Envoyer le message
     procedure: Démarches
+    new_tab: "Nouvel onglet"
   helpers:
     procedure:
       testing_procedure: démarche en test
@@ -74,6 +76,11 @@ fr:
         access: Consulter mon dossier
         question: J’ai une question
         reply: Répondre à ce message
+    root_path_link_title:
+      default: 'Aller à la page d’accueil'
+      user: 'Aller à la liste des dossiers'
+      instructeur: 'Aller à la liste des démarches'
+      admin: "Aller au panneau d’administration"
   views:
     commencer:
       show:

config/locales/links.en.yml

@@ -27,8 +27,7 @@ en:
         title: "API Documentation"
         url: "https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/graphql"
       betagouv:
-        label: "Beta.gouv.fr"
+        title: "The Beta.gouv.fr website — First Minister"
-        title: "The Beta.gouv.fr website"
         url: "https://beta.gouv.fr"
       code:
         label: "Source code"

config/locales/links.fr.yml

@@ -12,7 +12,7 @@ fr:
         resources: Ressources
         diagnostic: Diagnostic
       description_1: Démarches simplifiées est un service propulsé par
-      link_1_label: la direction interministérielle du numérique (DINUM).
+      link_1_label: la direction interministérielle du numérique (DINUM)
       link_1_url: "https://www.numerique.gouv.fr/dinum/"
       link_2_label: Le code source
       description_2: est disponible en licence libre.
@@ -29,8 +29,7 @@ fr:
         title: "Documentation graphql de l'API"
         url: "https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/graphql"
       betagouv:
-        label: "Beta.gouv.fr"
+        title: "Le site de beta.gouv.fr — Premier Ministre"
-        title: "Le site de Beta.gouv.fr"
         url: "https://beta.gouv.fr"
       cgu:
         label: "CGU"

spec/system/accessibilite/wcag_usager_spec.rb

@@ -7,15 +7,32 @@ describe 'wcag rules for usager', js: true do
     procedure.active_revision.types_de_champ_public.find { |tdc| tdc.type_champ == TypeDeChamp.type_champs.fetch(:carte) }.destroy
   end
 
+  shared_examples "external links have title says it opens in a new tab" do
+    it do
+      links = page.all("a[target=_blank]")
+      expect(links.count).to be_positive
+
+      links.each do |link|
+        expect(link[:title]).to include("Nouvel onglet"), "link #{link[:href]} does not have title mentioning it opens in a new tab"
+      end
+    end
+  end
+
   context 'pages without the need to be logged in' do
-    scenario 'homepage' do
+    before do
-      visit root_path
+      visit path
-      expect(page).to be_axe_clean
     end
 
-    scenario 'sign_up page' do
+    context 'homepage' do
-      visit new_user_registration_path
+      let(:path) { root_path }
-      expect(page).to be_axe_clean
+      it { expect(page).to be_axe_clean }
+      it_behaves_like "external links have title says it opens in a new tab"
+    end
+
+    context 'sign_up page' do
+      let(:path) { new_user_registration_path }
+      it { expect(page).to be_axe_clean }
+      it_behaves_like "external links have title says it opens in a new tab"
     end
 
     scenario 'account confirmation page' do
@@ -30,20 +47,30 @@ describe 'wcag rules for usager', js: true do
       end
     end
 
-    scenario 'sign_in page' do
+    context 'sign_upc confirmation' do
-      visit new_user_session_path
+      let(:path) { user_confirmation_path("user[email]" => "some@email.com") }
-      expect(page).to be_axe_clean.excluding '#user_email'
+
+      it_behaves_like "external links have title says it opens in a new tab"
     end
 
-    scenario 'contact page' do
+    context 'sign_in page' do
-      visit contact_path
+      let(:path) { new_user_session_path }
-      expect(page).to be_axe_clean
+      it { expect(page).to be_axe_clean.excluding '#user_email' }
+      it_behaves_like "external links have title says it opens in a new tab"
     end
 
-    scenario 'commencer page' do
+    context 'contact page' do
-      visit commencer_path(path: procedure.reload.path)
+      let(:path) { contact_path }
-      expect(page).to be_axe_clean
+      it { expect(page).to be_axe_clean }
+      it_behaves_like "external links have title says it opens in a new tab"
     end
+
+    context 'commencer page' do
+      let(:path) { commencer_path(path: procedure.path) }
+      it { expect(page).to be_axe_clean }
+      it_behaves_like "external links have title says it opens in a new tab"
+    end
+
     scenario 'commencer page, help dropdown' do
       visit commencer_path(path: procedure.reload.path)