Компонент NavigableContainer в WordPress используется для создания навигационных контейнеров, управляемых с помощью клавиатуры. Данный компонент позволяет пользователю перемещаться по элементам контейнера, используя клавиши стрелок или клавишу Tab. Существует две версии NavigableContainer: NavigableMenu и TabbableContainer, которые имеют свои особенности и набор параметров.
Описание параметров NavigableContainer
1. cycle
- Тип:
boolean - Описание: Определяет, должна ли навигация циклически переходить от конца списка к началу и обратно. Если включено, после достижения последнего элемента фокус возвращается на первый.
- По умолчанию:
true - Обязательный: Нет
2. eventToOffset
- Тип:
(event: KeyboardEvent) => -1 | 0 | 1 | undefined - Описание: Функция, специфичная для
TabbableContainer, позволяющая определять смещение, зависящее от события клавиатуры. Возвращаемое значение-1перемещает фокус к предыдущему элементу,1— к следующему,0оставляет фокус на текущем. - Обязательный: Нет
3. onKeyDown
- Тип:
(event: KeyboardEvent) => void - Описание: Колбэк, вызываемый при каждом нажатии клавиши. Этот параметр может быть использован для отслеживания нажатий на клавиши или для добавления дополнительных обработчиков событий.
- Обязательный: Нет
4. onNavigate
- Тип:
(index: number, focusable: HTMLElement) => void - Описание: Колбэк, вызываемый при навигации к одному из дочерних элементов. В параметры передаются индекс и элемент, к которому перемещен фокус.
- Обязательный: Нет
5. orientation
- Тип:
'vertical' | 'horizontal' | 'both' - Описание: Параметр, доступный только для
NavigableMenu. Задает направление навигации: по вертикали, по горизонтали или по обоим направлениям. - По умолчанию:
"vertical" - Обязательный: Нет
Компоненты NavigableMenu и TabbableContainer
NavigableMenu
Компонент NavigableMenu позволяет пользователю перемещаться по элементам с помощью стрелок. В зависимости от параметра orientation навигация может осуществляться только вверх и вниз (vertical), только влево и вправо (horizontal) или в обоих направлениях (both). Этот компонент автоматически добавляет роль menu, поэтому дочерние элементы должны иметь роли menuitem, menuitemradio или menuitemcheckbox, чтобы корректно отображаться.
Пример использования NavigableMenu:
import { NavigableMenu, Button } from '@wordpress/components';
function handleNavigate(index, target) {
console.log(`Перемещение к элементу ${index}`, target);
}
const CustomNavigableMenu = () => (
<div>
<h3>Меню навигации:</h3>
<NavigableMenu
onNavigate={handleNavigate}
orientation="horizontal"
cycle={true}
>
<Button variant="secondary" role="menuitem">Элемент 1</Button>
<Button variant="secondary" role="menuitem">Элемент 2</Button>
<Button variant="secondary" role="menuitem">Элемент 3</Button>
</NavigableMenu>
</div>
);
TabbableContainer
TabbableContainer позволяет навигацию по дочерним элементам с помощью клавиши Tab. Все элементы, которые должны участвовать в навигации, обязаны иметь tabIndex="0", чтобы стать «остановками» при табуляции.
Пример использования TabbableContainer:
import { TabbableContainer, Button } from '@wordpress/components';
function handleNavigate(index, target) {
console.log(`Фокус на секции ${index}`, target);
}
const CustomTabbableContainer = () => (
<div>
<h3>Табулируемый контейнер:</h3>
<TabbableContainer
onNavigate={handleNavigate}
cycle={false}
onKeyDown={(event) => console.log("Key down:", event)}
eventToOffset={(event) => {
if (event.key === 'ArrowRight') return 1;
if (event.key === 'ArrowLeft') return -1;
return 0;
}}
>
<Button variant="primary" tabIndex="0">Секция 1</Button>
<Button variant="primary" tabIndex="0">Секция 2</Button>
<Button variant="primary" tabIndex="0">Секция 3</Button>
<Button variant="primary" tabIndex="0">Секция 4</Button>
</TabbableContainer>
</div>
);
Пример интеграции NavigableMenu и TabbableContainer на одной странице
import { NavigableMenu, TabbableContainer, Button } from '@wordpress/components';
function onNavigateExample(index, focusableElement) {
console.log(`Фокус на элементе с индексом ${index}:`, focusableElement);
}
const MyNavigableExample = () => (
<div>
<h2>Демонстрация NavigableContainer</h2>
<div style={{ marginBottom: '20px' }}>
<h3>Горизонтальное меню навигации</h3>
<NavigableMenu
onNavigate={onNavigateExample}
orientation="horizontal"
cycle={true}
>
<Button variant="secondary" role="menuitem">Элемент A</Button>
<Button variant="secondary" role="menuitemradio">Элемент B</Button>
<Button variant="secondary" role="menuitemcheckbox">Элемент C</Button>
</NavigableMenu>
</div>
<div>
<h3>Контейнер с табуляцией</h3>
<TabbableContainer
onNavigate={onNavigateExample}
cycle={false}
eventToOffset={(event) => {
if (event.key === 'ArrowDown') return 1;
if (event.key === 'ArrowUp') return -1;
return 0;
}}
onKeyDown={(event) => console.log("Произошло нажатие клавиши:", event.key)}
>
<Button variant="primary" tabIndex="0">Раздел 1</Button>
<Button variant="primary" tabIndex="0">Раздел 2</Button>
<Button variant="primary" tabIndex="0">Раздел 3</Button>
<Button variant="primary" tabIndex="0">Раздел 4</Button>
</TabbableContainer>
</div>
</div>
);
export default MyNavigableExample;
Заключение
Компоненты NavigableMenu и TabbableContainer из NavigableContainer в WordPress предоставляют гибкие возможности навигации с использованием клавиатуры.