Ensure advance warning of links opening new window (LG-3528)

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);
+  }
+}

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';

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

app/views/devise/sessions/new.html.erb

@@ -70,12 +70,10 @@
 <% end %>
 
 <p class="my1">
-  <%= 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) %>
 </p>
 <p class="my1">
-  <%= 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) %>
 </p>

app/views/idv/doc_auth/overview.html.erb

@@ -61,7 +61,7 @@
       <%= check_box_tag :ial2_consent_given, true, false %>
       <span class="indicator"></span>
       <%= 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/') %>
     </div>
   </label>
   <%= f.button :submit, t('recover.buttons.continue'), class: 'btn btn-primary btn-wide sm-col-6 col-6' %>

app/views/idv/doc_auth/welcome.html.erb

@@ -93,7 +93,7 @@
         <%= check_box_tag :ial2_consent_given, true, false %>
         <span class="indicator"></span>
         <%= 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/' %>
       </div>
     </label>
     <%= f.button :submit, t('doc_auth.buttons.continue'), class: 'btn btn-primary btn-wide sm-col-6 col-6' %>

app/views/idv/in_person/encrypt.html.erb

@@ -14,7 +14,8 @@
   <%= t('in_person_proofing.instructions.encrypt') %>
 </p>
 
-<%= 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| %>

app/views/idv/review/new.html.erb

@@ -8,7 +8,8 @@
   <%= t('idv.messages.sessions.review_message') %>
 </p>
 
-<%= 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| %>

app/views/shared/_footer_lite.html.erb

@@ -28,20 +28,29 @@
   <div class='container py1 px2 lg-px0 <%= 'sm-py0' if show_language_dropdown %>'>
     <div class='flex flex-center'>
       <div class='flex flex-auto flex-first'>
-        <%= 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: '' %>
-          <span class='sm-show'>
-            <%= t('shared.footer_lite.gsa') %>
-          </span>
-        <% end %>
+        <div class="sm-hide">
+          <%= 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 %>
+        </div>
+
+        <div class="sm-show">
+          <%= 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: '' %>
+            <span>
+              <%= t('shared.footer_lite.gsa') %>
+            </span>
+          <% end %>
+        </div>
       </div>
       <div class='flex flex-center'>
         <% if show_language_dropdown %>
           <ul class='list-reset sm-show mb0'>
-            <li class='i18n-desktop-toggle flex my1 mx3 relative'>
+            <li class='i18n-desktop-toggle flex my1 mx2 relative'>
               <%= 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 @@
             </li>
           </ul>
         <% 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' %>
+
+        <div class="sm-hide">
+          <%= 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') %>
+        </div>
+
+        <div class="sm-show">
+          <%= 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') %>
+        </div>
       </div>
     </div>
   </div>

app/views/sign_up/registrations/_required_pii_accordion.html.erb

@@ -0,0 +1,57 @@
+<p class="clearfix">
+  <%= image_tag(asset_url('get-started/ID.svg'),
+                size: '40', alt: '', class: 'mt-tiny col col-1') %>
+  <span class="col col-11 pl2">
+    <%= t('idv.index.id.need_html') %>
+  </span>
+</p>
+
+<div class="mt2">
+  <%= accordion('you-will-need', t('devise.registrations.start.accordion')) do %>
+    <p class="clearfix">
+      <%= image_tag(asset_url('get-started/email-password.svg'),
+                    size: '40', alt: '', class: 'mt-tiny col col-1') %>
+      <span class="col col-11 pl2">
+        <%= t('devise.registrations.start.bullet_1_html') %>
+      </span>
+    </p>
+    <p class="clearfix">
+      <%= image_tag(asset_url('get-started/2FA.svg'), size: '40', alt: '',
+                  class: 'mt-tiny col col-1') %>
+      <span class="col col-11 pl2">
+        <%= t('devise.registrations.start.bullet_2_html') %>
+      </span>
+    </p>
+    <p class="clearfix">
+      <%= image_tag(asset_url('get-started/personal-details.svg'),
+                  size: '40', alt: '', class: 'mt-tiny col col-1') %>
+      <span class="col col-11 pl2">
+        <%= t('devise.registrations.start.bullet_3_html') %>
+      </span>
+    </p>
+    <p class="clearfix">
+      <%= image_tag(asset_url('get-started/personal-details.svg'),
+                  size: '40', alt: '', class: 'mt-tiny col col-1') %>
+      <span class="col col-11 pl2">
+        <%= t('devise.registrations.start.bullet_4_html') %>
+      </span>
+    </p>
+    <p class="clearfix">
+      <%= image_tag(asset_url('get-started/financial.svg'),
+                  size: '40', alt: '', class: 'mt-tiny col col-1') %>
+      <span class="col col-11 pl2">
+        <%= t('devise.registrations.start.bullet_5_html') %>
+      </span>
+    </p>
+    <p class="clearfix">
+      <%= image_tag(asset_url('p-key.svg'), size: '40', alt: '', class: 'mt-tiny col col-1') %>
+      <span class="col col-11 pl2">
+        <%= t('devise.registrations.start.bullet_6_html') %>
+      </span>
+    </p>
+    <p class="mb3">
+      <%= new_window_link_to t('devise.registrations.start.learn_more'),
+                             MarketingSite.help_url %>
+    </p>
+  <% end %>
+</div>

app/views/sign_up/registrations/new.html.erb

@@ -29,11 +29,13 @@
 <%= render 'shared/cancel', link: decorated_session.cancel_link_url %>
 
 <p class='mt2'>
-  <%= 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) %>
 </p>
 
 <p>
-  <%= 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) %>
 </p>
 
 <%= javascript_pack_tag 'email-validation' %>

app/views/users/emails/show.html.erb

@@ -0,0 +1,29 @@
+<% title t('titles.registrations.new') %>
+
+<%= render 'shared/sp_alert' %>
+
+<h1 class="h3 my0">
+  <%= t('headings.add_email') %>
+</h1>
+
+<div class="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' %>
+  <% end %>
+</div>
+
+<%= render 'shared/cancel', link: decorated_session.cancel_link_url %>
+
+<p class="mt2">
+  <%= new_window_link_to t('notices.privacy.security_and_privacy_practices'),
+                         MarketingSite.security_and_privacy_practices_url %>
+</p>
+
+<p>
+  <%= new_window_link_to t('notices.privacy.privacy_act_statement'),
+                         MarketingSite.privacy_act_statement_url %>
+</p>

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 %>
 <h1 class="h3 my0"><%= t('headings.totp_setup.new') %></h1>
 <p class="mt-tiny mb3"><%= t('forms.totp_setup.totp_intro_html', link: help_link) %></p>
 <%= form_tag(authenticator_setup_path, method: :patch, role: 'form', class: 'mb1') do %>

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' %>
 

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

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.

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.

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?