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

Drawer

Drawer — составной компонент для выдвижных панелей (Drawer), прикреплённых к краю экрана: они сохраняют больше контекста страницы, чем модальное окно по центру.
StorybookИсходники

Подписи

DrawerContent не задаёт себе имя сам. Дать имя выдвижной панели (Drawer) — ваша задача, и это обязательно: панель без имени недоступна, потому что скринридеры объявляют её просто как «dialog».

  • Сошлитесь на видимый заголовок через aria-labelledby на DrawerContent или задайте aria-label, если видимого заголовка нет.
  • Если панель отвечает за конкретную задачу, заголовок должен прямо её описывать.
side-inspector.tsx · 60 строк
import { useId, type CSSProperties } from 'react';
import {
  Badge,
  Button,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerTrigger,
  Heading,
  Icon,
  IconButton,
  Text,

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

ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.
КлавишаДействие
EnterSpaceНа триггере: открывает панель. Фокус получает сама панель или дочерний элемент с autoFocus.
TabShift + TabПереносит фокус на следующий или предыдущий элемент управления внутри панели. Страница за ней инертна, и фокус на неё не попадает.
EscapeЗакрывает панель и возвращает фокус на элемент, который её открыл. С closedBy='none' ничего не делает.
Каждая строка проверена в настоящем браузере: Playwright нажимает клавишу в Chromium и смотрит, где оказались фокус и активный элемент.

Во вложенных панелях Escape закрывает только верхнюю.

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

  • При открытии фокус должен переходить внутрь панели.
  • При закрытии фокус должен разумно возвращаться на исходный триггер или равнозначное действие.
  • Стеки вложенных панелей требуют настоящего интеграционного тестирования, а не изолированных допущений.

Управление фокусом обеспечивает нативный <dialog>: пока панель открыта, остальная страница инертна, Tab остаётся внутри панели (но может попасть в интерфейс браузера), а при закрытии фокус возвращается на элемент, который был в фокусе до открытия.

При открытии фокус получает сама панель, поэтому ничего внутри не подсвечивается, а скринридеры объявляют её заголовок; Tab переводит фокус на первый элемент управления. Чтобы сфокусировать дочерний элемент, например первое поле формы, задайте ему autoFocus.

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

  • Браузер предоставляет панель как role=dialog с aria-modal, а имя она получает из вашего aria-labelledby или aria-label.
  • Триггер предоставляет aria-haspopup='dialog' и aria-expanded.
  • У DrawerClose нет подписи по умолчанию, поэтому кнопке только с иконкой внутри него нужен aria-label; встроенных строк в библиотеке нет.
  • Назначение панели должно быть понятным.
  • Длинные панели всё равно должны восприниматься как одна цельная задача в оверлее, а не как оторванный фрагмент страницы.

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

  • Панели часто содержат формы, но семантика формы принадлежит элементам управления внутри панели.
  • Состояния ошибок и обязательные поля должны оставаться видимыми, даже когда панель прокручивается.
  • Кнопки в <form method="dialog"> закрывают панель через onChangeOpen(false), а value кнопки отправки становится returnValue диалога. Это работает и с closedBy='none'.

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

  • Панель без aria-labelledby или aria-label.
  • Длинное содержимое без понятной возможности прокрутки.
  • Вложенные оверлеи без повторной проверки возврата фокуса.