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

* convert registration pii accordion to erb and add new window warning to external link * convert users emails show template to erb and add new window warning to external links * update translations * add new window warning to external links * use partial for rendering links that open new window * automatically apply external link icon * helper function and CSS update * indenting * link helper * set target=_blank * Update styles to not conflict Co-authored-by: Andrew Duthie <andrew.duthie@gsa.gov> * comment * support block form in new_window_link_to * use new link helper * fix a couple bugs * Update app/views/idv/doc_auth/overview.html.erb Co-authored-by: Andrew Duthie <andrew.duthie@gsa.gov> * Update app/views/sign_up/registrations/new.html.erb Co-authored-by: Andrew Duthie <andrew.duthie@gsa.gov> * Update app/views/sign_up/registrations/new.html.erb Co-authored-by: Andrew Duthie <andrew.duthie@gsa.gov> * lint * update helper to behave more like link_to * remove convert_options_to_data_attributes * maintain footer colors * fix double footer link spec Co-authored-by: Andrew Duthie <andrew.duthie@gsa.gov>
18F · mitchellhenke · Oct 22, 2020 · Oct 7, 2020 · Oct 7, 2020 · Oct 8, 2020
commit edd83da36d43685e965b143243a0f2f7beb50199
diff --git a/app/assets/stylesheets/components/_external-link.scss 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
@@ -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
@@ -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
@@ -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>
diff --git 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 %>
       <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' %>

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

diff --git 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') %>
 </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| %>

diff --git 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') %>
 </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| %>

diff --git a/app/views/shared/_footer_lite.html.erb b/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>

diff --git a/app/views/sign_up/registrations/_required_pii_accordion.html.erb b/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>
diff --git a/app/views/sign_up/registrations/_required_pii_accordion.html.slim b/app/views/sign_up/registrations/_required_pii_accordion.html.slim
diff --git 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 %>
 
 <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' %>
diff --git a/app/views/users/emails/show.html.erb b/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>
diff --git a/app/views/users/emails/show.html.slim b/app/views/users/emails/show.html.slim
diff --git 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 %>
 <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 %>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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?