Перейти к содержимому
v2.5.0
English
Русский
Документация

Collapsible

Collapsible — составной компонент для одной раскрывающейся области с триггером и поверхностью содержимого.
StorybookИсходники

Подпись

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

Поведение клавиатуры

ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.
КлавишаДействие
EnterSpaceРаскрывает или сворачивает содержимое. Фокус остаётся на триггере.
Каждая строка проверена в настоящем браузере: Playwright нажимает клавишу в Chromium и смотрит, где оказались фокус и активный элемент.

С asChild клавиши обрабатывает отрендеренный дочерний элемент: используйте <button>, потому что сам триггер не добавляет обработки клавиш.

Поведение фокуса

  • При открытии или закрытии раздела фокус должен оставаться на триггере.
  • Открытие раздела не должно неожиданно переносить фокус в содержимое.
  • Collapsible-содержимое внутри оверлеев всё равно нужно проверять в реальном стеке.

Семантика для скринридеров

  • CollapsibleTrigger должен сообщать состояние раскрытия и указывать на управляемую область через aria-controls.
  • У области содержимого должен быть стабильный ID.
  • Видимый текст триггера должен быть понятен и в свёрнутом состоянии раздела.

Семантика форм

  • Если в содержимом есть необязательные элементы управления формы, подписи и ошибки принадлежат этим элементам, а не корню.
  • Скрытые состояния валидации не должны становиться невидимыми без другого внешнего сигнала.

Риски доступности

  • Рендер через asChild, теряющий поведение кнопки.
  • Слишком расплывчатые подписи триггера, не объясняющие скрытую область.
  • Важные ошибки формы, спрятанные в свёрнутом содержимом без видимой сводки.