From bd93367db510702b1f5d61eac032f765c43b866b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89tienne=20Charignon?= Date: Fri, 29 Nov 2024 17:56:50 +0100 Subject: [PATCH] =?UTF-8?q?Accessibilit=C3=A9=20du=20composant=20lien,=20d?= =?UTF-8?q?ans=20le=20cas=20externe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Au passage, - generalise le style des liens externe entre l'écran de login et le composant. - Supprime fontawesome --- Gemfile | 1 - Gemfile.lock | 3 -- .../stylesheets/_pro_connect_button.scss | 30 ----------------- app/assets/stylesheets/active_admin.scss | 1 - .../stylesheets/admin/composants/_lien.scss | 32 +++++++++++++++++++ app/components/lien_component.html.erb | 2 +- app/components/lien_component.rb | 7 +++- .../active_admin/devise/sessions/new.html.erb | 4 +-- config/locales/activeadmin.yml | 1 + 9 files changed, 41 insertions(+), 40 deletions(-) diff --git a/Gemfile b/Gemfile index 48b86a954..cf3d54f53 100644 --- 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 index d5b3e4a92..68dacc5e2 100644 --- 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 index 13faf87c0..0404623c5 100644 --- 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 index c455f0f8d..484330798 100644 --- 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 index 076f03bab..6c1d7b334 100644 --- 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 index f739abb98..e6099372b 100644 --- a/app/components/lien_component.html.erb +++ b/app/components/lien_component.html.erb @@ -1,3 +1,3 @@ - <%= link_to @body, @url, @params %><% if @externe %><% end %> + <%= link_to @body, @url, @params %> diff --git a/app/components/lien_component.rb b/app/components/lien_component.rb index efe1d22d5..cf61305cd 100644 --- 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 index a5008927b..2ea8ccb5a 100644 --- a/app/views/active_admin/devise/sessions/new.html.erb +++ b/app/views/active_admin/devise/sessions/new.html.erb @@ -21,9 +21,7 @@ ProConnect <% end %>

- - <%= t('.pro-connect.libelle-lien-pro-connect') %> - + <%= render LienComponent.new(t('.pro-connect.libelle-lien-pro-connect'), 'https://www.proconnect.gouv.fr/', externe: true) %>

diff --git a/config/locales/activeadmin.yml b/config/locales/activeadmin.yml index 311c2524b..73e1c38e7 100644 --- 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: ""