LG-6349 Consistently use 'Update' language on verify and update pages by sheldon-b · Pull Request #6546 · 18F/identity-idp

sheldon-b · 2022-07-02T06:39:45Z

Updates the verify page's labels to use sentence case ("First name") instead of title case ("First Name")
Changes "Social Security Number" to "Social Security number" per designs
Changes "Zip Code" to "ZIP Code"
Updates the pages where users update their address, state ID information, and Social Security number to have an "Update" button instead of "Continue" button
Changes the HTML semantics of the verify page key/value pairs to be HTML description lists instead of just divs with text
Moves a bunch of content strings that were previously only used in the doc auth flow but are now also used in the in-person proofing flow. I moved them from doc auth namespaces/files into idv namespaces/files

📋 Not included

Back/cancel/start over buttons of any sort

📺 Demo

You can try these changes in the sbachstein sandbox.

Verify page (doc auth)

Change address page (doc auth)

Verify page (in-person proofing)

Change address page (in-person proofing)

Change state ID page

Change SSN page

Note: this is the doc auth page which is the same for in-person except in-person's step indicator is different.

sheldon-b · 2022-07-02T06:42:49Z

app/views/idv/shared/_verify.html.erb

Description lists have a default bottom margin of 2 so I wanted to override it to match the div that was here previously

app/views/idv/shared/_verify.html.erb

sheldon-b · 2022-07-02T06:47:26Z

config/locales/idv/fr.yml

This translation got messed up in this PR -- this restores it to what it should be

…pdate' language instead of 'Change'

sheldon-b · 2022-07-04T22:50:02Z

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

    <div class="margin-bottom-4">
      <%= f.input :city,  label: t('idv.form.city'), required: true, maxlength: 255, wrapper: false,
-                          input_html: { aria: { invalid: false }, class: 'usa-input', value: @pii['city'] } %>
+                          input_html: { aria: { invalid: false }, value: @pii['city'] } %>


This styling was making the city input text smaller than the other inputs:

sheldon-b · 2022-07-04T22:51:43Z

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

                            pattern: '(\d{5}([\-]\d{4})?)',
                            wrapper: false,
-                            input_html: { aria: { invalid: false }, class: 'usa-input', value: @pii['zipcode'] } %>
+                            input_html: { aria: { invalid: false }, value: @pii['zipcode'] } %>


This styling was making the ZIP code input text smaller than the other inputs:

sheldon-b · 2022-07-04T22:53:25Z

app/views/idv/shared/_verify.html.erb

-        <%= "#{t('doc_auth.forms.first_name')}: #{pii[:first_name]}" %>
+        <dt class="display-inline"> <%= t('idv.form.first_name') %>: </dt>
+        <dd class="display-inline margin-left-05"> <%= pii[:first_name] %> </dd>


I took this opportunity to implement Andrew's suggestion to improve the HTML semantics of this page by using description lists

We may not need both the margin-left-05 and the explicit " " space, since my intention with the margin-left-05 in the other component was as a substitute for the space character.

Oh good call, for some reason I thought I needed the left margin but the space alone is better. Set the margins to 0 in 9abec01 (there is a default margin that is way too big)

aduth · 2022-07-05T12:21:48Z

Updates the pages where users update their address, state ID information, and Social Security number to have an "Update" button instead of "Continue" button

I expect these changes would need to be reflected in the partner-facing Figma designs for identity verification. Has this been / can we communicate to the UX folks?

aduth

Happy to defer to another with more context here, but changes LGTM! Some great refactoring here too.

aduth · 2022-07-05T12:28:02Z

app/views/idv/shared/_verify.html.erb

-        <%= "#{t('doc_auth.forms.first_name')}: #{pii[:first_name]}" %>
+        <dt class="display-inline"> <%= t('idv.form.first_name') %>: </dt>
+        <dd class="display-inline margin-left-05"> <%= pii[:first_name] %> </dd>


We may not need both the margin-left-05 and the explicit " " space, since my intention with the margin-left-05 in the other component was as a substitute for the space character.

aduth · 2022-07-05T12:30:04Z

app/views/idv/shared/_verify.html.erb

 <div class='margin-top-4 margin-bottom-2'>
  <div class="grid-row grid-gap grid-gap-2 padding-bottom-1">
-    <div class='grid-col-fill'>
+    <dl class="grid-col-fill margin-bottom-0">


At some point we may want to consider creating a convenience CSS class for these sorts of term:value lists, so that we can avoid the margin utility here and the display-inline below.

Makes sense. Could you link me to an existing CSS class so I can see how that's currently done in the codebase? Not planning to do it as part of this ticket but I'd like to know how for next time

Makes sense. Could you link me to an existing CSS class so I can see how that's currently done in the codebase? Not planning to do it as part of this ticket but I'd like to know how for next time

That's a good question. The stylesheets are a bit scattered as far as patterns go.

I could imagine a few options:

Treat it like a "component" for description list, optionally of an "unstyled" variety

e.g. .description-list or .term-list or .description-list.description-list--unstyled in a new file _description-list.scss or _term-list.scss

