Summary

Updated the date of birth pattern so the month, day, and year fields each have their own hint, matching the memorable date component.

Related issue

Closes #3289

Preview link

Preview link: (pending — the deploy preview for this branch)

The pattern appears on Patterns → Create a user profile → Date of birth, in the "Pattern preview" section and in the code sample below it.

Problem statement

Desired state: Someone using a screen reader on the date of birth pattern hears guidance specific to the field they are on — one sentence for the month, one for the day, one for the year.

Actual state: All three fields pointed at the same hint (id="mdHint"). Moving through the group, a screen reader user heard "For example: January 19 2000" three times and never heard anything about the individual field. The month dropdown also still listed months as "01 - January", which is read aloud as digits that carry no meaning.

Consequence: This is the pattern the site recommends other teams copy, so the older markup gets carried into government forms built from it. The memorable date component was fixed in uswds/uswds#6725, but this pattern was left behind, so the site now demonstrates something different from what it recommends.

The component documentation pages pull their markup straight from the USWDS package, so they update themselves. This pattern include is written by hand, which is why it drifted.

Solution

The pattern now follows the same approach as the memorable date component:

• Each field has its own short, screen-reader-only hint, and points only at that hint.
• The hint above the fields stays exactly where it is and still reads the same way for sighted users. It is now hidden from screen readers, so it is not repeated three times.
• Month options use plain month names.

A note on naming. The issue suggested hint names in the form {id}-month-hint. This uses mdMonthHint, mdDayHint, and mdYearHint instead, because that is the naming every other pattern on this site already uses (ssnHint, pnHint, gnHint, and eleven more). Happy to switch to the wording in the issue if the team prefers it.

Two things worth a look during review:

1. The wording of the hint above the fields was also updated to match the component ("Select a month. Enter 1 or 2 digits for the day and 4 digits for the year."). The issue only asked for it to be hidden from screen readers, so flagging the text change explicitly.
2. This is a markup-only change and needs nothing from 3.14.0 to render correctly — both classes it uses already exist in the pinned 3.13.0. But it does land ahead of the 3.14.0 version bump in USWDS-Site - Release 3.14.0 documentation #3282.

The field names and ids were left alone, so nothing else that refers to them is affected.

Major changes

• _includes/patterns/date-of-birth.html — added a hint for each field, hid the group hint from screen readers and updated its wording, removed the leading numbers from the month list.
• _data/changelogs/pattern-user-profile-date-of-birth.yml — added a changelog entry. The date is the NNNN-NN-NN placeholder and the PR number is blank, both to be filled in at merge.
• spec/date_of_birth_pattern_spec.rb — new. Checks the pattern keeps its per-field hints so this cannot quietly slip back.

Testing and review

Automated

• bundle exec rspec — 21 examples, 0 failures (10 already existing, 11 new).
• The new tests check relationships rather than exact text: every field points at a hint that actually exists, is screen-reader-only, and sits in the same form group as its field; the group hint is hidden from screen readers and referenced by no field; month labels do not start with digits; no duplicate ids. Six of the eleven fail against the previous markup.
• npx gulp lintJS lintSass — clean. bundle exec jekyll build — clean.

Accessibility

Checked the built page in Chrome with axe (WCAG 2 A/AA) — no violations on the date fields or anywhere else on the page. aria-valid-attr-value, aria-hidden-focus, duplicate-id, duplicate-id-aria, label, and form-field-multiple-labels all pass.

What each field reports, before and after:

To review it yourself

1. npm start, then open /patterns/create-a-user-profile/date-of-birth/.
2. The pattern should look unchanged — the hint above the fields is still visible and in the same place.
3. Tab through the three fields with a screen reader on. Each should read out its own sentence rather than the same one three times.
4. Open the month dropdown and confirm it reads "January" rather than "01 - January".

Feedback I'm looking for: whether the hint naming should follow the issue's wording instead of the site's existing convention, whether the reworded group hint is wanted here, and confirmation on a real screen reader — the checks above were automated and in-browser, not run with VoiceOver or NVDA.

Note: pa11y-ci would not run locally (its bundled browser crashes on Apple silicon), so the same axe checks were run in Chrome directly. CI's own pa11y run should be treated as the final word.