Update State ID hint, move HTML out of translation strings into template by zachmargolis · Pull Request #9617 · 18F/identity-idp

zachmargolis · 2023-11-17T18:02:50Z

🛠 Summary of changes

Why: Keeping complex HTML inside translation strings is error-prone and can be easy to accidentally mis-align across languages

Resulting HTML diff is mostly newlines

-<div class="usa-hint tablet:grid-col-10" id="validated-field-hint-9e10ef41">May include letters, numbers, and the following symbols: <span class="usa-sr-only">spaces,</span><span aria-hidden="true"> </span> <span class="usa-sr-only">forward slashes,</span><span aria-hidden="true">/</span> <span class="usa-sr-only">asterisks,</span><span aria-hidden="true">*</span> <span class="usa-sr-only">dashes</span><span aria-hidden="true">-</span></div>
+<div class="usa-hint tablet:grid-col-10" id="validated-field-hint-900828ea">      May include letters, numbers, and the following symbols:
+         <span class="usa-sr-only">spaces,</span>
+         <span aria-hidden="true"> </span>
+         <span class="usa-sr-only">forward slashes,</span>
+         <span aria-hidden="true">/</span>
+         <span class="usa-sr-only">asterisks,</span>
+         <span aria-hidden="true">*</span>
+         <span class="usa-sr-only">dashes</span>
+         <span aria-hidden="true">-</span>
+</div>

manually aligning the spacing, the diff is just the random ID:

> diff before.txt after.txt 
1c1
< <div class="usa-hint tablet:grid-col-10" id="validated-field-hint-9e10ef41">
---
> <div class="usa-hint tablet:grid-col-10" id="validated-field-hint-900828ea">

👀 Screenshots

before	after

**Why**: Keeping complex HTML inside translation strings is error-prone and can be easy to accidentally mis-align across languages changelog: Internal, Source code, Reorganize hint text for in-person state ID

zachmargolis · 2023-11-17T18:07:56Z

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

+           [t('in_person_proofing.form.state_id.state_id_number_hint_asterisks'), '*'],
+           [t('in_person_proofing.form.state_id.state_id_number_hint_dashes'), '-', true],
+         ].each do |text, symbol, last| %>
+         <span class="usa-sr-only"><%= text %><%= ',' if !last %></span>


the comma was probably the trickiest bit! I think leaving the comma inside each string is error prone.

if we were joining "plain" text, I would consider having us use someting like Array#to_sentence or safe_join to handle the commas, but making sure the comma stays inside the HTML tags makes that tricky

This is a nice solution :superb: (needs a emoji)

This is very easy to grok. I say leave it. Seems like Array#to_sentence would require you to pass in the wrapping HTML for the conjoining elements as a param? This is just much more explicit.

config/locales/in_person_proofing/es.yml

JackRyan1989

Overall this looks great! Have you checked how things are read out using a screen reader to confirm the symbols are read the same as the current setup?

zachmargolis · 2023-11-17T19:06:58Z

Overall this looks great! Have you checked how things are read out using a screen reader to confirm the symbols are read the same as the current setup?

I'll give that a shot now

zachmargolis · 2023-11-17T19:12:17Z

confirmed that the text read by the screenreader is the same (which is good because it matches the HTML diff)

before	after

zachmargolis · 2023-11-17T19:17:11Z

Ok so the reason this was on my radar was #9600, and that merged, and that changed how this is formatted, so now I need to re-think my plan

…te-id-hint-translations

- Add HTML view specs too

zachmargolis · 2023-11-17T20:39:49Z

spec/views/idv/in_person/state_id.html.erb_spec.rb

+    expect(first).to all end_with(',')
+    expect(last).to_not end_with(',')


Specs to make sure we get the commas correct inside the reader hint texts

aduth

LGTM 👍

spec/javascript/packs/state-guidance-spec.js

svalexander · 2023-11-17T21:03:51Z

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

