Update guidance for masking SSN

[msbtterswrth]

Background

As part of the Staging collab cycle review, it was recommended that we provide guidance and/or code for how to mask SSN consistently across all forms.

ACs

• We have determined the preferred method of masking SSN
• We have updated our guidance in VADS into include this recommendation
  • Screenshots updated
  • Code examples updated
  • Content considerations updated if necessary

[msbtterswrth]

I chatted with Matt Dingee about this a bit, and we think that putting this guidance in the prefill pattern page doesn't make sense. We'll instead make a recommendation and open a PR to update the existing Social Security number pattern.

CC @adamwhitlock1 @bellepx0

[kristen101606]

A few Slack threads to reference:

• Oct 29, 2024 post where I linked to past conversations about how to display SSN (much of which was about how to mask a field where the user is actively typing an SSN, as opposed to displaying a prefilled SSN)
• Lynn's Oct 30, 2024 post with Matt, which Lynn references in the comment above.

[msbtterswrth]

Blocking this until our research study is complete so that we can make that recommendation.

[ChristineRoseSteiffer]

I have created a new ticket to update the platform guidance for SSN.

[msbtterswrth]

@bellepx0 @adamwhitlock1 Let's open a PR with the suggested changes and link it in both tasks once @beckyphung takes a look and decides where it should live!

[beckyphung]

Created this Word doc and added to this Slack thread.

Main question I still have is:

• how to update ssnPattern to include how SSN displays in the prefilled card of uneditable info.
• Or code elsewhere?

Assigning back to you @msbtterswrth Also when we submit our PR, we should fix the title and capitalize "Security."

[msbtterswrth]

I'll copy the relevant content sections and updates here.

Under the Usage heading:

Add "or display" in the sentence "When you need to collect..."

Under the Examples heading:

Add a screenshot of the prefilled social security number with the alt text "Example of a prefilled Social Security number with a label that reads Last four digits of Social Security number' followed by the numbers 7890." and a caption of "Example of a prefilled Social Security number."

Under the How this pattern works heading:

Add the following above "Use a single input for each field":
Prefill Social Security number when possible. Don't ask users to input their SSN if you can prefill it instead.

Under the Code usage heading

Add guidance for accessibility, ie how screen readers should read the content.

Under the Components used in this pattern heading:

Add "card"

Under the Page template available for this pattern heading:

Add the following:

Related Patterns to this pattern

Help users to... Know when their information is prefilled
Help users to... Update prefilled information (link to new page)

[msbtterswrth]

We'll create a spike next sprint to investigate where or if any code/components exist that display form field data.

[adamwhitlock1]

@msbtterswrth move this into next sprint, and we will get a PR up for this content. We will probably need to wait until the content for the Update Prefill pattern is merged though, since this content links to that new page.

[adamwhitlock1]

To update the documentation with code examples around accessibility guidance, I first created this PR for the vets-website repo: department-of-veterans-affairs/vets-website#33866 which adds the number formatting for last 4 digits of SSN as a utility of the platform.

Once that is merged, then we can finish updating the SSN page in the design docs with link to it.

[msbtterswrth]

PR looks good to me, feel free to close this when it's merged in!