Accessibilité du composant lien, dans le cas externe

Au passage, - generalise le style des liens externe entre l'écran de login et le composant. - Supprime fontawesome
betagouv · Dec 2, 2024 · bd93367 · bd93367
1 parent fb22f37
commit bd93367
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 40 deletions.
diff --git a/Gemfile b/Gemfile
@@ -32,7 +32,6 @@ gem 'devise'
 gem 'devise-i18n'
 gem 'down'
 gem 'ffaker'
-gem 'font-awesome-sass', '~> 6.5.1'
 gem 'geocoder'
 gem 'google-api-client', '~> 0.53'
 gem 'google_drive', '~> 3.0'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -235,8 +235,6 @@ GEM
     faraday-retry (1.0.3)
     ffaker (2.23.0)
     ffi (1.17.0)
-    font-awesome-sass (6.5.2)
-      sassc (~> 2.0)
     foreman (0.88.1)
     formatador (1.1.0)
     formtastic (5.0.0)
@@ -697,7 +695,6 @@ DEPENDENCIES
   down
   factory_bot_rails
   ffaker
-  font-awesome-sass (~> 6.5.1)
   foreman
   geocoder
   google-api-client (~> 0.53)

diff --git a/app/assets/stylesheets/_pro_connect_button.scss b/app/assets/stylesheets/_pro_connect_button.scss
@@ -32,36 +32,6 @@
       font-size: 1.125em;
       font-weight: 700;
     }
-
-    & + p a {
-      color: #000091;
-      font-size: .875rem;
-      line-height: 1.5rem;
-      text-decoration: none;
-      background-image: linear-gradient(0deg,currentColor,currentColor),linear-gradient(0deg,currentColor,currentColor);
-      background-position: 0 100%,0 calc(100% - .0625rem);
-      background-repeat: no-repeat, no-repeat;
-      background-size: 0 .125rem, 100% .0625rem;
-      transition: background-size 0s;
-
-      &:hover {
-        background-size: 100% .125em,100% .0625em;
-      }
-
-      &::after {
-        background-color: currentColor;
-        content: "";
-        display: inline-block;
-        flex: 0 0 auto;
-        height: 1rem;
-        margin-left: .25rem;
-        mask-image: image-url('target-blank-icon.svg');
-        -webkit-mask-size: 100% 100%;
-        mask-size: 100% 100%;
-        vertical-align: calc(.375em - .5rem);
-        width: 1rem;
-      }
-    }
   }
 
   .btn-pro-connect::before {

diff --git a/app/assets/stylesheets/active_admin.scss b/app/assets/stylesheets/active_admin.scss
@@ -11,7 +11,6 @@
 @import 'admin/typography';
 @import "bootstrap_minimal";
 @import "pro_connect_button";
-@import "font-awesome";
 
 // COMPOSANTS
 @import 'admin/composants/autocomplete';

diff --git a/app/assets/stylesheets/admin/composants/_lien.scss b/app/assets/stylesheets/admin/composants/_lien.scss
@@ -5,3 +5,35 @@
     font-size: 0.75rem;
   }
 }
+
+a.lien-externe {
+  color: #000091;
+  font-size: .875rem;
+  line-height: 1.5rem;
+  text-decoration: none;
+  background-image: linear-gradient(0deg,currentColor,currentColor),linear-gradient(0deg,currentColor,currentColor);
+  --underline-hover-width: 0;
+  --underline-thickness: calc(0.0625em + 0.25px);
+  background-position: 0 100%, 0 calc(100% - var(--underline-thickness));
+  background-repeat: no-repeat, no-repeat;
+  background-size: var(--underline-hover-width) calc(var(--underline-thickness) * 2), 100% var(--underline-thickness);
+  transition: background-size 0s;
+
+  &:hover {
+    --underline-hover-width: 100%;
+  }
+
+  &::after {
+    background-color: currentColor;
+    content: "";
+    display: inline-block;
+    flex: 0 0 auto;
+    height: 1rem;
+    margin-left: .25rem;
+    mask-image: image-url('target-blank-icon.svg');
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    vertical-align: -0.1rem;
+    width: 1rem;
+  }
+}
diff --git a/app/components/lien_component.html.erb b/app/components/lien_component.html.erb
@@ -1,3 +1,3 @@
 <span class="composant-lien">
-  <%= link_to @body, @url, @params %><% if @externe %><i class="fa fa-external-link" aria-hidden="true"></i><% end %>
+  <%= link_to @body, @url, @params %>
 </span>
diff --git a/app/components/lien_component.rb b/app/components/lien_component.rb
@@ -5,6 +5,11 @@ def initialize(body, url, externe: false)
     @body = body
     @url = url
     @externe = externe
-    @params = { target: '_blank' } if externe
+    return unless externe
+
+    @params = { target: '_blank',
+                title: I18n.t('.lien_externe', texte_du_lien: body),
+                rel: 'noopener',
+                class: 'lien-externe' }
   end
 end
diff --git a/app/views/active_admin/devise/sessions/new.html.erb b/app/views/active_admin/devise/sessions/new.html.erb
@@ -21,9 +21,7 @@
                 <span class="pro-connect__brand">ProConnect</span>
               <% end %>
               <p>
-                <a href="https://www.proconnect.gouv.fr/" target="_blank" rel="noopener" title="<%= t('.pro-connect.libelle-lien-pro-connect') %> - nouvelle fenêtre">
-                  <%= t('.pro-connect.libelle-lien-pro-connect') %>
-                </a>
+              <%= render LienComponent.new(t('.pro-connect.libelle-lien-pro-connect'), 'https://www.proconnect.gouv.fr/', externe: true) %>
               </p>
             </div>
           </div>

diff --git a/config/locales/activeadmin.yml b/config/locales/activeadmin.yml
@@ -1,6 +1,7 @@
 fr:
   logo_anlci: "ANLCI: Agence nationale de lutte contre l'illettrisme"
   lien_cgu: CGU
+  lien_externe: "%{texte_du_lien} - nouvelle fenêtre"
   devise:
     failure:
       already_authenticated: ""