diff --git a/app/assets/stylesheets/components/_external-link.scss b/app/assets/stylesheets/components/_external-link.scss new file mode 100644 index 00000000000..b0be329f2fd --- /dev/null +++ b/app/assets/stylesheets/components/_external-link.scss @@ -0,0 +1,11 @@ +// We're not (yet) using USWDS links consistently, where we'd expect color changes on hover, so in order to prevent the icon from flipping color independently from the rest of the link text on hover, we have to override it. + +// In the future, we'll want to either apply usa-link to all links, or to configure $theme-global-link-styles to apply link styling globally. This will bring hover color styles, at which point we can remove these overrides. + +.usa-link--external { + @include external-link(external-link, external-link); + + &.usa-link--alt { + @include external-link(external-link-alt, external-link-alt); + } +} diff --git a/app/assets/stylesheets/components/all.scss b/app/assets/stylesheets/components/all.scss index 28a24b49664..f85f3af94db 100644 --- a/app/assets/stylesheets/components/all.scss +++ b/app/assets/stylesheets/components/all.scss @@ -8,6 +8,7 @@ @import 'card'; @import 'color'; @import 'container'; +@import 'external-link'; @import 'footer'; @import 'form'; @import 'icon'; diff --git a/app/helpers/link_helper.rb b/app/helpers/link_helper.rb new file mode 100644 index 00000000000..62c1d72bfb5 --- /dev/null +++ b/app/helpers/link_helper.rb @@ -0,0 +1,34 @@ +module LinkHelper + EXTERNAL_LINK_CLASS = 'usa-link--external'.freeze + + def new_window_link_to(name = nil, options = nil, html_options = nil, &block) + if block_given? + html_options = options + options = name + name = block + end + options ||= {} + html_options ||= {} + + url = url_for(options) + html_options[:href] ||= url + html_options[:class] ||= html_options[:class].to_s + html_options[:target] = '_blank' + + classes = html_options[:class].split(' ').append(EXTERNAL_LINK_CLASS) + + html_options[:class] = classes.uniq.join(' ') + + if block_given? + link_to(url, html_options) do + yield(block) + concat content_tag('span', t('links.new_window'), class: 'usa-sr-only') + end + else + link_to(url, html_options) do + content_tag('span', name) + + content_tag('span', t('links.new_window'), class: 'usa-sr-only') + end + end + end +end diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index 19abc3ff1cf..ae73e538b08 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -70,12 +70,10 @@ <% end %>

- <%= link_to( - t('notices.privacy.security_and_privacy_practices'), - MarketingSite.security_and_privacy_practices_url, - target: '_blank', - ) %> + <%= new_window_link_to(t('notices.privacy.security_and_privacy_practices'), + MarketingSite.security_and_privacy_practices_url) %>

- <%= link_to t('notices.privacy.privacy_act_statement'), MarketingSite.privacy_act_statement_url, target: '_blank' %> + <%= new_window_link_to(t('notices.privacy.privacy_act_statement'), + MarketingSite.privacy_act_statement_url) %>

diff --git a/app/views/idv/doc_auth/overview.html.erb b/app/views/idv/doc_auth/overview.html.erb index c2d72e7c2d3..74e4c28fe6d 100644 --- a/app/views/idv/doc_auth/overview.html.erb +++ b/app/views/idv/doc_auth/overview.html.erb @@ -61,7 +61,7 @@ <%= check_box_tag :ial2_consent_given, true, false %> <%= t('recover.instructions.consent') %> - <%= link_to(t('recover.instructions.learn_more'), 'https://login.gov/policy/', target: '_blank') %> + <%= new_window_link_to(t('recover.instructions.learn_more'), 'https://login.gov/policy/') %> <%= f.button :submit, t('recover.buttons.continue'), class: 'btn btn-primary btn-wide sm-col-6 col-6' %> diff --git a/app/views/idv/doc_auth/welcome.html.erb b/app/views/idv/doc_auth/welcome.html.erb index 3d48a21b5d6..ed4661c0f18 100644 --- a/app/views/idv/doc_auth/welcome.html.erb +++ b/app/views/idv/doc_auth/welcome.html.erb @@ -93,7 +93,7 @@ <%= check_box_tag :ial2_consent_given, true, false %> <%= t('doc_auth.instructions.consent') %> - <%= link_to(t('doc_auth.instructions.learn_more'), 'https://login.gov/policy/', target: '_blank') %> + <%= new_window_link_to t('doc_auth.instructions.learn_more'), 'https://login.gov/policy/' %> <%= f.button :submit, t('doc_auth.buttons.continue'), class: 'btn btn-primary btn-wide sm-col-6 col-6' %> diff --git a/app/views/idv/in_person/encrypt.html.erb b/app/views/idv/in_person/encrypt.html.erb index 257fbbe02b0..f7d2b84f6c9 100644 --- a/app/views/idv/in_person/encrypt.html.erb +++ b/app/views/idv/in_person/encrypt.html.erb @@ -14,7 +14,8 @@ <%= t('in_person_proofing.instructions.encrypt') %>

