Input Mask USWDS v3 - Development

[jamigibbs]

Description

The USWDS system has added an Input Mask component that we would like to use. At a minimum, we would like to use the SSN mask since that is currently being used on the 10-10EZ form and we also provide SSN guidance as well:

• https://staging.va.gov/health-care/apply/application/introduction
• https://design.va.gov/patterns/ask-users-for/social-security-number#examples

If it's possible to use the USWDS input mask script to work with web components, then we should do that (so that we can provide the updated script back to the USWDS team). We may need to take other approaches for this to work though so part of this ticket will be to explore the best approach to scripting since it's not written with web components in mind (as was already discussed/discovered previously).

Some additional USWDS references that might helpful:

• https://github.com/uswds/uswds/pull/4884
• https://github.com/uswds/uswds/issues/5025

Tasks

• [ ] Create a new input mask component using USWDS style and functionality.
• [ ] Write any necessary tests

Acceptance Criteria

• [ ] Input mask web component has been added to the component library

[jamigibbs]

The USWDS team is working on an updated version of input mask: https://github.com/uswds/uswds/pull/5227

[caw310]

Work on this could take 2 sprints

[Mottie]

Not sure if it's applicable for this new component, but I tested the new SSN web component field (web-component-fields/SsnField). It replaces the value with a masked value on blur, which then led to e2e test failures - the Cypress command that fills in the input also checks the resulting value of the input.