Passport Pattern Validation UI and Logic

Context: Implement this in a vanilla HTML/CSS/JavaScript environment (single file, no frameworks). You are given a mapping from country names to passport number patterns, for example:

• { USA: "LLDDDD", Canada: "AALLDDDD" }
• Pattern symbols:
  • L: letter [A–Z/a–z]
  • D: digit [0–9]
  • A: alphanumeric [A–Z/a–z/0–9]

Tasks

1. Build a minimal UI layout with:
   • A country selector populated from the object keys
   • A passport-number input field
   • A Validate button
2. Implement validate(country, value) that returns true only if value exactly matches the selected country’s pattern; otherwise returns false . Specify how to handle edge cases: empty input, leading/trailing whitespace, unexpected country key, case handling, extra/invalid characters, and partial matches.
3. Wire the UI so that:
   • Clicking Validate shows an inline error message when invalid and does nothing when valid
   • Resetting occurs when the country changes (clear input and errors)
   • Changing the input clears any existing error
4. Provide console-based tests covering multiple valid/invalid scenarios across countries and edge cases.
5. Explain how you would improve accessibility (labels, ARIA attributes, focus management, error semantics, keyboard navigation, contrast) and what changes you would make to make it production-ready (validation robustness, i18n/l10n, performance, security/sanitization, telemetry, forms analytics, unit/integration/e2e tests).