-<%= link_to t('in_person_proofing.instructions.read_more_encrypt'), MarketingSite.security_url, target: '_blank' %> +<%= new_window_link_to t('in_person_proofing.instructions.read_more_encrypt'), + MarketingSite.security_url %> <%= validated_form_for(:in_person_proofing, url: url_for, method: 'PUT', html: { autocomplete: 'off', method: :put, role: 'form' }) do |f| %> diff --git a/app/views/idv/review/new.html.erb b/app/views/idv/review/new.html.erb index 18d48a5c075..bdbb421faea 100644 --- a/app/views/idv/review/new.html.erb +++ b/app/views/idv/review/new.html.erb @@ -8,7 +8,8 @@ <%= t('idv.messages.sessions.review_message') %>

-<%= link_to t('idv.messages.sessions.read_more_encrypt'), "https://login.gov/security/", target: "_blank" %> +<%= new_window_link_to(t('idv.messages.sessions.read_more_encrypt'), + MarketingSite.security_url)%> <%= validated_form_for(current_user, url: idv_review_path, html: { autocomplete: 'off', method: :put, role: 'form' }) do |f| %> diff --git a/app/views/shared/_footer_lite.html.erb b/app/views/shared/_footer_lite.html.erb index 71060be47c9..3131b32cdd5 100644 --- a/app/views/shared/_footer_lite.html.erb +++ b/app/views/shared/_footer_lite.html.erb @@ -28,20 +28,29 @@
'>
- <%= link_to('https://gsa.gov', class: 'flex flex-center text-decoration-none white h6', target: '_blank', 'aria-label': t('shared.footer_lite.gsa')) do %> - <%= image_tag asset_url('sp-logos/square-gsa.svg'), - width: 20, class: 'mr1 sm-show', alt: '' %> - <%= image_tag asset_url('sp-logos/square-gsa-dark.svg'), - width: 20, class: 'mr1 sm-hide', alt: '' %> - - <%= t('shared.footer_lite.gsa') %> - - <% end %> +
+ <%= new_window_link_to 'https://gsa.gov', { class: 'flex flex-center text-decoration-none white h6 mr1 sm-hide', + 'aria-label': t('shared.footer_lite.gsa') } do %> + <%= image_tag asset_url('sp-logos/square-gsa-dark.svg'), + width: 20, alt: '' %> + <% end %> +
+ +
+ <%= new_window_link_to 'https://gsa.gov', { class: 'flex flex-center text-decoration-none white h6 mr1 usa-link--alt', + 'aria-label': t('shared.footer_lite.gsa') } do %> + <%= image_tag asset_url('sp-logos/square-gsa.svg'), + width: 20, class: 'mr1', alt: '' %> + + <%= t('shared.footer_lite.gsa') %> + + <% end %> +
<% if show_language_dropdown %>
    -
  • +
  • <%= link_to '#', class: 'white text-decoration-none border border-blue rounded-lg px1 py-tiny', 'aria-expanded': 'false' do %> <%= image_tag asset_url('globe-white.svg'), width: 12, class: 'mr1', alt: '', 'aria-hidden': 'true' %> @@ -60,12 +69,24 @@