+    <% state_id_number_hint = capture do %>
+      <% [
+        [:default, state_id_number_hint_default],
+        ['TX', t('in_person_proofing.form.state_id.state_id_number_texas_hint')],


my concern here is how expansive this may get as we add more states. That was part of my thinking around adding the switch statement in the state-guidance file - to sort of separate out the strings in the switch to help maintain readability with the addition of more state specific text.

There's still only one place to add new states, and it's this template. So I think in terms of code changes needed to add new states, it's about the same in the end?

svalexander · 2023-11-17T21:26:32Z

app/javascript/packs/state-guidance.ts

+    const shouldShow =
+      element.dataset.state === jurisdictionCode ||
+      (!hasJurisdictionSpecificHint && element.dataset.state === 'default');
+    element.classList.toggle('display-none', !shouldShow);


do we need display-none? it seems shouldShow would always be true.

We need to show one but hide all the others, so this does that in one loop

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

* LG-11553 Remove recovery PII re-encryption from `PersonalKeyVerificationController` (#9602) The `PersonalKeyVerificationController` is used to verify a personal key as an MFA method and allow a user to sign in. When this is done a new personal key is issued. This controller had code for re-encrypting the users profile with the newly issued personal key. However, a user with an active profile was never able to reach this path. The `check_personal_key_enabled` calls `TwoFactorAuthentication::PersonalKeyPolicy#enabled?`. This method returns false if the user has any profiles. Since this code path is unreachable this commit removes it. I was not able to find any tests covering this re-encryption behavior. [skip changelog] * LG-11573: Add RISC events for account suspension, account reinstatement (#9594) * LG-11573: Add RISC events for account suspension, account reinstatement changelog: Internal, User suspension, Add RISC events for user suspension * feedback * feedback * feedback name changed * LG-11534 Load the active profile from the session on broken personal key (#9601) In #9509 we added the ability to specify which profile to fetch PII from when reading PII from the session. This commit uses the active profiles PII when encrypting recovery PII for the active profile when the active profile has a broken personal key. changelog: Internal, Pending and active profile, The active profile PII is fetched with the PII cacher when a user with a broken personal key on their active profile signs in. * Restructure analytics error_details as hash (#9572) changelog: Internal, Analytics, Adjust format of analytics logging to improve querying support * Remove failure_reason from Attempts API stub (#9576) * Remove Tracker#parse_failure_reason **Why**: Simplifies codebase * Remove failure_reason entirely **Why**: Inconsitent structure, and completely unused * Remove some more unused fake tracker code changelog: Internal, Source code, Clean up unused error tracking code * Use Icon List component for requested attributes consent (#9555) * Support tag options for IconListItemComponent * Use IconListComponent for requested attributes changelog: Internal, Components, Use consistent design system component for icon list * Use ButtonComponent for auth confirmation * Remove seemingly-unnecessary assertion content scoping * Update AAMVA test scripts (#9608) - Require optparse, test it - Use pretty-printing changelog: Internal, Testing, Add AAMVA test script covered by specs * LG 11432 Prevent duplicate F/T setup if user hits back button on second MFA prompt (#9587) * changelog: User-Facing Improvements, Webauthn, Prevent duplicate F/T setup on second MFA prompt * add spec coverage for platform auth redirect * move test to a function * move conditional to before_action * clean up validate platform authenticator method * LG 11145 Break up MFA selection presenter classes for Phone Presenters (#9560) * changelog: Internal, tech debt, Break up MFA presenter class for phone * split phone, voice, and sms presenter classes up * add tests cases for sign_in and set_up phone presenter class * split setup signin presenter spec for voice and sms * lint fix * remove old phone selection presenter spec * rename phone presenter in spec * remove unneeded configuration variable, leverage user for type method * remove info method from phone sub classes * update options presenter spec with newly split classes * merge sms and voice presenters * revise specs according to merged classes * remove deprecated spec and lint fix * change info to switch and fix regression with disabled? method * lint fix * fix spec * remove deprecated translations from setup presenter * move reader :method to phone sign in presenter * fix lint * fix lint * clean up selection presenter class * remove unneeded configuration setting * remove configuration from set up presenter spec * add sms and voice outage spec, standardize spec syntax * clarify some syntax * Refactor WebauthnVerificationForm to handle error messages (#9613) changelog: Internal, Code Quality, Move error messages for WebAuthn verification to form class * Add analytics property for WebAuthn sign-in frontend error (#9611) * Add analytics property for WebAuthn sign-in frontend error changelog: Internal, Analytics, Add analytics property for WebAuthn sign-in frontend error * Document frontend_error * Finalize cleanup for MFA selection presenters (#9612) * Update missed references to SignIn base selection presenter * Remove unused SelectionPresenter * Swap base presenters to raising NotImplementedError * Swap phone method comparison to use symbol Consistency with logic elsewhere in class * Raise on missing type method in base presenter classes * Consolidate presenter classes to define only type method * Rename phone selection presenter method to delivery_method * Add changelog changelog: Internal, Code Quality, Remove unused code related to MFA selection presenters * Update call sites to use new delivery_method constructor argument * Use setup-specific string for WebAuthn setup presenter * Use ActiveRecord built-in validator for WebAuthn error validation (#9614) * Use ActiveRecord built-in validator for WebAuthn error validation changelog: Internal, Code Quality, Move error messages for WebAuthn verification to form class * Update webauthn_verification_controller_spec.rb * LG-11535 Encrypt the pending and active profile when a user updates their password (#9607) In #9509 we added the ability to specify which profile to fetch PII from when reading PII from the session. As a result of this change we can encrypt both the pending and active profile with user's password. This means both profiles can be decrypted on sign-in. There are consequences for recovery with personal key. When the user changes their password and their data is encrypted their recovery PII is also encrypted as a consequence. The pending and active profile are both encrypted with a different personal key. In this commit I elected to display the pending profile personal key to the user so that profile is recoverable when it becomes active. [skip changelog] * LG-11542 Texas conditional hint text for id number (#9600) * add hint for tx * change name of file * change pack name * refactor show or hide hint function * update state guidance spec * changelog: User-Facing Improvements, State id page, tx specific id numner hint text * use text content instead of inner html * add translations for fr and es * lint fix for translations * update string * normalize yaml * add punctuation to en translation * update es translation * lint fix * Update Prettier to v3.1 (#9618) changelog: Internal, Code Formatting, Update Prettier code formatter to latest version * Log service_provider for RackAttack events (#9620) * Log service_provider for RackAttack events changelog: Internal, Logging, Log service_provider for RackAttack events * Update spec/requests/rack_attack_spec.rb Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com> * Update spec/requests/rack_attack_spec.rb Co-authored-by: Andrew Duthie <andrew.duthie@gsa.gov> --------- Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com> Co-authored-by: Andrew Duthie <andrew.duthie@gsa.gov> * Remove GPO verification rake task (#9621) This was just glue to support running the job, and is no longer needed. [skip changelog] * LG-11520: Enable daily GPO expiration job (#9622) changelog: Internal, Identity verification, Automatically expire inactive GPO profiles. * Update State ID hint, move HTML out of translation strings into template (#9617) **Why**: Keeping complex HTML inside translation strings is error-prone and can be easy to accidentally mis-align across languages * Refactor to support toggling for state-specific hints - Add HTML view specs too changelog: Accessibility, Screen reader support, Bring back screenreader support for State ID number hint * LG-11477: doc class error for some identification card (#9597) * LG-11477: Document issuer type check. When document type is classified as 'Identification Card', it may mean a State issued identification card. It can also include US Passport Card, VHIC, US Social Security Card, TWIC etc, all of them are not issued by a State. So we also need to check whether the issuer type is StateProvince, not by a Country. Driver's License/Identification Card issued by PR, VI, MP etc, do have issuer type of StateProvince. So by checking IssuerType of the document, we effectively excludes IDs issued at Federal level which are not supported document. * LG-11477: update test. * LG-11477: generate error for doc type before metrics. * LG-11477: use constant for string. * changelog: User-Facing Improvements, Doc Auth, Error for unsupported documents. * LG-11477: id type support logic update for mock client response. * LG-11477: update fixtures with doc issuer type field. * LG-11477: short circuit logic, no need to continue to check. * LG-11477: null safe operation. * LG-11477: minor code format change. * LG-11477: no need in rails. * LG-11477: test clean up. * Update Stylelint config dependencies in preparation for release publish (#9619) * Update stylelint-config-recommended-scss changelog: Internal, Dependencies, Update dependencies to latest versions * Prepare 3.0.0 release * LG-11435: Track frontend analytics for changed country in phone input (#9616) * Update JavaScript analytics examples to use new naming convention * Add new event naming convention support to FrontendLogController * LG-11435: Track frontend analytics for changed country in phone input changelog: Internal, Analytics, Track event when country changed in phone input * Use symbol list syntax Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com> * Improve handling of undefined country code --------- Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com> * LG-11025: Only log acuantCaptureMode when using acuant SDK (#9610) * log acuantCaptureMode as null when an image is uploaded Co-authored-by: Dawei Wang<dawei.wang@gsa.gov> * update spec to expect acuantCaptureMode is null for images uploaded during doc auth * changelog: Internal, Analytics, Image added logs define acuantCaptureMode only if acuant is used to capture the image * update js test upload test * happy linting * nullify acuantCaptureMode in getAddAttemptAnalyticsPayload when image source is upload * Prepare publish normalize-yaml to NPM (#9627) * Bump YAML dependency to latest * Bump normalize-yaml to 2.0.0 changelog: Internal, Packages, Publish `@18f/identity-normalize-yaml@2.0.0` * Restore width collapse for unstyled buttons (#9632) changelog: Bug Fixes, Buttons, Fix appearance of inline buttons --------- Co-authored-by: Jonathan Hooper <jonathan.hooper@gsa.gov> Co-authored-by: Osman Latif <109746710+olatifflexion@users.noreply.github.com> Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com> Co-authored-by: Kevin Masters <135744319+kevinsmaster5@users.noreply.github.com> Co-authored-by: Shannon A <20867088+svalexander@users.noreply.github.com> Co-authored-by: Mitchell Henke <mitchell.henke@gsa.gov> Co-authored-by: Matt Hinz <matt.hinz@gsa.gov> Co-authored-by: dawei-nava <130466753+dawei-nava@users.noreply.github.com> Co-authored-by: Amir Reavis-Bey <amir.reavis-bey@gsa.gov>

Update State ID hint, move HTML out of translation strings into template

9fdb07d

**Why**: Keeping complex HTML inside translation strings is error-prone and can be easy to accidentally mis-align across languages changelog: Internal, Source code, Reorganize hint text for in-person state ID

zachmargolis requested review from a team, aduth and svalexander November 17, 2023 18:02

zachmargolis commented Nov 17, 2023

View reviewed changes

variable rename

c01cd61

JackRyan1989 reviewed Nov 17, 2023

View reviewed changes

config/locales/in_person_proofing/es.yml Show resolved Hide resolved

JackRyan1989 reviewed Nov 17, 2023

View reviewed changes

zachmargolis added 3 commits November 17, 2023 11:17

Merge remote-tracking branch 'origin/main' into margolis-simplify-sta…

1711e52

…te-id-hint-translations

Refactor to support toggling for state-specific hints

b0b839e

- Add HTML view specs too

commit missing view spec

4aa077c

zachmargolis commented Nov 17, 2023

View reviewed changes

aduth approved these changes Nov 17, 2023

View reviewed changes

JackRyan1989 reviewed Nov 17, 2023

View reviewed changes

spec/javascript/packs/state-guidance-spec.js Outdated Show resolved Hide resolved

svalexander reviewed Nov 17, 2023

View reviewed changes

app/views/idv/in_person/state_id.html.erb Show resolved Hide resolved

zachmargolis added 3 commits November 17, 2023 14:21

lint fixes

8e71e5c

rubocop

2f24d13

erblint

2473e90

zachmargolis merged commit 6791267 into main Nov 18, 2023

zachmargolis deleted the margolis-simplify-state-id-hint-translations branch November 18, 2023 00:03

		expect(first).to all end_with(',')
		expect(last).to_not end_with(',')

Conversation

zachmargolis commented Nov 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠 Summary of changes

👀 Screenshots

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!

JackRyan1989 left a comment

Choose a reason for hiding this comment

Uh oh!

zachmargolis commented Nov 17, 2023

Uh oh!

zachmargolis commented Nov 17, 2023

Uh oh!

zachmargolis commented Nov 17, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

zachmargolis commented Nov 17, 2023 •

edited

Loading