Hospitality Booking Widget

A custom date-range + guest-count search widget with interdependent state, real-time pricing, and full keyboard accessibility.

The demo instruments memoization boundaries via React.memo and useMemo, and implements focus-trapping in a fully accessible modal.

DemoCodeTests

What's covered

  • Guest limits (min/max) cannot be exceeded via the counter controls.
  • Invalid date ranges (check-out before check-in) are silently rejected.
  • Price estimate reacts correctly to date range × guest count changes.
  • ARIA roles are present: role="dialog", aria-modal, aria-expanded.
  • Modal is keyboard navigable and closes on Save.

Tests live in app/components/use-cases/booking-widget/__tests__/, using Vitest + React Testing Library with jsdom.

Run locally

npm run test

Sample output:

✓ useBookingFilter (6)
  ✓ initializes with default values
  ✓ updates valid dates successfully
  ✓ rejects invalid date ranges
  ✓ enforces min guest limits
  ✓ enforces max guest limits
  ✓ calculates price estimate correctly

✓ BookingWidget (4)
  ✓ renders initial trigger button
  ✓ opens modal on click
  ✓ allows keyboard navigation and properly closes
  ✓ updates guests and calculates price

Test Files  2 passed (2)
     Tests  10 passed (10)
   Duration  ~1.0s