LG-12656 Update how to verify page

app/views/idv/how_to_verify/show.html.erb

@@ -3,66 +3,79 @@
 <%= render PageHeadingComponent.new.with_content(t('doc_auth.headings.how_to_verify')) %>
 <p id='how-to-verify-info'><%= t('doc_auth.info.how_to_verify') %></p>
 
-<%= simple_form_for(
-      @idv_how_to_verify_form,
-      html: { autocomplete: 'off' },
-      method: :put,
-      url: idv_how_to_verify_url,
-    ) do |f|
-%>
-  <div role="group" aria-labelledby="how-to-verify-info">
-    <%= f.radio_button(
+  <div role="group" aria-labelledby="how-to-verify-info" class="border-bottom border-primary-light grid-row">
+    <div class="grid-col-12 tablet:grid-col-auto">
+        <%= image_tag(
+              asset_url('idv/remote.svg'),
+              width: 88,
+              height: 88,
+              class: 'margin-right-1 margin-top-4',
+              alt: t('image_description.laptop_and_phone'),
+            ) %>
+    </div>
+    <div class="grid-col-12 tablet:grid-col-fill">
+    <%= simple_form_for(
+          @idv_how_to_verify_form,
+          html: { autocomplete: 'off',
+                  'aria-label': t('forms.buttons.continue_remote') },
+          method: :put,
+          url: idv_how_to_verify_url,
+        ) do |f|
+    %>
+    <%= f.hidden_field(
           :selection,
-          Idv::HowToVerifyForm::REMOTE,
-          class: 'usa-radio__input usa-radio__input--tile',
+          value: Idv::HowToVerifyForm::REMOTE,
         ) %>
     <%= f.label(
           :selection_remote,
-          class: 'usa-radio__label usa-radio__label--illustrated usa-radio__label-illustrated-large',
         ) do %>
-          <%= image_tag asset_url('idv/remote.svg'),
-                        width: 88,
-                        height: 92,
-                        class: 'usa-radio__image',
-                        alt: t('image_description.laptop_and_phone')
-          %>
-          <div class="usa-radio__label--text">
-            <span class="usa-tag usa-tag--informative">
-              <%= t('doc_auth.tips.most_common') %>
-            </span>
-            <h2 class="h3"><%= t('doc_auth.headings.verify_online') %></h2>
-            <span class="usa-radio__label-description">
-              <p><%= t('doc_auth.info.verify_online_instruction') %></p>
-              <p><%= t('doc_auth.info.verify_online_description') %></p>
-            </span>
-          </div>
+              <h2 class="margin-top-0"><%= t('doc_auth.headings.verify_online') %></h2>
+              <div>
+                <p><%= t('doc_auth.info.verify_online_instruction') %></p>
+                <p><%= t('doc_auth.info.verify_online_description') %></p>
+              </div>
+
         <% end %>
-    <%= f.radio_button(
-          :selection,
-          Idv::HowToVerifyForm::IPP,
-          class: 'usa-radio__input usa-radio__input--tile',
-        ) %>
-    <%= f.label(
-          :selection_ipp,
-          class: 'usa-radio__label usa-radio__label--illustrated usa-radio__label-illustrated-large',
-        ) do %>
-          <%= image_tag asset_url('idv/in-person.svg'),
-                        width: 88,
-                        height: 92,
-                        class: 'usa-radio__image',
-                        alt: t('image_description.post_office')
-          %>
-          <div class="usa-radio__label--text">
-            <h3><%= t('doc_auth.headings.verify_at_post_office') %></h3>
-            <span class="usa-radio__label-description">
+          <%= f.submit t('forms.buttons.continue_remote'), class: 'display-block margin-top-3 margin-bottom-5' %>
+    <% end %>
+    </div>
+  </div>
+<div role="group" aria-labelledby="how-to-verify-info" class="grid-row">
+<div class="grid-col-12 tablet:grid-col-auto">
+  <%= image_tag(
+        asset_url('idv/in-person.svg'),
+        width: 88,
+        height: 88,
+        class: 'margin-right-1 margin-top-4',
+        alt: t('image_description.post_office'),
+      ) %>
+</div>
+  <div class="grid-col-12 tablet:grid-col-fill">
+    <%= simple_form_for(
+          @idv_how_to_verify_form,
+          html: { autocomplete: 'off',
+                  'aria-label': t('forms.buttons.continue_ipp') },
+          method: :put,
+          url: idv_how_to_verify_url,
+        ) do |f|
+    %>
+      <%= f.hidden_field(
+            :selection,
+            value: Idv::HowToVerifyForm::IPP,
+          ) %>
+      <%= f.label(
+            :selection_ipp,
+          ) do %>
+            <h3 class="h2 margin-top-0"><%= t('doc_auth.headings.verify_at_post_office') %></h3>
+            <div>
               <p><%= t('doc_auth.info.verify_at_post_office_instruction') %></p>
               <p><%= t('doc_auth.info.verify_at_post_office_description') %></p>
-            </span>
-          </div>
-        <% end %>
+            </div>
+          <% end %>
+      <%= f.submit t('forms.buttons.continue_ipp'), class: 'display-block margin-top-3 margin-bottom-5', outline: true %>
+    <% end %>
   </div>
-  <%= f.submit t('forms.buttons.continue'), class: 'display-block margin-y-5' %>
-<% end %>
+</div>
 
 <%= render(
       'shared/troubleshooting_options',

config/locales/doc_auth/en.yml

@@ -206,7 +206,7 @@ en:
         pretending to be you. %{link_html}'
       getting_started_learn_more: Learn more about verifying your identity
       how_to_verify: You have the option to verify your identity online, or in person
-        at a participating Post Office
+        at a participating Post Office.
       how_to_verify_troubleshooting_options_header: Want to learn more about how to verify your identity?
       hybrid_handoff: We’ll collect information about you by reading your state‑issued ID.
       image_loaded: Image loaded
@@ -242,14 +242,13 @@ en:
         this computer after you take photos. Your mobile phone must have a
         camera and a web browser.
       verify_at_post_office_description: This option is better if you don’t have a
-        mobile device or an easy way to take photos of your ID.
+        phone to take photos of your ID.
       verify_at_post_office_instruction: You’ll enter your ID information online, and
         verify your identity in person at a participating Post Office.
       verify_at_post_office_link_text: Learn more about verifying in person
       verify_identity: We’ll ask for your ID, phone number, and other personal
         information to verify your identity against public records.
-      verify_online_description: This option is better if you have a mobile device or
-        a way to take photos of your ID.
+      verify_online_description: This option is better if you have a phone to take photos of your ID.
       verify_online_instruction: You’ll take photos of your ID to verify your identity
         fully online. Most users finish this process in one sitting.
       verify_online_link_text: Learn more about verifying online
@@ -288,7 +287,6 @@ en:
       document_capture_selfie_text1: Hold your device at eye level
       document_capture_selfie_text2: Make sure your whole face is visible
       document_capture_selfie_text3: Take your photo in a well-lit place
-      most_common: Most Common
       review_issues_id_header_text: 'Review the images of your state‑issued ID:'
       review_issues_id_text1: Did you use a dark background?
       review_issues_id_text2: Did you take the photo on a flat surface?

config/locales/doc_auth/es.yml

@@ -280,21 +280,20 @@ es:
       upload_from_phone: No tendrá que volver a iniciar sesión y volverá a cambiar a
         esta computadora después de tomar las fotos. Su teléfono móvil debe
         tener una cámara y un navegador web.
-      verify_at_post_office_description: Esta opción es mejor si no tiene un
-        dispositivo móvil o una manera fácil de tomar fotografías de su
-        identificación.
+      verify_at_post_office_description: Esta opción es mejor si no tiene un teléfono
+        para tomar fotografías de su identificación.
       verify_at_post_office_instruction: Ingresará su información de identificación en
-        línea y verificará tu identidad en persona en una oficina de correos
+        línea y verificará su identidad en persona en una oficina de correos
         participante.
       verify_at_post_office_link_text: Obtenga más información sobre la verificación en persona
       verify_identity: Le pediremos su identificación, número de teléfono y otros
         datos personales para verificar su identidad comparándola con los
         registros públicos.
-      verify_online_description: La mayoría de los usuarios finalizan este proceso de
-        una sola vez. Esta opción es mejor si tiene un dispositivo móvil o una
-        forma de tomar fotografías de su identificación.
-      verify_online_instruction: Tomará fotografías de tu identificación para
-        verificar tu identidad completamente en línea.
+      verify_online_description: Esta opción es mejor si tiene un teléfono para tomar
+        fotografías de su identificación.
+      verify_online_instruction: Tomará fotografías de su identificación para
+        verificar su identidad completamente en línea. La mayoría de los
+        usuarios finalizan este proceso de una sola vez.
       verify_online_link_text: Obtenga más información sobre la verificación en línea
       you_entered: 'Ud. entregó:'
     instructions:
@@ -333,7 +332,6 @@ es:
       document_capture_selfie_text1: Mantenga el dispositivo al mismo nivel que los ojos
       document_capture_selfie_text2: Asegúrate de que tu rostro completo sea visible
       document_capture_selfie_text3: Tómese la foto en un sitio con buena iluminación
-      most_common: Más común
       review_issues_id_header_text: 'Revise las imágenes de su documento de identidad
         expedido por el estado:'
       review_issues_id_text1: '¿Ha usado un fondo oscuro?'

config/locales/doc_auth/fr.yml

@@ -218,9 +218,9 @@ fr:
       text_message: Nous avons envoyé un message à votre téléphone
       upload_from_computer: Continuer sur cet ordinateur
       upload_from_phone: Utilisez votre téléphone pour prendre des photos
-      verify_at_post_office: Confirmez votre identité un bureau de poste
+      verify_at_post_office: Vérifiez votre identité un bureau de poste
       verify_identity: Vérifier votre identité
-      verify_online: Confirmez votre identité en ligne
+      verify_online: Vérifiez votre identité en ligne
       welcome: Vérifions votre identité pour %{sp_name}
     hybrid_flow_warning:
       explanation_html: Vous utilisez <strong>%{app_name}</strong> pour vérifier votre
@@ -248,7 +248,7 @@ fr:
       getting_started_html: '%{sp_name} doit s’assurer que vous êtes bien vous, et non
         quelqu’un qui se fait passer pour vous. %{link_html}'
       getting_started_learn_more: Pour plus d’informations sur la vérification de votre identité
-      how_to_verify: Vous avez la possibilité de confirmer votre identité en ligne ou
+      how_to_verify: Vous avez la possibilité de vérifier votre identité en ligne ou
         en personne dans un bureau de poste participant.
       how_to_verify_troubleshooting_options_header: Vous voulez en savoir plus sur la façon de vérifier votre identité?
       hybrid_handoff: Nous recueillons des informations sur vous en lisant votre carte
@@ -292,22 +292,20 @@ fr:
       upload_from_phone: Vous n’aurez pas à vous reconnecter. Vous reviendrez sur cet
         ordinateur après avoir pris des photos. Votre téléphone portable doit
         être équipé d’un appareil photo et d’un navigateur web.
-      verify_at_post_office_description: Cette option est préférable si vous ne
-        disposez pas d’un appareil mobile ou d’un moyen facile de prendre des
-        photos de votre pièce d’identité.
+      verify_at_post_office_description: Cette option est préférable si vous n’avez
+        pas de téléphone pour prendre des photos de votre pièce d’identité.
       verify_at_post_office_instruction: Vous saisissez vos données d’identification
         en ligne et confirmez votre identité en personne dans un bureau de poste
         participant.
       verify_at_post_office_link_text: En savoir plus sur la confirmation en personne
       verify_identity: Nous vous demanderons votre pièce d’identité, numéro de
         téléphone et d’autres renseignements personnels afin de confirmer votre
         identité par rapport aux registres publics.
-      verify_online_description: La plupart des utilisateurs terminent ce processus en
-        une seule fois. Cette option est préférable si vous disposez d’un
-        appareil mobile ou d’un moyen de prendre des photos de votre pièce
-        d’identité.
+      verify_online_description: Cette option est préférable si vous disposez d’un
+        téléphone pour prendre des photos de votre pièce d’identité.
       verify_online_instruction: Vous prendrez des photos de votre pièce d’identité
-        pour confirmer votre identité entièrement en ligne.
+        pour confirmer votre identité entièrement en ligne. La plupart des
+        utilisateurs terminent ce processus en une seule fois.
       verify_online_link_text: En savoir plus sur la confirmation en ligne
       you_entered: 'Tu as soumis:'
     instructions:
@@ -346,7 +344,6 @@ fr:
       document_capture_selfie_text1: Tenez votre appareil à hauteur des yeux
       document_capture_selfie_text2: Veillez à ce que l’ensemble de votre visage soit visible
       document_capture_selfie_text3: Prenez votre photo dans un endroit bien éclairé
-      most_common: Le plus commun
       review_issues_id_header_text: 'Examinez les images de votre carte d’identité délivrée par l’État:'
       review_issues_id_text1: Avez-vous utilisé un fond sombre?
       review_issues_id_text2: Avez-vous pris la photo sur une surface plane?

config/locales/forms/en.yml

@@ -31,6 +31,8 @@ en:
       cancel: Yes, cancel
       confirm: Confirm
       continue: Continue
+      continue_ipp: Continue in person
+      continue_remote: Continue online
       delete: Delete
       disable: Delete
       edit: Edit

config/locales/forms/es.yml

@@ -34,6 +34,8 @@ es:
       cancel: Sí, cancelar
       confirm: Confirmar
       continue: Continuar
+      continue_ipp: Continúe en persona
+      continue_remote: Continúe en línea
       delete: Borrar
       disable: Borrar
       edit: Editar

config/locales/forms/fr.yml

@@ -35,6 +35,8 @@ fr:
       cancel: Oui, annuler
       confirm: Confirmer
       continue: Continuer
+      continue_ipp: Continuer en personne
+      continue_remote: Continuer en ligne
       delete: Effacer
       disable: Effacer
       edit: Modifier

spec/features/accessibility/idv_pages_spec.rb

@@ -28,6 +28,7 @@
       complete_agreement_step
 
       expect(current_path).to eq idv_how_to_verify_path
+      expect(page).to have_unique_form_landmark_labels
       expect_page_to_have_no_accessibility_violations(page)
     end
 

spec/features/idv/doc_auth/how_to_verify_spec.rb

@@ -86,21 +86,16 @@
     context 'and when sp has opted into ipp' do
       let(:in_person_proofing_opt_in_enabled) { true }
 
-      it 'displays expected content and requires a choice' do
+      it 'displays expected content and navigates to choice' do
         expect(page).to have_current_path(idv_how_to_verify_path)
 
-        # Try to continue without an option
-        click_continue
-
-        expect(page).to have_current_path(idv_how_to_verify_path)
-        expect(page).to have_content(t('errors.doc_auth.how_to_verify_form'))
-
-        complete_how_to_verify_step(remote: true)
+        # Choose remote option
+        click_on t('forms.buttons.continue_remote')
         expect(page).to have_current_path(idv_hybrid_handoff_url)
 
-        # go back and also test remote: false case
+        # go back and choose in person option
         page.go_back
-        complete_how_to_verify_step(remote: false)
+        click_on t('forms.buttons.continue_ipp')
         expect(page).to have_current_path(idv_document_capture_path)
       end
     end
@@ -140,7 +135,7 @@
     context 'Going back from Hybrid Handoff with opt in disabled midstream' do
       let(:in_person_proofing_opt_in_enabled) { true }
       before do
-        complete_how_to_verify_step(remote: true)
+        click_on t('forms.buttons.continue_remote')
       end
 
       it 'should not be bounced back to How to Verify with opt in disabled midstream' do
@@ -165,7 +160,7 @@
     context 'Going back from Hybrid Handoff with opt in enabled the whole time' do
       let(:in_person_proofing_opt_in_enabled) { true }
       before do
-        complete_how_to_verify_step(remote: true)
+        click_on t('forms.buttons.continue_remote')
       end
 
       it 'should be bounced back to How to Verify' do
@@ -186,7 +181,7 @@
     context 'Going back from Document Capture with opt in disabled midstream' do
       let(:in_person_proofing_opt_in_enabled) { true }
       before do
-        complete_how_to_verify_step(remote: false)
+        click_on t('forms.buttons.continue_ipp')
       end
 
       it 'should not be bounced back to How to Verify with opt in disabled midstream' do
@@ -215,7 +210,7 @@
     context 'Going back from Document Capture with opt in enabled the whole time' do
       let(:in_person_proofing_opt_in_enabled) { true }
       before do
-        complete_how_to_verify_step(remote: false)
+        click_on t('forms.buttons.continue_ipp')
       end
 
       it 'should be bounced back to How to Verify' do

spec/features/idv/steps/in_person_opt_in_ipp_spec.rb

@@ -466,7 +466,7 @@
       sign_in_via_branded_page(user)
       complete_welcome_step
       complete_agreement_step
-      complete_how_to_verify_step(remote: true)
+      click_on t('forms.buttons.continue_remote')
       expect(page).to have_current_path(idv_hybrid_handoff_url)
       complete_hybrid_handoff_step
       complete_document_capture_step