Skip to content

LG-7620: Update IPP CTA language to include Baltimore option #7058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
allthesignals merged 7 commits into from
Sep 30, 2022
Merged

LG-7620: Update IPP CTA language to include Baltimore option #7058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
64da62e
Update IPP CTA language to include Baltimore option
allthesignals Sep 26, 2022
7148f0e
Merge branch 'main' into wmg/7620-ipp-cta-updates
allthesignals Sep 27, 2022
f922b0f
Use formatHTML helper and br tag to generate newlines
allthesignals Sep 27, 2022
c942b49
changelog: Improvements, In-Person Proofing, Include new location in …
allthesignals Sep 29, 2022
86f34af
Update README.md
allthesignals Sep 29, 2022
a9d9440
Merge branch 'main' into wmg/7620-ipp-cta-updates
allthesignals Sep 30, 2022
a9cdafc
Merge branch 'main' into wmg/7620-ipp-cta-updates
allthesignals Sep 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/javascript/packages/components/troubleshooting-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export type TroubleshootingOption = Omit<BlockLinkProps, 'href'> & {
interface TroubleshootingOptionsProps {
headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

heading?: string;
heading?: ReactNode;

options: TroubleshootingOption[];

Expand Down
6 changes: 4 additions & 2 deletions ...ascript/packages/document-capture/components/document-capture-troubleshooting-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useContext } from 'react';
import { FlowContext } from '@18f/identity-verify-flow';
import { TroubleshootingOptions } from '@18f/identity-components';
import { useI18n } from '@18f/identity-react-i18n';
import { useI18n, formatHTML } from '@18f/identity-react-i18n';
import type { TroubleshootingOption } from '@18f/identity-components/troubleshooting-options';
import ServiceProviderContext from '../context/service-provider';
import MarketingSiteContext from '../context/marketing-site';
Expand Down Expand Up @@ -82,7 +82,9 @@ function DocumentCaptureTroubleshootingOptions({
{hasErrors && inPersonURL && showInPersonOption && (
<TroubleshootingOptions
isNewFeatures
heading={t('idv.troubleshooting.headings.are_you_near')}
heading={formatHTML(t('idv.troubleshooting.headings.are_you_near'), {
br: 'br',
})}
options={[
{
url: '#location',
Expand Down
2 changes: 1 addition & 1 deletion config/locales/idv/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ en:
review: Re-enter your %{app_name} password to protect your data
troubleshooting:
headings:
are_you_near: 'Are you near Washington, D.C.?'
are_you_near: 'Are you located near Washington, D.C. <br/>or Baltimore, MD?'
Copy link
Copy Markdown
Contributor

@aduth aduth Sep 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we check if the line break element here may have some unintended impact on accessibility, such as a pause when reading? From what I recall, it may. We could consider adding an aria-hidden attribute to have it ignored by assistive technology. (This would need to be added as part of the formatHTML mapping, like in the example in the new documentation introduced with #7034).

Copy link
Copy Markdown
Contributor Author

@allthesignals allthesignals Sep 29, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, @aduth looping in @svalexander do you know what the effects might be? According to this answer <br/> means "read without pause."

Copy link
Copy Markdown
Contributor

@aduth aduth Sep 30, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Continuing the discussion from the previous thread, another reason for non-breaking spaces vs. explicit newlines can be to avoid situations where variations in screen size or locale can result in scenarios where a line break would need to occur before the explicit line break.

Example in French + iPhone SE:

image

This feels like a bit of an edge case so I'm not especially concerned about it in this instance, more that the general practice of trying to control line breaks like this can be more trouble than it's worth.

Copy link
Copy Markdown
Contributor Author

@allthesignals allthesignals Sep 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @aduth. I went ahead and merged, but I want to investigate this some more.

I'm not sure I'm following entirely, but it actually seems like we want some combination of a line break opportunity element and non-breaking spaces:

Are you located near Washington,&nbsp;D.C. <wbr/>or Baltimore,&nbsp;MD?

Something like this would occur:
Sep-30-2022 14-46-24

I think this is a situation where my asking design their input on this would have helped a bit.

I'll open a follow-up PR

missing_required_items: Are you missing one of these items?
need_assistance: 'Need immediate assistance? Here’s how to get help:'
still_having_trouble: Still having trouble?
Expand Down
2 changes: 1 addition & 1 deletion config/locales/idv/es.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ es:
review: Vuelve a ingresar tu contraseña de %{app_name} para encriptar tus datos
troubleshooting:
headings:
are_you_near: '¿Se encuentra cerca de la ciudad de Washington?'
are_you_near: '¿Reside cerca de Washington, D.C. <br/>o Baltimore, MD?'
missing_required_items: '¿Le falta alguno de estos puntos?'
need_assistance: '¿Necesita ayuda inmediata? Así es como puede obtener ayuda:'
still_having_trouble: '¿Sigue teniendo dificultades?'
Expand Down
2 changes: 1 addition & 1 deletion config/locales/idv/fr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ fr:
review: Entrez à nouveau votre mot de passe %{app_name} pour crypter vos données
troubleshooting:
headings:
are_you_near: Êtes-vous situé près de Washington, D.C.?
are_you_near: 'Êtes-vous situé près de Washington, D.C. <br/>ou Baltimore, MD?'
missing_required_items: Est-ce qu’il vous manque un de ces éléments?
need_assistance: 'Avez-vous besoin d’une assistance immédiate? Voici comment
obtenir de l’aide:'
Expand Down