Title, Description, Action

Radix UI предоставляет высококачественные, доступные и настраиваемые компоненты для создания интерфейсов на React. Компоненты Title, Description и Action играют ключевую роль в обеспечении семантики и доступности элементов интерфейса, особенно в контексте модальных окон, тултипов, диалогов и меню.

Title

Компонент Title служит для обозначения заголовка интерактивного элемента. Его использование гарантирует, что текст заголовка будет правильно идентифицирован скринридерами и другими ассистивными технологиями.

Основные моменты использования:

  • Поддерживает семантическую маркировку через атрибут id.
  • Обычно используется внутри Dialog, Tooltip, Popover и других контейнеров Radix UI, где требуется заголовок.
  • В сочетании с компонентом Description обеспечивает доступность через связь aria-labelledby.

Пример использования:

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Root>
  <Dialog.Trigger>Открыть диалог</Dialog.Trigger>
  <Dialog.Overlay />
  <Dialog.Content>
    <Dialog.Title id="dialog-title">Настройки профиля</Dialog.Title>
    <Dialog.Description id="dialog-description">
      Здесь можно изменить имя пользователя и пароль.
    </Dialog.Description>
  </Dialog.Content>
</Dialog.Root>

Особенности:

  • Dialog.Title автоматически передает идентификатор для скринридеров, если используется aria-labelledby.
  • Может быть стилизован с помощью CSS или библиотек стилизации, таких как stitches или tailwindcss.

Description

Компонент Description используется для предоставления дополнительной информации, поясняющей заголовок или действие. Он помогает пользователю понять контекст элемента интерфейса.

Ключевые моменты:

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

Пример использования:

<Dialog.Content>
  <Dialog.Title>Удаление файла</Dialog.Title>
  <Dialog.Description>
    Это действие необратимо. Удалённый файл нельзя будет восстановить.
  </Dialog.Description>
</Dialog.Content>

Особенности:

  • Атрибут aria-describedby автоматически связывает Description с контейнером, что повышает доступность.
  • Можно применять классы для текста с разной визуальной иерархией (например, меньший шрифт, серый цвет).

Action

Компонент Action отвечает за интерактивные элементы, инициирующие действия пользователя, такие как кнопки подтверждения, отмены, выбора.

Основные принципы:

  • Используется внутри Dialog, AlertDialog, Popover, Menu.
  • Обеспечивает правильное управление фокусом и клавиатурной навигацией.
  • Может быть связано с функцией обратного вызова через onClick.

Пример использования:

<Dialog.Content>
  <Dialog.Title>Выход из аккаунта</Dialog.Title>
  <Dialog.Description>
    Вы уверены, что хотите выйти? Все несохранённые изменения будут потеряны.
  </Dialog.Description>
  <Dialog.Close asChild>
    <button>Отмена</button>
  </Dialog.Close>
  <Dialog.Action asChild>
    <button onCl ick={() => logoutUser()}>Выйти</button>
  </Dialog.Action>
</Dialog.Content>

Особенности:

  • Dialog.Action автоматически управляет поведением по закрытию диалога, если компонент используется внутри Dialog или AlertDialog.
  • Поддерживает asChild, позволяя использовать любой компонент или кнопку с сохранением доступности.

Взаимодействие Title, Description и Action

  • Title — определяет основной заголовок, понятный скринридерам.
  • Description — уточняет смысл заголовка или действия, улучшает восприятие контента.
  • Action — предоставляет возможность выполнить действие, связанное с контентом.

Использование этих компонентов совместно обеспечивает:

  1. Доступность (a11y): автоматическое управление атрибутами aria-labelledby и aria-describedby.
  2. Семантику интерфейса: каждый элемент имеет четкую функцию.
  3. Управление фокусом: Radix UI обрабатывает правильное переключение фокуса между интерактивными элементами.

Практические рекомендации

  • В диалогах всегда использовать Title и Description, чтобы скринридеры могли точно озвучить контент.
  • Action использовать для всех интерактивных кнопок, особенно если требуется автоматическое закрытие диалога после действия.
  • Применять asChild для интеграции с кастомными компонентами без потери доступности.
  • Стилизовать через классы или CSS-in-JS, но сохранять семантику и структуру DOM.

Title, Description и Action в Radix UI — это не просто визуальные элементы, а фундаментальные компоненты для создания доступных и управляемых интерфейсов, особенно в сложных интерактивных модулях. Они помогают структурировать контент, обеспечивают правильное поведение для ассистивных технологий и упрощают управление пользовательскими действиями.

Оглавление