fix(DatePicker): error handling & a11y polish

[aresnik11]

Overview

Adds per-input validation error messages to DatePicker:

• Per-input errors — each DatePickerInput manages its own error, so range mode shows independent messages for the start and end inputs. Typed dates are validated on change and blur; invalid input stays visible until corrected.
• No-shift input layout — the error renders via FormError's absolute variant so the input never changes height: the range-mode arrow stays aligned and no space is reserved when there's no error.
• Calendar offset — the popover shifts down only when it's open and an error exists (via a hasError context flag); closed-state spacing is unchanged.
• Validation util — detects incomplete entries, invalid month/day, date rollover (e.g. Feb 30), and disabled dates, range with disabled dates.
• Localizable strings — new DatePickerTranslations keys for each error message, with English defaults.

Also adds some calendar/input accessibility refinements:

• Announce full weekday names in calendar headers instead of abbreviations
• Associate the field label with the segment shell via aria-labelledby
• Convert the presentational calendar icon to an IconButton with an openCalendarLabel translation

There are definitely some bugs so let me know what you find! Also lmk what the error messages should be and if we want any more generic.

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-1650, [GMT-1651], [GMT-1652], [GMT-1646]
• Version plan added/updated (or not needed)
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Single mode

1. Type 2/30/2024 and blur → shows "February does not have 30 days".
2. Correct to 2/28/2024 → error clears and the date commits.
3. Open/close the calendar several times → spacing above it stays consistent.
4. With a disableDate prop, type a disabled date → shows "This date is not available".

Range mode

5. Start input: type 2/30/2024 → error appears under the start input only.
6. End input: type an invalid date → a separate error appears under the end input.
7. Confirm the arrow separator does not move when errors appear/disappear.
8. Correct the start date → start error clears while the end error (if any) remains.
9. In a story with disabled dates, type a start date before the blocked date and an end date after it (a range that spans the disabled day).
10. Confirm the error message "This date range contains unavailable dates" appears under the input; the previously committed selection is left unchanged (not silently cleared).
11. Change the end date so the range no longer crosses the blocked date.
12. Confirm error clears

Calendar + spacing

13. Open the calendar with no error and note the spacing above it.
14. Trigger an error while it's open → the calendar shifts down so the error is visible.
15. Close and reopen → spacing matches step 9 (no drift).

Accessibility

16. Each error announces via its role="alert" region; start/end errors announce independently.
17. aria-invalid toggles on each input as its error state changes.
18. Calendar weekday headers announce full weekday names (e.g. "Monday").

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 8839bd2

---

☁️ Nx Cloud last updated this comment at 2026-08-12 15:07:15 UTC

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 81bac52

---

☁️ Nx Cloud last updated this comment at 2026-07-07 19:14:44 UTC

[codecov]

Codecov Report

❌ Patch coverage is 49.61832% with 66 lines in your changes missing coverage. Please review.
✅ Project coverage is 89.64%. Comparing base (8a6a54c) to head (8839bd2).
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...src/DatePicker/DatePickerInput/utils/validation.ts	36.06%	39 Missing ⚠️
...ges/gamut/src/DatePicker/DatePickerInput/index.tsx	59.70%	27 Missing ⚠️

❌ Your patch check has failed because the patch coverage (49.61%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3395      +/-   ##
==========================================
- Coverage   90.86%   89.64%   -1.23%     
==========================================
  Files         403      276     -127     
  Lines        6681     5879     -802     
  Branches     2169     1965     -204     
==========================================
- Hits         6071     5270     -801     
+ Misses        601      600       -1     
  Partials        9        9              

Flag	Coverage Δ
main	?
pull-request	89.64% <49.61%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codecademydev]

📬 Published Alpha Packages:

Package	Version	npm	Diff
@codecademy/gamut	72.5.2-alpha.fa4b53.0	npm	diff
@codecademy/gamut-icons	9.57.12-alpha.fa4b53.0	npm	diff
@codecademy/gamut-illustrations	0.58.17-alpha.fa4b53.0	npm	diff
@codecademy/gamut-kit	3.0.15-alpha.fa4b53.0	npm	diff
@codecademy/gamut-patterns	0.10.36-alpha.fa4b53.0	npm	diff
@codecademy/gamut-styles	20.1.1-alpha.fa4b53.0	npm	diff
@codecademy/gamut-tests	6.0.7-alpha.fa4b53.0	npm	diff
@codecademy/variance	0.26.2-alpha.fa4b53.0	npm	diff
eslint-plugin-gamut	2.4.4-alpha.fa4b53.0	npm	diff

[github-actions]

🚀 Styleguide deploy preview ready!

Preview URL: https://6a7c8c9bcfe1a15c1ac82913--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/6a7c8c9bcfe1a15c1ac82913