Tappable

Базовый компонент для создания интерактивных элементов, который автоматически адаптирует семантику и поведение под контекст. Обрабатывает состояния наведения, нажатия и фокуса, обеспечивая:

визуальную обратную связь через фоновые эффекты;
ripple-эффект на Android;
автоматическую установку cursor: pointer;
основу для интерактивных компонентов вроде Button, Cell, ActionSheetItem;

Загружается...

Логика выбора элемента

Компонент динамически выбирает HTML-тег на основе переданных свойств:

Условия	Тег	Роль/Атрибуты	Особенности
Передан `Component`	Кастомный	Наследует переданные свойства	Требует ручной настройки a11y
Указан `href`	`<a>`	`role="link"` при `disabled`	Блокировка через `aria-disabled`
Указан `onClick`	`<div>`	`role="button" tabIndex="0"`	Обработка клавиш Space/Enter
Без `href`/`onClick`	`<div>`	-	Неинтерактивный контейнер

Особенности состояний

Наведение

Свойство hasHover включает/выключает реакцию на наведение.
Свойство hovered включает состояние наведения.
Свойство hoverMode позволяет стилизовать состояние. Если передать произвольную строку, она добавится как css-класс во время наведения.

Нажатие

Задается свойством active:

Свойство hasActive включает/выключает реакцию на нажатие.
Свойство activated включает состояния нажатия.
Свойство activeMode/activeClassName позволяет стилизовать состояние. Если передать произвольную строку, она добавится как css-класс во время нажатия.
Свойство activeEffectDelay отвечает за длительность подсветки (в миллисекундах).

Focus (фокус)

Свойство focusVisibleMode позволяет стилизовать стиль состояния фокуса. Если передать произвольную строку, она добавится как css-класс при :focus-visible

Скругление углов

Задается свойством borderRadiusMode:

auto — адаптивный режим (нет скруглений на мобильных);
inherit — наследование стилей.

Взаимодействие с дочерними элементами

Групповая подсветка

// Родитель сохраняет hover при наведении на детей
<Tappable hasHoverWithChildren>
  <IconButton />
  <IconButton />
</Tappable>

Проброс состояния

// Дочерний элемент активирует hover родителя
<Tappable>
  <IconButton unlockParentHover />
</Tappable>

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

Автоматическая семантика

Компонент сам выбирает подходящий HTML-тег:
- <a> при передаче href;
- <div role="button"> при наличии onClick;
- в остальных случаях <div>.
Блокировка элементов

При disabled:
- Для ссылок: aria-disabled="true" + удаление href
- Для кнопок: aria-disabled="true" + tabIndex="-1"
Клавиатурные события

Кнопки (role="button") обрабатывают:
- Нажатие клавиш Space/Enter
- Фокус через клавишу Tab

Критические правила

Иконки без текста

Всегда добавляйте текстовую метку:

// Плохо
<Tappable><Icon16Close /></Tappable>
 
// Хорошо
<Tappable aria-label="Закрыть">
  <Icon16Close />
</Tappable>

Смешение href и onClick

Избегайте комбинации — это нарушает семантику:

// Антипаттерн
<Tappable href="/page" onClick={handleClick} />
 
// Правильно
<Tappable href="/page">Ссылка</Tappable>
<Tappable onClick={handleClick}>Кнопка</Tappable>

Кастомные элементы

Для нестандартных тегов явно укажите:
```
<Tappable Component="span" role="button" tabIndex={0} aria-label="Действие" />
```

Визуальный фокус

Используйте focusVisibleMode для кастомизации.
Не переопределяйте :focus-visible без веской причины.

Свойства и методы

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `background`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`borderRadiusMode`	`"auto" \| "inherit"` Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. По умолчанию: `auto`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`DefaultComponent`	`ElementType<any, keyof IntrinsicElements>` Компонент который будет при передаче `onClick`. По умолчанию `"div"`. По умолчанию: `-`
`focusVisibleMode`	`FocusVisibleMode` Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`hasActive`	`boolean` Указывает, должен ли компонент реагировать на `active`-состояние. По умолчанию: `-`
`hasHover`	`boolean` Указывает, должен ли компонент реагировать на `hover`-состояние. По умолчанию: `-`
`hasHoverWithChildren`	`boolean` Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается. Присваивается родителькому компоненту. По умолчанию: `-`
`hoverClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`. По умолчанию: `-`
`hovered`	`boolean` Позволяет управлять `hovered`-состоянием извне. По умолчанию: `-`
`hoverMode`	`StateModeLiteral` Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. По умолчанию: `background`
`unlockParentHover`	`boolean` Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

SelectionControl

Touch