<% end %> - <%= link_to t('links.help'), MarketingSite.help_url, - class: 'caps h6 blue sm-white text-decoration-none mr3', target: '_blank' %> - <%= link_to t('links.contact'), MarketingSite.contact_url, - class: 'caps h6 blue sm-white text-decoration-none mr3', target: '_blank' %> - <%= link_to t('links.privacy_policy'), MarketingSite.security_and_privacy_practices_url, - class: 'caps h6 blue sm-white text-decoration-none', target: '_blank' %> + +
+ <%= new_window_link_to(t('links.help'), MarketingSite.help_url, + class: 'caps h6 blue text-decoration-none mr2') %> + <%= new_window_link_to(t('links.contact'), MarketingSite.contact_url, + class: 'caps h6 blue text-decoration-none mr2') %> + <%= new_window_link_to(t('links.privacy_policy'), MarketingSite.security_and_privacy_practices_url, + class: 'caps h6 blue text-decoration-none mr2') %> +
+ +
+ <%= new_window_link_to(t('links.help'), MarketingSite.help_url, + class: 'caps h6 white text-decoration-none mr2 usa-link--alt') %> + <%= new_window_link_to(t('links.contact'), MarketingSite.contact_url, + class: 'caps h6 white text-decoration-none mr2 usa-link--alt') %> + <%= new_window_link_to(t('links.privacy_policy'), MarketingSite.security_and_privacy_practices_url, + class: 'caps h6 white text-decoration-none mr2 usa-link--alt') %> +
diff --git a/app/views/sign_up/registrations/_required_pii_accordion.html.erb b/app/views/sign_up/registrations/_required_pii_accordion.html.erb new file mode 100644 index 00000000000..731d28f192d --- /dev/null +++ b/app/views/sign_up/registrations/_required_pii_accordion.html.erb @@ -0,0 +1,57 @@ +

+ <%= image_tag(asset_url('get-started/ID.svg'), + size: '40', alt: '', class: 'mt-tiny col col-1') %> + + <%= t('idv.index.id.need_html') %> + +

+ +
+ <%= accordion('you-will-need', t('devise.registrations.start.accordion')) do %> +

+ <%= image_tag(asset_url('get-started/email-password.svg'), + size: '40', alt: '', class: 'mt-tiny col col-1') %> + + <%= t('devise.registrations.start.bullet_1_html') %> + +

+

+ <%= image_tag(asset_url('get-started/2FA.svg'), size: '40', alt: '', + class: 'mt-tiny col col-1') %> + + <%= t('devise.registrations.start.bullet_2_html') %> + +

+

+ <%= image_tag(asset_url('get-started/personal-details.svg'), + size: '40', alt: '', class: 'mt-tiny col col-1') %> + + <%= t('devise.registrations.start.bullet_3_html') %> + +

+

+ <%= image_tag(asset_url('get-started/personal-details.svg'), + size: '40', alt: '', class: 'mt-tiny col col-1') %> + + <%= t('devise.registrations.start.bullet_4_html') %> + +

+

+ <%= image_tag(asset_url('get-started/financial.svg'), + size: '40', alt: '', class: 'mt-tiny col col-1') %> + + <%= t('devise.registrations.start.bullet_5_html') %> + +

+

+ <%= image_tag(asset_url('p-key.svg'), size: '40', alt: '', class: 'mt-tiny col col-1') %> + + <%= t('devise.registrations.start.bullet_6_html') %> + +

+

+ <%= new_window_link_to t('devise.registrations.start.learn_more'), + MarketingSite.help_url %> +

