Creating an Accessible AI-Powered DatePicker: Two Approaches

Creating a DatePicker component that works correctly with keyboard navigation and screen readers and has a manageable state is a non-trivial task. This is especially true for WCAG accessibility standards, which require careful attention to detail. In the context of React and TypeScript, this task can be approached in various ways, including the use of artificial intelligence tools.

The 80/20 Temptation: AI as a Code Generator

The first approach that comes to mind is to have AI generate most of the code. The idea is simple: give the system a clear prompt and get 80% of the solution ready, then refine the remaining 20% manually. At first glance, this seems efficient:

• The model can create the basic structure of the calendar.
• Generate ARIA attributes.
• Implement basic keyboard navigation and date-handling logic.

However, problems usually arise when attempting to integrate such code. Focus becomes unstable, event handler conflicts occur, and screen readers require additional configuration. Even minor changes to the logic can disrupt the component’s operation, demonstrating that code that appears correct on the surface is far from production-ready.

System Design with an AI Agent

The second, more systematic approach involves using an AI agent at every stage of design and development. Instead of simply generating code, the AI agent is integrated into the entire process:

• Development of the Product Requirements Document (PRD).
• Task decomposition.
• Establishing rules for the agent.
• External verification.
• Use of testing tools such as Vitest and Playwright.
• Building with Vite and strict type checking.

In this scenario, the AI agent does not proceed to the next step until the current one has been fully and correctly completed. This approach allows AI to effectively assist where its strengths lie and to identify difficulties when it begins to stray off course. A single large prompt is insufficient; instead, a cycle involving constant verification and monitoring is necessary.

The Role of the Engineer in the Age of AI

It is clear that the primary role of the engineer when working with AI is changing. It is no longer limited to writing code. The following aspects are becoming key:

• Control over the design.
• Architectural design.
• Defining contracts.
• Assessing the cost of changes.

Tools such as The Verifier are becoming indispensable, providing the necessary level of control and confidence in the quality of the final product.

Source: Habr