React UI Enhancement: Check-in/Check-out Month Dropdowns
Context
You are working on a hotel reservation form in a React codebase. The form needs two new, controlled dropdowns for selecting months: one for Check-in and one for Check-out. The selections must respect constraints based on the current month and each other. Assume the form already has state management and an onSubmit handler; you will integrate with it via controlled props/callbacks or context.
Requirements
-
Render two month dropdowns (January–December) integrated with the existing form.
-
Enforce that the selected Check-out month is not earlier than the Check-in month; disable invalid options accordingly.
-
Disable months earlier than the current month for both dropdowns.
-
Keep components controlled and synchronize selections with the provided state management (props/callbacks or context) so the booking form receives updates.
-
Validate on change and on submit; block submission and show inline errors if constraints are violated.
-
Ensure keyboard accessibility and proper ARIA labels.
-
Add unit tests covering state updates, disabled options, and validation behavior.
Notes/Assumptions:
-
Months are for the current year only. Without year selection, the constraint is month-based only (e.g., September ≥ August). If you later add years, update the comparison accordingly.
-
Use native HTML select elements for built-in keyboard accessibility.