TabbableContainer — это компонент обертки WordPress с поддержкой React, который позволяет пользователям навигировать с помощью клавиши TAB между его дочерними элементами. Это инструментарий для создания удобных и доступных интерфейсов, когда требуется интуитивная клавиатурная навигация.
Компонент TabbableContainer предназначен для улучшения доступности элементов интерфейса. Он определяет порядок фокусировки элементов при нажатии клавиши TAB и перехватывает событие, позволяя разработчику принимать решения, какие элементы должны фокусироваться.
Давайте рассмотрим, как можно использовать TabbableContainer в вашем проекте:
import { TabbableContainer } from '@wordpress/components';
function CustomNav() {
return (
<TabbableContainer onNavigate={(e) => console.log('Keyboard event:', e)}>
<div>Навигация 1</div>
<div>Навигация 2</div>
<div>Навигация 3</div>
<button>Кнопка</button>
</TabbableContainer>
);
}
В примере выше TabbableContainer оборачивает несколько div элементов и button, делая их фокусируемыми. Функция onNavigate перехватывает события навигации и выводит базовый лог в консоль.
Интеграция с другими компонентами
TabbableContainer легко интегрируется с другими компонентами React. Рассмотрим пример, где TabbableContainer объединен с другими элементами интерфейса, такими как TextControl и Button из WordPress компонентов.
import { TabbableContainer, TextControl, Button } from '@wordpress/components';
function MyForm() {
return (
<TabbableContainer>
<TextControl label="Введите текст" />
<TextControl label="Повторите текст" />
<Button isPrimary>Отправить</Button>
</TabbableContainer>
);
}
В этом примере внутри TabbableContainer используются компоненты TextControl для ввода текста и Button для отправки формы. Пользователи могут переключаться между ними с помощью клавиши TAB.
События и обратные вызовы
Одним из ключевых элементов TabbableContainer является его способность реагировать на события клавиатуры. Вы можете использовать проп onNavigate для выполнения определенных действий при переходе между дочерними элементами.
function handleKeyboardEvent(event) {
if (event.key === 'Enter') {
alert('Вы нажали Enter!');
}
}
<TabbableContainer onNavigate={handleKeyboardEvent}>
<div>Элемент 1</div>
<div>Элемент 2</div>
</TabbableContainer>
Также, как и в этом примере, обработчик событий может выполнить действие, если пользователь нажал определенную клавишу, используя параметр события event.
Заключение
Компонент TabbableContainer — мощное средство для создания более доступных интерфейсов в WordPress с использованием React. Он позволяет легко улучшать навигацию, повышая удобство использования для всех категорий пользователей.
