Ориентация табов

В библиотеке React Aria ориентация табов задаёт направление, в котором элементы вкладок (tabs) располагаются и реагируют на клавиатурные события. Ориентация влияет на поведение клавиш навигации: стрелок, Home, End и взаимодействие с фокусом.

React Aria предоставляет TabList и Tab через хуки useTabList и useTab. Эти хуки позволяют управлять состоянием вкладок, их доступностью и ориентацией, обеспечивая полную поддержку ARIA.

Задание ориентации

Ориентация задаётся свойством orientation, которое может принимать два значения:

  • horizontal – вкладки располагаются по горизонтали. Навигация:

    • ArrowRight – переход к следующей вкладке
    • ArrowLeft – переход к предыдущей вкладке

  • vertical – вкладки располагаются вертикально. Навигация:

    • ArrowDown – переход к следующей вкладке
    • ArrowUp – переход к предыдущей вкладке

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

import { useTabList, useTab } from '@react-aria/tabs';
import { useTabListState } from '@react-stately/tabs';
import React from 'react';

function TabsExample() {
  const tabs = [
    { name: 'Home', id: 'home' },
    { name: 'Profile', id: 'profile' },
    { name: 'Settings', id: 'settings' }
  ];

  const state = useTabListState({ items: tabs });

  const { tabListProps } = useTabList({ orientation: 'vertical' }, state);

  return (
    <div {...tabListProps} role="tablist">
      {tabs.map((tab) => {
        const { tabProps } = useTab({ key: tab.id }, state);
        return (
          <button {...tabProps} key={tab.id}>
            {tab.name}
          </button>
        );
      })}
    </div>
  );
}

В этом примере вкладки будут ориентированы вертикально, и стрелки ArrowUp и ArrowDown будут переключать активную вкладку.

Взаимодействие с фокусом

React Aria автоматически управляет фокусом при навигации между вкладками. Для горизонтальной ориентации:

  • При нажатии ArrowRight фокус перемещается на следующую вкладку.
  • При нажатии ArrowLeft – на предыдущую.
  • Home – фокус на первой вкладке.
  • End – фокус на последней вкладке.

Для вертикальной ориентации используются ArrowDown и ArrowUp вместо горизонтальных стрелок.

Важно, что фокус перемещается только по включенным вкладкам, пропуская отключённые (disabled) элементы.

Состояние и ориентация

Ориентация тесно связана с состоянием вкладок, управляемым через useTabListState. Например, при динамическом добавлении или удалении вкладок библиотека корректно обновляет фокус и поддерживает правильный порядок навигации:

const state = useTabListState({ items: dynamicTabs });

Здесь dynamicTabs может изменяться в зависимости от пользовательского взаимодействия, а ориентация, переданная в useTabList, автоматически применяется ко всем новым вкладкам.

Комбинирование с CSS

Для визуального отражения ориентации важно корректно использовать CSS:

  • Горизонтальная ориентация: display: flex; flex-direction: row;
  • Вертикальная ориентация: display: flex; flex-direction: column;

Это обеспечивает согласованность между визуальным расположением и логикой навигации клавиатурой.

.tablist-horizontal {
  display: flex;
  flex-direction: row;
}

.tablist-vertical {
  display: flex;
  flex-direction: column;
}

Динамическая смена ориентации

React Aria позволяет менять ориентацию на лету, передавая новое значение в хук useTabList. Это полезно для адаптивных интерфейсов:

const isMobile = window.innerWidth < 600;
const { tabListProps } = useTabList({ orientation: isMobile ? 'vertical' : 'horizontal' }, state);

В данном случае на мобильных устройствах вкладки будут вертикальными, а на десктопе – горизонтальными, без потери управления клавиатурой.

Особенности работы с вложенными вкладками

При использовании вложенных табов ориентация каждой группы задаётся отдельно. Вложенные горизонтальные табы внутри вертикальных не конфликтуют: фокус и навигация управляются локально через соответствующий useTabList. Главное – правильно указывать уникальные ключи (key) для каждой вкладки и передавать правильное состояние для каждой группы.

Полезные практики

  • Всегда указывайте orientation, даже если по умолчанию горизонтальная. Это делает код явным и понятным.
  • При динамическом изменении вкладок обновляйте состояние через useTabListState.
  • Используйте CSS-классы, соответствующие ориентации, для согласованности визуальной и функциональной структуры.
  • Не смешивайте горизонтальные и вертикальные клавиши в одной группе вкладок.

Ориентация вкладок в React Aria обеспечивает правильную поддержку ARIA, согласованную навигацию клавиатурой и предсказуемое поведение фокуса, что делает интерфейсы доступными и удобными для всех пользователей.

Оглавление