Skip to content

Commit f8cb717

Browse files
Merge pull request #3662 from department-of-veterans-affairs/aedp/aw/165/ssn-update
Update ssn page to include guidance on displaying prefilled last four of ssn
2 parents 9bcfc95 + 8142380 commit f8cb717

File tree

2 files changed

+33
-6
lines changed

2 files changed

+33
-6
lines changed

src/_patterns/ask-users-for/social-security-number.md

+33-6
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ sub-section: ask-users-for
55
title: Social security or VA file number
66
intro-text: "Follow this pattern whenever you need to collect a person's Social Security or VA file number for an application."
77
code-link: https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/platform/forms-system/src/js/web-component-patterns/ssnPattern.jsx
8+
code-link-mask-string: https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/platform/forms-system/src/js/utilities/ui/mask-string.jsx
89
example-link: https://staging.va.gov/mock-form-patterns/identification-information
910
figma-link: https://www.figma.com/file/4A3O3mVx4xDAKfHE7fPF1U/VADS-Templates%2C-Patterns%2C-and-Forms?type=design&node-id=2988%3A23560&mode=design&t=93yXuwTXsWwWopry-1
1011
github-title: pattern-ssn
@@ -22,16 +23,22 @@ anchors:
2223

2324
### When to use this pattern
2425

25-
* **When you need to collect a person's Social Security or VA file number.** For example, for an application for identity purposes.
26+
* **When you need to collect or display a person's Social Security or VA file number.** For example, for an application for identity purposes.
2627

2728
## Examples
2829

30+
### Collect
31+
2932
{% include component-example.html alt="Shows the form fields used to obtain Social Security number and VA file number." file="/images/patterns/ask-users-for/social-security-number/form-ssn.png" caption="Example of asking for a Social security or VA file number." class="x2" %}
3033

3134
<a class="vads-c-action-link--blue" href="{{ page.example-link }}">
3235
View an example
3336
</a>
3437

38+
### Display
39+
40+
{% include component-example.html alt="Example of a prefilled Social Security number with a label that reads Last four digits of Social Security number' followed by the numbers 6784." file="/images/patterns/ask-users-for/social-security-number/card-ssn.png" caption="Example of a prefilled Social Security number." class="x2" %}
41+
3542
## How to design and build
3643

3744
### How this pattern works
@@ -42,28 +49,48 @@ A VA file number is how a Veteran’s claim is tracked through the compensation
4249

4350
* **Use the [web-component-patterns/ssnPattern in the Forms Library]( {{ page.code-link }}).**
4451

45-
The ssnPattern implements the following:
52+
The ssnPattern implements the following best practices:
4653

47-
* **Use a single text input for each field.**
54+
* **Prefill Social Security number when possible.** Don't ask users to input their SSN if you can prefill it instead.
55+
* **Use a single text input for each field.** Don't split the SSN into 3 text inputs.
4856
* **Do not abbreviate.** Use ‘Social Security number’. Do not use abbreviations, such as SSN.
4957
* **When asking for both Social Security and VA file numbers, one or the other may be provided.** VA file numbers are not on every form.If the form asks for a Social Security number and VA file number make sure to note in the VA file number label or helper text, "must have this or a Social Security number".
50-
* **Give user flexibility in entering their Social Security number.** A user can enter the Social Security number however they like: with spaces, without spaces, dashes, or without dashes. When the user enters their number and the input loses focus, the number will appear masked with dashes.
58+
* **Give user flexibility in entering their Social Security number.** A user can enter the Social Security number however they like: with spaces, without spaces, dashes, or without dashes. When the user enters their number and the input loses focus, the number will appear masked with dashes.
5159
* **Validate Social Security numbers.** See [content considerations](#content-considerations) for the appropriate validation messages.
5260

5361
### Components used in this pattern
5462

5563
* [Text input]({{ site.baseurl }}/components/form/text-input)
64+
* [Card]({{ site.baseurl }}/components/card)
5665

5766
### Page templates available for this pattern
5867

5968
Use the [VADS templates (Patterns & Forms) for Social Security or VA file number in Figma]({{ page.figma-link }}).
6069

70+
### Related patterns to this pattern
71+
72+
* [Help users to... Know when their information is prefilled]({{ site.baseurl }}/patterns/help-users-to/know-when-their-information-is-prefilled)
73+
* [Help users to... Update prefilled information]({{ site.baseurl }}/patterns/help-users-to/update-prefilled-information)
74+
6175
## Code usage
6276

63-
[ssnPattern is a web-component pattern available in the Forms library]({{ page.code-link }}).
77+
[ssnPattern is a web component driven pattern available in the Forms library]({{ page.code-link }}).
78+
79+
[formatNumberForScreenReader is a utility function available in the Forms library]({{ page.code-link-mask-string }}). This utility function can be used to format a number for screen readers, such as a Social Security number when it is prefilled.
80+
81+
Example:
82+
83+
```jsx
84+
const formattedNumber = formatNumberForScreenReader(123456789);
85+
const ssnPrefillText = () => (
86+
<p>
87+
Last 4 digits of Social Security number: {formattedNumber}
88+
</p>
89+
)
90+
```
6491

6592
## Content considerations
6693

6794
### Labels, error messages, and hint text
6895

69-
{% include _field-labels.html labels=site.data.content.patterns.ask-users-for.social-security-and-va-file-number %}
96+
{% include _field-labels.html labels=site.data.content.patterns.ask-users-for.social-security-and-va-file-number %}
Loading

0 commit comments

Comments
 (0)