LG-12656 Update how to verify page by svalexander · Pull Request #10289 · 18F/identity-idp

svalexander · 2024-03-22T17:29:49Z

🎫 Ticket

Link to the relevant ticket:
LG-12656

🛠 Summary of changes

Content updates to the how to verify page as well as removal of the radio buttons to be in line with the new design.

📜 Testing Plan

Provide a checklist of steps to confirm the changes.

👀 Screenshots

If relevant, include a screenshot or screen capture of the changes.

en:

es:

fr:

mobile:

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

allis-green · 2024-03-27T23:28:22Z

We found an inconsistency in the original Spanish gengo translation:

"Tomará fotografías de tu identificación para verificar su identidad completamente en línea. La mayoría de los usuarios finalizan este proceso de una sola vez. "

should read...

"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. "

aduth · 2024-03-28T12:29:18Z

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

-    <%= f.radio_button(
+  </div>
+<% end %>
+<%= simple_form_for(


I'm surprised this isn't triggering a form labeling accessibility test that was added in #9508, since my understanding is that if we have more than one form on a page, they need to be labelled. Does that apply here?

added aria-labels as well as a test for the expectation in the code you linked

JackRyan1989

Looking good! Small comments

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

JackRyan1989 · 2024-03-28T15:30:10Z

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

+  </div>
+<% end %>
+<%= simple_form_for(
+      @idv_how_to_verify_form,


Is there a way to get these two forms to render with separate id's? The rendered HTML has them with the same id: "new_idv_how_to_verify_form"

This sounds like a basic HTML validation thing we'd ideally be checking in some baseline checks like our expect_page_to_have_no_accessibility_violations helper. Is this page currently validated with that? Or is that helper not catching duplicate IDs?

Seems like we're running that exact helper on line 31 here.

I guess that helper isn't catching duplicate IDs?

Hm, yeah. Well, doesn't need to block here. We can update the IDs and follow-up separately to see about incorporating an HTML validation check.

should we add a follow up ticket?

Follow-up to enhance accessibility tests: #10362

JackRyan1989 · 2024-03-28T15:34:22Z

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

+                <p><%= t('doc_auth.info.verify_at_post_office_instruction') %></p>
+                <p><%= t('doc_auth.info.verify_at_post_office_description') %></p>
+              </div>
+              <%= f.submit t('forms.buttons.continue_ipp'), class: 'display-block margin-y-5', outline: true %>


Do we want the submit button inside of the label element? I don't think you want interactive elements inside of a label? MDN Link

thanks for linking this documentation. I'm moving it into a different div, now just trying to figure out how to get the button to align with the block of text above it

ok i was able to move the button so it aligns with the block of text...but it's not a super neat solution

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

gina-yamada · 2024-03-28T19:35:10Z

spec/features/idv/doc_auth/how_to_verify_spec.rb

      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


Good addition!

gina-yamada · 2024-03-28T19:41:06Z

Confirmed changes in yml files will not affect other areas of the application. I requested access to see Figma but don't have access yet to confirm layout. Design will ultimately need to sign off, so not blocking. List of AC in ticket is entirely met except for "Create a follow up ticket to update with DOS translations"- but that is not blocking for this PR. Reach out after above comments are addressed for a final approval-but looks close.

JackRyan1989 · 2024-03-29T13:58:01Z

@18F/identity-joy-designers I'm seeing some slightly weird styling on mobile. I'm not sure how the buttons are supposed to align on mobile, should they left align with the text, or should they be centered?

Screenshot:

allis-green

Translations reviewed and approved

allis-green · 2024-03-29T17:55:47Z

config/locales/doc_auth/es.yml

-        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.


Looks good!

allis-green · 2024-03-29T17:56:05Z

config/locales/doc_auth/es.yml

+        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.


allis-green · 2024-03-29T17:56:20Z

config/locales/doc_auth/fr.yml

      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é en ligne


allis-green · 2024-03-29T17:58:29Z

config/locales/doc_auth/fr.yml

        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


reviewed and approved

carmenrosalop

LGTM! Thank you, Shannon!

JackRyan1989

LGTM! Great work!

svalexander added 2 commits March 19, 2024 18:01

update layout and remove radio buttons

a98e22f

fix routing on submission and add en strings

0d9865d

zachmargolis reviewed Mar 22, 2024

View reviewed changes

app/views/idv/how_to_verify/show.html.erb Outdated Show resolved Hide resolved

svalexander added 3 commits March 26, 2024 08:44

Merge branch 'main' into shannon/lg-12656-how-to-verify-design-updates

92d8f74

add es and fr strings

6e38736

update hash syntax

a6ad4ba

svalexander requested review from a team and WheresHJ and removed request for a team March 26, 2024 17:13

fix merge conflict

e6d8046

svalexander changed the title ~~update layout and remove radio buttons~~ LG-12656 Update how to verify page Mar 26, 2024

svalexander added 7 commits March 26, 2024 16:34

lint fix

fee2ae2

update navigation test case

4344917

remove helper method and use new btns

551d352

update helper function

11fd192

remove unused keys

8c1d83b

update html to comply with a11y

bb7d899

changelog: User-Facing Improvements, how to verify page, update content

0e73d18

svalexander requested review from a team and KeithNava March 27, 2024 21:49

allis-green assigned allis-green and unassigned allis-green Mar 27, 2024

allis-green self-requested a review March 27, 2024 22:34

aduth reviewed Mar 28, 2024

View reviewed changes

JackRyan1989 reviewed Mar 28, 2024

View reviewed changes

svalexander added 3 commits March 28, 2024 11:55

Merge branch 'main' into shannon/lg-12656-how-to-verify-design-updates

78409fe

update es translation and remove comments

db4994c

Merge branch 'main' into shannon/lg-12656-how-to-verify-design-updates

e06b28e

gina-yamada reviewed Mar 28, 2024

View reviewed changes

app/views/idv/how_to_verify/show.html.erb Outdated Show resolved Hide resolved

gina-yamada reviewed Mar 28, 2024

View reviewed changes

svalexander added 2 commits March 28, 2024 15:57

delete erroneous class

cc2916c

moved btn out of label and added aria labels to forms

cd1cb4b

svalexander added 2 commits March 29, 2024 12:46

update en text and use h2

ff1b689

update fr translations

6f80131

carmenrosalop requested review from carmenrosalop and removed request for allis-green March 29, 2024 17:04

allis-green reviewed Mar 29, 2024

View reviewed changes

move button

e298a7a

carmenrosalop approved these changes Mar 29, 2024

View reviewed changes

JackRyan1989 approved these changes Mar 29, 2024

View reviewed changes

fix lint issues

3887feb

svalexander merged commit 6f9dc9f into main Mar 29, 2024

svalexander deleted the shannon/lg-12656-how-to-verify-design-updates branch March 29, 2024 19:53

This was referenced Apr 2, 2024

Deploy RC 368 to Prod #10349

Merged

Check duplicate element IDs in accessibility tests #10362

Merged

gina-yamada mentioned this pull request May 13, 2024

LG-12693 How to verify biometric design updates #10524

Merged

12 tasks

aduth mentioned this pull request Sep 10, 2024

Remove unused radio button styles #11221

Merged

Conversation

svalexander commented Mar 22, 2024 • edited by JackRyan1989 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎫 Ticket

🛠 Summary of changes

📜 Testing Plan

👀 Screenshots

Uh oh!

Uh oh!

allis-green commented Mar 27, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JackRyan1989 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gina-yamada commented Mar 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JackRyan1989 commented Mar 29, 2024

Uh oh!

allis-green left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

carmenrosalop left a comment

Choose a reason for hiding this comment

Uh oh!

JackRyan1989 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

svalexander commented Mar 22, 2024 •

edited by JackRyan1989

Loading

gina-yamada commented Mar 28, 2024 •

edited

Loading