Skip to content

LG-14382: Update intl-tel-input to the latest version#11257

Merged
aduth merged 5 commits intomainfrom
aduth-lg-14382-intl-tel-input
Sep 19, 2024
Merged

LG-14382: Update intl-tel-input to the latest version#11257
aduth merged 5 commits intomainfrom
aduth-lg-14382-intl-tel-input

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Sep 18, 2024

🎫 Ticket

LG-14382

🛠 Summary of changes

Updates intl-tel-input to the latest version, from 17.0.19 to 24.5.0.

Release notes: https://github.com/jackocnr/intl-tel-input/releases

This is a significant upgrade spanning multiple major versions, and had more than a handful of breaking changes to sift through.

While it's a maintenance task, it's also partly motivated by discovery in #11189 that the phone input had accessibility issues uncovered by the changes there. Newer versions of the library address those issues.

There's also at least one noteworthy feature included in newer versions: the ability to search for countries in the dropdown.

Draft: Working to resolve an issue with "Single Country Selection" (not currently used in the application).

📜 Testing Plan

Verify there's no regression in behavior of the phone input

  1. Go to http://localhost:3000/components/preview/phone_input/preview
  2. Interact with the phone fields
  3. Go to https://idp.dev.identitysandbox.gov/components/preview/phone_input/preview
  4. Interact with the phone fields
  5. Observe that they behave largely the same (aside from new features in latest version, like country search)

You might also want to check other usage in the application for regressions:

  • Adding a phone as an MFA method
  • Hybrid document capture handoff
  • Phone verification step in identity verification

👀 Screenshots

Before After
image image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This change is made because intl-tel-input no longer assigns a global intlTelInputUtils, and E.164 is the default (source).

changelog: Internal, Dependencies, Update dependency to latest version
@aduth aduth force-pushed the aduth-lg-14382-intl-tel-input branch from 70c14d7 to 842af74 Compare September 18, 2024 19:57
Now handled internally in intl-tel-input with a11y-text element. Test coverage already exists here for expected value (see modification)
Latest version has "countryOrder" rather than "preferredCountries", no longer outputs duplicate iitems
@aduth aduth marked this pull request as ready for review September 19, 2024 15:29
@aduth aduth merged commit 0f3dce0 into main Sep 19, 2024
@aduth aduth deleted the aduth-lg-14382-intl-tel-input branch September 19, 2024 17:46
AShukla-GSA pushed a commit that referenced this pull request Sep 30, 2024
* LG-14382: Update intl-tel-input to latest version

changelog: Internal, Dependencies, Update dependency to latest version

* Remove unnecessary screen reader text assignment

Now handled internally in intl-tel-input with a11y-text element. Test coverage already exists here for expected value (see modification)

* Remove unnecessary aria-owns removal

Removed upstream in jackocnr/intl-tel-input#1421

* Use i18n option to customize aria-label

Available as of jackocnr/intl-tel-input@fc0fc06

* Remove unnecessary duplicate removal logic

Latest version has "countryOrder" rather than "preferredCountries", no longer outputs duplicate iitems
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants