Команда «Исходного кода» занимается улучшением доступности React-компонентов (a11y). Недавно для медицинского проекта, где пациенты с нарушениями зрения записываются на приём, потребовался DatePicker. Готовые библиотеки, например @react-aria/datepicker от Adobe, не подошли из-за кастомизации макета (горизонтальная прокрутка месяцев) и жёстких требований дизайн-системы. К тому же тянуть 25 КБ зависимостей ради одного компонента не хотелось. Решили написать собственный, используя паттерн WAI-ARIA APG «Date Picker Dialog».
В качестве основы использовали Claude. Промпт содержал подробные требования: React, TypeScript, WCAG 2.1/2.2 AA, полная keyboard navigation, focus trap, aria-live и т.д. Claude выдал структуру за несколько минут: input с aria-describedby, кнопку-триггер, popover с dialog, сетку календаря. Команда оценила результат как «почти готово» — базовая навигация работала, но при тестировании с NVDA (screen reader) выявились проблемы: фокус выскакивал за пределы диалога, недоступные даты не блокировались, aria-live срабатывал некорректно.
| Клавиша | Статус |
|---|---|
| ← → ↑ ↓ | Работало |
| Home | Не работало |
| End | Не работало |
| PageUp и PageDown | Не работало |
| Shift + PageUp | Не работало |
| Shift + PageDown | Не работало |
Пришлось вручную дорабатывать ARIA-атрибуты, управление фокусом, keyboard navigation и тестировать с реальными screen reader'ами. На это ушло три дня. Вывод: Claude даёт хороший каркас, но не учитывает пользовательский опыт, скрытый за aria-label и поведением скринридеров. ИИ может сэкономить время на рутине, но финальная доработка — за человеком. Окончательный код выложен в open-source (ссылка в статье на Habr) для демонстрации.
Оставшиеся 30% — ARIA-атрибуты и навигация — потребовали трёх дней ручной работы