Ideally these component stylesheets would map to a Rails component or React component, which we could do, but I don't think is strictly necessary unless you think there's some value in it.

Add a utility class, maybe even to one of the existing (typography?)

I'm not a huge fan of the utility classes since they're a hodgepodge of miscellaneous things, but this feels like it fits as a miscellaneous thing

aduth · 2022-07-05T12:31:32Z

config/locales/idv/en.yml

    buttons:
      cancel: Cancel and return to your profile
+      change_address_label: Change address
+      change_label: Update


Were we intending to change the text here from "Change" to "Update" ?

The links on the right:

Edit: I see this update is proposed in the Figma attached to LG-6285. Two follow-up points:

Do we also need to revise the accessible aria-labels to match? Since my understanding is that those are supposed to be essentially the same, but more contextualized for assistive technology (link purpose)

Similar to other comment, I expect these would need to be updated in the partner-facing Figma designs

@aduth yeah I've talked with Annie about making these changes to the doc auth flow in addition to the IPP flow. I'll let her know that we should update the partner-facing Figma designs

Good point about the aria labels, I agree that those should change

I'll also aim to get the Spanish and French translations for all of these label changes (the visible and aria labels) included as we do IPP content translations

Updated the English aria labels in 87f7c0c. I've updated LG-6337 to track getting translations for the Spanish and French translations of this change (eg Change => Update in Spanish and French for the various labels and buttons)

zachmargolis

LGTM

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

config/locales/idv/fr.yml

config/locales/idv/es.yml

tomas-nava

approve!

config/locales/idv/en.yml

WheresHJ

LGTM!

sheldon-b commented Jul 2, 2022

View reviewed changes

app/views/idv/shared/_verify.html.erb Outdated Show resolved Hide resolved

sheldon-b commented Jul 2, 2022

View reviewed changes

Sheldon Bachstein added 8 commits July 2, 2022 00:04

Use 'Update' buttons. Use sentence case

cbd7df3

First pass at making copy changes

6078449

Fix zipcode key

dbc0dc4

Finish moving translation strings

abe8f03

Use description list on verify page

708a28e

changelog: Improvements, Verify and update pages, Consistently use 'U…

8cf7121

…pdate' language instead of 'Change'

Fix indentation issues

3039727

Normalize yamls

86aa542

sheldon-b force-pushed the sbachstein/lg-6349-content-changes-to-doc-auth-flow branch from e419a71 to 86aa542 Compare July 2, 2022 07:11

Fix broken specs

5a5ec17

sheldon-b force-pushed the sbachstein/lg-6349-content-changes-to-doc-auth-flow branch from c166628 to 5a5ec17 Compare July 3, 2022 00:09

Make font sizes consistent

330dbca

sheldon-b commented Jul 4, 2022

View reviewed changes

sheldon-b changed the title ~~(WIP) LG-6349 Consistently use 'Update' language on verify and update pages~~ LG-6349 Consistently use 'Update' language on verify and update pages Jul 4, 2022

sheldon-b marked this pull request as ready for review July 4, 2022 23:03

sheldon-b requested review from a team, NavaTim, WheresHJ, rutvigupta-design, tomas-nava and zachmargolis and removed request for a team and rutvigupta-design July 4, 2022 23:03

aduth approved these changes Jul 5, 2022

View reviewed changes

Sheldon Bachstein added 2 commits July 5, 2022 07:35

Remove unnecessary left margins

9abec01

Update English aria labels

87f7c0c

zachmargolis approved these changes Jul 5, 2022

View reviewed changes

NavaTim reviewed Jul 5, 2022

View reviewed changes

app/views/idv/address/new.html.erb Show resolved Hide resolved

config/locales/idv/fr.yml Outdated Show resolved Hide resolved

config/locales/idv/es.yml Outdated Show resolved Hide resolved

tomas-nava approved these changes Jul 5, 2022

View reviewed changes

config/locales/idv/en.yml Outdated Show resolved Hide resolved

WheresHJ approved these changes Jul 5, 2022

View reviewed changes

Fix i18n typos and capitalization

a50fbf9

NavaTim self-requested a review July 6, 2022 00:27

NavaTim approved these changes Jul 6, 2022

View reviewed changes

sheldon-b merged commit a39d30f into main Jul 6, 2022

sheldon-b deleted the sbachstein/lg-6349-content-changes-to-doc-auth-flow branch July 6, 2022 01:01

jmdembe mentioned this pull request Jul 12, 2022

Deploy RC 199 to Prod #6579

Merged

Conversation

sheldon-b commented Jul 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📋 Not included

📺 Demo

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sheldon-b Jul 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

sheldon-b Jul 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aduth commented Jul 5, 2022

Uh oh!

aduth 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!

sheldon-b Jul 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aduth Jul 6, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

zachmargolis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tomas-nava left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

WheresHJ left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

sheldon-b commented Jul 2, 2022 •

edited

Loading

sheldon-b Jul 4, 2022 •

edited

Loading

sheldon-b Jul 5, 2022 •

edited

Loading

sheldon-b Jul 5, 2022 •

edited

Loading

aduth Jul 6, 2022 •

edited

Loading