LG-4951: Link relevant help articles in the IAL2 flow by aduth · Pull Request #5300 · 18F/identity-idp

aduth · 2021-08-17T15:34:39Z

Why:

As an end user, I want a way to learn more about the requirements to complete the process on the IAL2 welcome screen, if I have questions about the required documents or information so that I know what I will need to complete identity proofing with login.gov before I get started.

As an end-user, I want a way to learn more about the requirements to complete the phone verification step, so that I can get answers to my questions and know if I will be able to complete identity proofing with login.gov.

Note: Phone OTP screen revisions are currently pending design finalization.

Screenshots:

Screen	Before	After
Welcome
Phone
Phone OTP
GPO

**Why**: As an end user, I want a way to learn more about the requirements to complete the process on the IAL2 welcome screen, if I have questions about the required documents or information so that I know what I will need to complete identity proofing with login.gov before I get started. As an end-user, I want a way to learn more about the requirements to complete the phone verification step, so that I can get answers to my questions and know if I will be able to complete identity proofing with login.gov.

zachmargolis

LGTM

aduth · 2021-08-18T15:26:58Z

I pushed some updates in ca85b69 based on accessibility feedback to open external links in a new window and show an icon. I've also updated screenshots in the original comment.

This was a bit more sizable work than I'd initially anticipated, due to:

Inferring a link as external seemed like an easy prospect, until encountering the fact that our "Get help at SP" redirects go through an internal route before redirecting the user to their external destination. This is why there's both implicit and explicit external options.
Our "Block Link" component is implemented both as a Rails partial and as a React component.

zachmargolis · 2021-08-18T17:42:23Z

app/views/shared/_block_link.html.erb

+  url_host_with_port.present? && url_host_with_port != "#{request.host}:#{request.port}"
+end
+tag_attrs = { href: url, class: 'usa-link block-link' }
+tag_attrs[:target] = '_blank' if external


I thought our whole thing for external links was that we prefix them with text but we still open them in the same window?

The argument being made in the accessibility discussion and related Slack discussion is that navigating to an external link in the IAL2 flow satisfies some exceptions to the rule, notably "significantly disrupt a multi-step workflow, such as filling in and submitting a form, if the page is opened in the same window or tab" and "provides extensive context-sensitive help [...] in new windows or tabs to prevent the loss of any form data that has already been entered."

Though as I write it out, and considering that the usage of a partial like this shouldn't be exclusive to IAL2, maybe we should at least drop the implicit "new tab if different host" behavior and pass the option explicitly everywhere it's relevant within the IAL2 flow.

Though as I write it out, and considering that the usage of a partial like this shouldn't be exclusive to IAL2, maybe we should at least drop the implicit "new tab if different host" behavior and pass the option explicitly everywhere it's relevant within the IAL2 flow.

Updated in bd5a8e2, with additional clarification around "new tab" not being strictly relevant to the links being external, and should be used within guidelines mentioned above.

Makes sense to me! Thx 👍

aduth · 2021-08-18T20:24:39Z

It looks like the specs don't like new tabs, so I'll need to dig into that.

anniehirshman-gsa

@aduth reviewed the sandbox and looks great, just a couple small comments about the external link icon:

When the external link is included in the troubleshooting options, the preceding word should break to the next line along with the icon, so the icon is never on its own line. Appears to work with the "Learn more" links currently, but not the troubleshooting options.
Is it possible to add 2px right and left (so margin-left: 4px and margin-right: 2px), by default to give the icon just a little more breathing room? Here's what it would look like in-line (revised):

aduth · 2021-08-19T19:43:12Z

Thanks for the feedback @anniehirshman-gsa !

Yes, good call. I'll try replacing the standard space with a non-breaking space to help with this.
Sure, I can increase the margins. This is a style inherited from the design system, so what I'll probably end up doing is make a temporary patch here, separately propose a change to the design system, and then we can reconcile the redundancy in a future IdP design system update. Let me know if that sounds good to you.

aduth · 2021-08-19T20:50:28Z

app/views/shared/_block_link.html.erb

+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="10"
+      viewBox="0 0 64 55"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="M35.226 5c.333 0 .605.106.818.32s.319.485.319.816v2.273c0 .332-.107.604-.32.817s-.484.32-.817.32H10.227c-1.562 0-2.9.555-4.013 1.668s-1.669 2.45-1.669 4.013v29.545c0 1.563.556 2.9 1.669 4.013s2.45 1.668 4.013 1.668h29.546c1.562 0 2.9-.555 4.013-1.668a5.47 5.47 0 0 0 1.668-4.013V33.41c0-.332.106-.604.32-.817s.484-.32.816-.32h2.273c.331 0 .604.107.817.32s.32.485.32.818v11.363C50 47.591 49 50 46.999 52s-4.41 3.001-7.226 3.001H10.227C7.41 55 5.001 54 3 51.999s-3-4.41-3-7.226V15.227c0-2.817 1-5.226 3-7.226S7.41 5 10.227 5zm26.46-5c.627 0 1.17.229 1.627.686s.687 1 .687 1.626v18.501c0 .626-.229 1.168-.687 1.626a2.22 2.22 0 0 1-1.626.687c-.626 0-1.168-.23-1.626-.687l-6.36-6.36-23.558 23.56c-.24.24-.518.36-.831.36s-.59-.12-.831-.36l-4.12-4.12a1.142 1.142 0 0 1-.361-.831c0-.313.12-.59.361-.83l23.559-23.56-6.36-6.36c-.457-.457-.686-1-.686-1.626s.229-1.168.687-1.626 1-.686 1.625-.686z"
+        fill="currentColor"
+      />
+    </svg>