+ <% end %> +
diff --git a/app/views/sign_up/registrations/_required_pii_accordion.html.slim b/app/views/sign_up/registrations/_required_pii_accordion.html.slim deleted file mode 100644 index b3b9f90d089..00000000000 --- a/app/views/sign_up/registrations/_required_pii_accordion.html.slim +++ /dev/null @@ -1,33 +0,0 @@ -p.clearfix - = image_tag(asset_url('get-started/ID.svg'), - size: '40', alt: '', class: 'mt-tiny col col-1') - span.col.col-11.pl2 = t('idv.index.id.need_html') - -.mt2 - = accordion('you-will-need', t('devise.registrations.start.accordion')) do - p.clearfix - = image_tag(asset_url('get-started/email-password.svg'), - size: '40', alt: '', class: 'mt-tiny col col-1') - span.col.col-11.pl2 = t('devise.registrations.start.bullet_1_html') - p.clearfix - = image_tag(asset_url('get-started/2FA.svg'), size: '40', alt: '', - class: 'mt-tiny col col-1') - span.col.col-11.pl2 = t('devise.registrations.start.bullet_2_html') - p.clearfix - = image_tag(asset_url('get-started/personal-details.svg'), - size: '40', alt: '', class: 'mt-tiny col col-1') - span.col.col-11.pl2 = t('devise.registrations.start.bullet_3_html') - p.clearfix - = image_tag(asset_url('get-started/personal-details.svg'), - size: '40', alt: '', class: 'mt-tiny col col-1') - span.col.col-11.pl2 = t('devise.registrations.start.bullet_4_html') - p.clearfix - = image_tag(asset_url('get-started/financial.svg'), - size: '40', alt: '', class: 'mt-tiny col col-1') - span.col.col-11.pl2 = t('devise.registrations.start.bullet_5_html') - p.clearfix - = image_tag(asset_url('p-key.svg'), size: '40', alt: '', class: 'mt-tiny col col-1') - span.col.col-11.pl2 = t('devise.registrations.start.bullet_6_html') - p.mb3 = link_to t('devise.registrations.start.learn_more'), - MarketingSite.help_url, - target: '_blank' diff --git a/app/views/sign_up/registrations/new.html.erb b/app/views/sign_up/registrations/new.html.erb index 75c50432d0b..63ff2ff82c4 100644 --- a/app/views/sign_up/registrations/new.html.erb +++ b/app/views/sign_up/registrations/new.html.erb @@ -29,11 +29,13 @@ <%= render 'shared/cancel', link: decorated_session.cancel_link_url %>

- <%= link_to t('notices.privacy.security_and_privacy_practices'), MarketingSite.security_and_privacy_practices_url, target: '_blank' %> + <%= new_window_link_to(t('notices.privacy.security_and_privacy_practices'), + MarketingSite.security_and_privacy_practices_url) %>

- <%= link_to t('notices.privacy.privacy_act_statement'), MarketingSite.privacy_act_statement_url, target: '_blank' %> + <%= new_window_link_to(t('notices.privacy.privacy_act_statement'), + MarketingSite.privacy_act_statement_url) %>

<%= javascript_pack_tag 'email-validation' %> diff --git a/app/views/users/emails/show.html.erb b/app/views/users/emails/show.html.erb new file mode 100644 index 00000000000..1fcf0e2e61e --- /dev/null +++ b/app/views/users/emails/show.html.erb @@ -0,0 +1,29 @@ +<% title t('titles.registrations.new') %> + +<%= render 'shared/sp_alert' %> + +

+ <%= t('headings.add_email') %> +

+ +
+ <%= validated_form_for(@add_user_email_form, + html: { autocomplete: 'off', role: 'form' }, + url: add_email_path) do |f| %> + <%= f.input :email, label: t('forms.registration.labels.email'), required: true, + input_html: { aria: { invalid: false } } %> + <%= f.button :submit, t('forms.buttons.submit.default'), class: 'btn-wide' %> + <% end %> +
+ +<%= render 'shared/cancel', link: decorated_session.cancel_link_url %> + +

+ <%= new_window_link_to t('notices.privacy.security_and_privacy_practices'), + MarketingSite.security_and_privacy_practices_url %> +

+ +

+ <%= new_window_link_to t('notices.privacy.privacy_act_statement'), + MarketingSite.privacy_act_statement_url %> +

