Урок 21. Частые ошибки

📁 Раздел: shadcn/ui ⏱️ Время изучения: ~55 мин 🎯 Сложность: Продвинутая

⚡ Кратко

Диалог без заголовка, модалка вместо уведомления, вложенные оверлеи, подтверждение без объяснения последствий.

Ошибка 1. Диалог без DialogTitle

Как ломается: скринридер объявляет «диалог» без названия — непонятно, что открылось. Некоторые примитивы дополнительно выводят предупреждение в консоль.

✅ Заголовок есть всегда

<DialogContent>
  <DialogTitle>Настройки уведомлений</DialogTitle>
  …
</DialogContent>

{/* если по дизайну заголовок не нужен — скрываем визуально, но оставляем в разметке */}
<DialogTitle className="sr-only">Настройки уведомлений</DialogTitle>

Ошибка 2. Модальное окно там, где хватило бы уведомления

Как ломается: пользователь получает окно «Сохранено!» с кнопкой «ОК» — и вынужден прерваться, чтобы её нажать.

Правило: модальное окно — только когда без ответа нельзя продолжать. Результат действия сообщайте уведомлением, изменением состояния кнопки или прямо в интерфейсе.

Ошибка 3. Оверлей внутри оверлея

Как ломается: из диалога открывается второй диалог, фокус путается, Esc закрывает не то, что ожидалось.

Как правильно: избегайте вложенности. Если нужен второй шаг — сделайте его шагом внутри того же окна. Единственное разумное исключение — подтверждение опасного действия поверх формы, и его стоит делать через AlertDialog.

Ошибка 4. «Вы уверены?» без объяснений

❌ Бесполезный вопрос

<DialogTitle>Вы уверены?</DialogTitle>
<DialogFooter>
  <Button>Да</Button>
  <Button variant="ghost">Нет</Button>
</DialogFooter>

✅ Что произойдёт и что нажать

<DialogTitle>Удалить проект «Аналитика»?</DialogTitle>
<DialogDescription>
  Будут удалены 24 отчёта и все выгрузки. Действие нельзя отменить.
</DialogDescription>
<DialogFooter>
  <DialogClose render={<Button variant="ghost">Отмена</Button>} />
  <Button variant="destructive">Удалить проект</Button>
</DialogFooter>

Почему: кнопка должна называть действие, а не отвечать «да». Тогда её смысл понятен, даже если пользователь не прочитал текст.

Ошибка 5. Меню вместо кнопок

Если действий два и оба важны — покажите две кнопки. Меню прячет функциональность за дополнительный клик; оно оправдано, когда действий много или они второстепенные.

Ошибка 6. Прокрутка страницы под открытым окном

Как ломается: при прокрутке колесом уезжает страница под окном, а окно остаётся на месте — ощущение поломки.

Примитив блокирует прокрутку сам. Проблема возвращается, если вы рисуете «свой» оверлей поверх — ещё один довод в пользу готового компонента.

Ошибка 7. Длинный контент без прокрутки внутри

Если содержимое диалога выше экрана, добавьте прокрутку именно ему: max-h-[80vh] overflow-y-auto. Иначе кнопки футера окажутся за пределами видимой области и до них нельзя будет добраться.