UDS-1933: feat(app-rfi): added a patch for react-phone-input-2

[juanmitriatti]

UDS-1933

Rearrange components in react-phone-input-2 to improve accessibility, making navigation and usage easier for users with disabilities.

Test Steps:

1. Pull the branch.
2. Run yarn command in the source directory in order to install dependencies and apply patch.
3. Navigate to the app-rfi folder and run the command:

yarn storybook

Verification:

Ensure that when using the Tab key for navigation, the focus first lands on the flag input before the phone number input.

Form :
http://localhost:XXXX/?path=/story/uds-asurfi--default

Solution added to the library :

• Issue : Country select dropdown menu receives Tab navigation focus after phone text field - Accesibility issue · Issue chore(deps): bump node-forge from 1.2.0 to 1.3.0 #708 · bl00mber/react-phone-input-2

• PR : fix: correct tab order for country code dropdown (#708). by juanmitriatti · Pull Request #709 · bl00mber/react-phone-input-2

To resolve this ticket, which required adding a custom patch to the UDS project, I followed these steps in the React phone library code:

Solution - Technical steps :

yarn patch
Yarn patch <package> This command will cause a package to be extracted in a temporary directory intended to be editable at will.

Once you're done with your changes, run yarn [patch-commit](https://yarnpkg.com/cli/patch-commit) -s path (with path being the temporary directory you received) to generate a patchfile and register it into your top-level manifest via the patch: protocol. Run yarn patch-commit -h for more details.

Description

Links

• JIRA ticket
• Unity reference site
• Unity Design Kit

[davidornelas11]

Lerna fails to build because it is not recognizing the yarn patch. Might have to do with yarn hoisting. Might have to be something we look into @scott-williams-az
https://yarnpkg.com/configuration/yarnrc#nmHoistingLimits

[scott-williams-az]

Try this:
./package.json resolutions have to be at the workspace root

{
  ...
  "dependencies": {
    ...
   },
   "resolutions": {
      "react-phone-input-2": "patch:react-phone-input-2@npm%3A2.15.1#~/.yarn/patches/react-phone-input-2-npm-2.15.1-f7a7dd913b.patch"
   },
}

./packages/app-rfi/package.json since our patch is for 2.15.1 remove the ^ and set the exact version

{
  ...
  "dependencies": {
    ...
    "react-phone-input-2": "2.15.1",
    ...
   },
}

[asu-jenkins-devops]

Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1470/index.html

[juanmitriatti]

Hi @scott-williams-az
Good morning. PR has been updated based on your feedback. It seems to be working now.
Thanks
CC @mlsamuelson @davidornelas11

[davidornelas11]

The build runs and the phone input works as expected. The initial country code is first selected when tabbing then after the choice is made, the normal number input can be tabbed to. Approved