diff --git a/app/views/users/emails/show.html.slim b/app/views/users/emails/show.html.slim deleted file mode 100644 index 65cb2f0b2fc..00000000000 --- a/app/views/users/emails/show.html.slim +++ /dev/null @@ -1,24 +0,0 @@ -- title t('titles.registrations.new') - -= render 'shared/sp_alert' - -h1.h3.my0 = t('headings.add_email') - -.mb4 - = validated_form_for(@add_user_email_form, - html: { autocomplete: 'off', role: 'form' }, - url: add_email_path) do |f| - = f.input :email, label: t('forms.registration.labels.email'), required: true, - input_html: { aria: { invalid: false } } - = f.button :submit, t('forms.buttons.submit.default'), class: 'btn-wide' - -= render 'shared/cancel', link: decorated_session.cancel_link_url - -p.mt2 - = link_to t('notices.privacy.security_and_privacy_practices'), - MarketingSite.security_and_privacy_practices_url, - target: '_blank' -p - = link_to t('notices.privacy.privacy_act_statement'), - MarketingSite.privacy_act_statement_url, - target: '_blank' diff --git a/app/views/users/totp_setup/new.html.erb b/app/views/users/totp_setup/new.html.erb index ddb91cbc8a9..99edc42a19b 100644 --- a/app/views/users/totp_setup/new.html.erb +++ b/app/views/users/totp_setup/new.html.erb @@ -1,4 +1,5 @@ -<% help_link = link_to t('links.what_is_totp'), MarketingSite.help_authentication_app_url, target: :_blank %> +<% help_link = new_window_link_to t('links.what_is_totp'), + MarketingSite.help_authentication_app_url %>

<%= t('headings.totp_setup.new') %>

<%= t('forms.totp_setup.totp_intro_html', link: help_link) %>

<%= form_tag(authenticator_setup_path, method: :patch, role: 'form', class: 'mb1') do %> diff --git a/app/views/users/webauthn_setup/new.html.erb b/app/views/users/webauthn_setup/new.html.erb index 5ca29b24be6..787ad9a0875 100644 --- a/app/views/users/webauthn_setup/new.html.erb +++ b/app/views/users/webauthn_setup/new.html.erb @@ -1,6 +1,6 @@ <% title t('titles.totp_setup.new') %> -<% help_link = link_to t('links.what_is_webauthn'), - MarketingSite.help_hardware_security_key_url, target: :_blank %> +<% help_link = new_window_link_to t('links.what_is_webauthn'), + MarketingSite.help_hardware_security_key_url %> <%= image_tag asset_url('security-key.svg'), alt: '', width: '90', class: 'ml1' %> diff --git a/config/locales/doc_auth/en.yml b/config/locales/doc_auth/en.yml index 4ebb853511d..1c917610800 100644 --- a/config/locales/doc_auth/en.yml +++ b/config/locales/doc_auth/en.yml @@ -164,7 +164,7 @@ en: compare it to the image on the front of your ID. email_sent: Link sent to %{email}. Please check your desktop email and follow instructions to verify your identity. - learn_more: Learn more. + learn_more: Learn more send_sms: We'll send a text message to your device with a link. Follow that link to your browser to take photos of the front and back of your ID. switch_back: Switch back to your computer to finish verifying your identity diff --git a/config/locales/doc_auth/es.yml b/config/locales/doc_auth/es.yml index 401d221eba1..e1315ac6a1c 100644 --- a/config/locales/doc_auth/es.yml +++ b/config/locales/doc_auth/es.yml @@ -175,7 +175,7 @@ es: con la imagen en el frente de su identificación. email_sent: Enlace enviado a %{email}. Compruebe el correo electrónico de su escritorio y siga las instrucciones para verificar su identidad. - learn_more: Aprende más. + learn_more: Aprende más send_sms: Le enviaremos un mensaje de texto a su dispositivo con un enlace. Siga ese enlace a su navegador para tomar fotografías de la parte delantera y trasera de su identificación. diff --git a/config/locales/doc_auth/fr.yml b/config/locales/doc_auth/fr.yml index 5cdced8b9c4..8ebef7d6108 100644 --- a/config/locales/doc_auth/fr.yml +++ b/config/locales/doc_auth/fr.yml @@ -186,7 +186,7 @@ fr: Nous le comparerons à l'image au recto de votre pièce d'identité. email_sent: Lien envoyé à %{email}. Veuillez vérifier votre email de bureau et suivez les instructions pour vérifier votre identité. - learn_more: Apprendre encore plus. + learn_more: Apprendre encore plus send_sms: Nous enverrons un message texte à votre appareil avec un lien. Suivez ce lien vers votre navigateur pour prendre des photos du recto et du verso de votre identifiant. diff --git a/config/locales/links/en.yml b/config/locales/links/en.yml index 9f886d9be9c..4a59a94bb4f 100644 --- a/config/locales/links/en.yml +++ b/config/locales/links/en.yml @@ -15,6 +15,7 @@ en: go_back: Go back help: Help my_account: my account + new_window: "(opens new window)" next: Sign in passwords: forgot: Forgot your password? diff --git a/config/locales/links/es.yml b/config/locales/links/es.yml index 596a7fbb1a2..64468525d36 100644 --- a/config/locales/links/es.yml +++ b/config/locales/links/es.yml @@ -15,6 +15,7 @@ es: go_back: Regresa help: Ayuda my_account: mi cuenta + new_window: "(abre nueva ventana)" next: Siguiente passwords: forgot: "¿Olvidó su contraseña?" diff --git a/config/locales/links/fr.yml b/config/locales/links/fr.yml index e3fdf642352..85ca29fdfe2 100644 --- a/config/locales/links/fr.yml +++ b/config/locales/links/fr.yml @@ -15,6 +15,7 @@ fr: go_back: Retourner help: Aide my_account: mon compte + new_window: "(ouvre une nouvelle fenêtre)" next: Suivant passwords: forgot: Vous avez oublié votre mot de passe? diff --git a/config/locales/recover/en.yml b/config/locales/recover/en.yml index b05c6af38e7..463466d235b 100644 --- a/config/locales/recover/en.yml +++ b/config/locales/recover/en.yml @@ -16,7 +16,7 @@ en: consent: By checking this box, you are letting login.gov ask for, use, keep, and share your personal information. We will only use it to verify your identity. heading: 'What you''ll need to do:' - learn_more: Learn more. + learn_more: Learn more text1: take a photo or upload a file text2: we need it to find you in identity verification databases text3: you'll be able to edit it if something's wrong diff --git a/config/locales/recover/es.yml b/config/locales/recover/es.yml index 639e904e35c..97e02c105c1 100644 --- a/config/locales/recover/es.yml +++ b/config/locales/recover/es.yml @@ -17,7 +17,7 @@ es: conserve y comparta su información personal. Solo lo usaremos para verificar su identidad. heading: 'Lo que deberás hacer:' - learn_more: Aprende más. + learn_more: Aprende más text1: tomar una foto o subir un archivo text2: lo necesitamos para encontrarlo en las bases de datos de verificación de identidad diff --git a/config/locales/recover/fr.yml b/config/locales/recover/fr.yml index a0b22aa24a2..25306327f3a 100644 --- a/config/locales/recover/fr.yml +++ b/config/locales/recover/fr.yml @@ -17,7 +17,7 @@ fr: conserver et partager vos informations personnelles. Nous ne l'utiliserons que pour vérifier votre identité. heading: 'Ce que vous devez faire:' - learn_more: Apprendre encore plus. + learn_more: Apprendre encore plus text1: prendre une photo ou télécharger un fichier text2: nous en avons besoin pour vous trouver dans les bases de données de vérification d'identité diff --git a/spec/features/two_factor_authentication/sign_in_spec.rb b/spec/features/two_factor_authentication/sign_in_spec.rb index 48199174fe1..b7688e59fa9 100644 --- a/spec/features/two_factor_authentication/sign_in_spec.rb +++ b/spec/features/two_factor_authentication/sign_in_spec.rb @@ -374,17 +374,17 @@ def attempt_to_bypass_2fa it 'renders the requested pages' do user = create(:user, :signed_up) sign_in_before_2fa(user) - click_link t('links.help') + click_link t('links.help'), match: :first expect(current_url).to eq MarketingSite.help_url visit login_two_factor_path(otp_delivery_preference: 'sms') - click_link t('links.contact') + click_link t('links.contact'), match: :first expect(current_url).to eq MarketingSite.contact_url visit login_two_factor_path(otp_delivery_preference: 'sms') - click_link t('links.privacy_policy') + click_link t('links.privacy_policy'), match: :first expect(current_url).to eq MarketingSite.security_and_privacy_practices_url end