Rather than rendering this SVG inline, we should probably just include the usa-link--external class to the wrapping link, to be sure the icon styling is consistent and to automatically fix the line breaking behavior.

The downside is that we don't get automatic text color inheriting via currentColor, as in case of a visited link:

I know USWDS has been using CSS mask as a workaround for coloring icons in other similar situations (e.g. the "official USA website" banner arrow icon), so maybe an opportunity for an upstream enhancement.

**Why**: Consistent styling, proper text wrapping

aduth · 2021-08-20T11:38:41Z

@anniehirshman-gsa I pushed a few updates yesterday afternoon to address your feedback, improving how the icon breaks onto new lines and giving it a bit more space from surrounding content.

anniehirshman-gsa

LGTM, thanks for the updates! And lmk if you need help ticketing the design system improvement for the icon color (so it matches the text color for visited links).

aduth · 2021-08-20T13:41:16Z

lmk if you need help ticketing the design system improvement for the icon color (so it matches the text color for visited links).

I discovered a related issue in the USWDS repository which was closed as out-of-roadmap. Might still be something they'd accept a contribution for though, especially since the mask workaround is a relatively new one AFAIK. Otherwise, we can go the LGDS route.

aduth · 2021-08-25T14:00:43Z

Visited link icon color follow-up at uswds/uswds#4297

**Why**: Because I had mistakenly neglected to get these professionally translated as part of the work in #5300.

sheldon-b · 2022-06-28T20:10:18Z

config/locales/idv/fr.yml

-      city: Ville
-      no_alternate_phone_html: '<strong>%{link}</strong>. Nous vous ferons parvenir
-        une lettre contenant un code.'
+      city: Ville une lettre contenant un code.'


@aduth looks like this got a little fudged -- I ran into it consolidating some i18n keys for an IPP ticket. Any concerns with me updating this like so? Is there any particular approval process I should go through?

city: Ville

Whoops! Thanks for catching that slip-up @sheldon-b . I think it'd be fine to fix that directly, since the text had already existed and it was only by mistake that it had been combined with the removed text string.

aduth requested a review from anniehirshman-gsa August 17, 2021 15:34

zachmargolis approved these changes Aug 17, 2021

View reviewed changes

Block Link: Open in tab and include icon for external link

ca85b69

zachmargolis reviewed Aug 18, 2021

View reviewed changes

Make troubleshooting options "new tab" (prev. "external") explicit

bd5a8e2

aduth added 2 commits August 18, 2021 16:51

Update specs to handle newly opened windows

743eaf9

Remove unnecessary, unsupported windowed click spec handling

31fc15b

anniehirshman-gsa reviewed Aug 19, 2021

View reviewed changes

aduth commented Aug 19, 2021

View reviewed changes

aduth added 2 commits August 19, 2021 17:03

Use usa-link--external for external link icon

3713473

**Why**: Consistent styling, proper text wrapping

Add extra horizontal spacing to external link icon

241331a

anniehirshman-gsa approved these changes Aug 20, 2021

View reviewed changes

aduth mentioned this pull request Aug 20, 2021

[Links]: External link icon color uswds/uswds#2185

Closed

aduth merged commit 439d270 into main Aug 20, 2021

aduth deleted the aduth-lg-4951-ial2-help-articles branch August 20, 2021 13:50

aduth mentioned this pull request Aug 24, 2021

Increase external link margin styling 18F/identity-design-system#240

Merged

aduth added a commit that referenced this pull request Oct 14, 2021

Update "temporary" translated text with final translations

09eda3a

**Why**: Because I had mistakenly neglected to get these professionally translated as part of the work in #5300.

aduth mentioned this pull request Oct 14, 2021

Update "temporary" translated text with final translations #5500

Merged

aduth added a commit that referenced this pull request Oct 14, 2021

Update "temporary" translated text with final translations (#5500)

ce22cee

**Why**: Because I had mistakenly neglected to get these professionally translated as part of the work in #5300.

sheldon-b reviewed Jun 28, 2022

View reviewed changes

Conversation

aduth commented Aug 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zachmargolis left a comment

Choose a reason for hiding this comment

Uh oh!

aduth commented Aug 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zachmargolis Aug 18, 2021

Choose a reason for hiding this comment

Uh oh!

aduth Aug 18, 2021

Choose a reason for hiding this comment

Uh oh!

aduth Aug 18, 2021

Choose a reason for hiding this comment

Uh oh!

zachmargolis Aug 18, 2021

Choose a reason for hiding this comment

Uh oh!

aduth commented Aug 18, 2021

Uh oh!

anniehirshman-gsa left a comment

Choose a reason for hiding this comment

Uh oh!

aduth commented Aug 19, 2021

Uh oh!

aduth Aug 19, 2021

Choose a reason for hiding this comment

Uh oh!

aduth Aug 20, 2021

Choose a reason for hiding this comment

Uh oh!

aduth commented Aug 20, 2021

Uh oh!

anniehirshman-gsa left a comment

Choose a reason for hiding this comment

Uh oh!

aduth commented Aug 20, 2021

Uh oh!

aduth commented Aug 25, 2021

Uh oh!

sheldon-b Jun 28, 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 Jun 28, 2022

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

aduth commented Aug 17, 2021 •

edited

Loading

aduth commented Aug 18, 2021 •

edited

Loading

sheldon-b Jun 28, 2022 •

edited

Loading