Компонент withConstrainedTabbing — это высокоуровневый компонент (Higher-Order Component, HOC) в React, который добавляет возможность ограничивать навигацию по клавише Tab внутри определенного компонента. Это полезно для интерфейсных элементов, таких как модальные окна, где необходимо, чтобы пользователь мог перемещаться только внутри данного компонента, не выходя за его пределы.
Важно: Компонент
withConstrainedTabbingдолжен использоваться в компонентах, где предусмотрен способ закрытия или выхода, например, через нажатие клавиши Escape или при помощи кнопки «Закрыть».
Основы использования withConstrainedTabbing
Чтобы ограничить навигацию по клавише Tab, withConstrainedTabbing оборачивает исходный компонент, предотвращая фокусировку на элементах вне области этого компонента. В следующем примере продемонстрировано, как включить и отключить ограничение табуляции с помощью кнопки.
Пример реализации withConstrainedTabbing
Рассмотрим, как создать компонент, в котором можно включать и отключать ограничение табуляции. В этом примере компонент использует withConstrainedTabbing для создания формы, внутри которой фокусировка будет ограничена.
import { useState } from 'react';
import { withConstrainedTabbing, TextControl, Button } from '@wordpress/components';
const ConstrainedTabbing = withConstrainedTabbing(({ children }) => children);
const MyComponentWithConstrainedTabbing = () => {
const [isConstrainedTabbing, setIsConstrainedTabbing] = useState(false);
let form = (
<form>
<TextControl label="Поле ввода 1" onChange={() => {}} />
<TextControl label="Поле ввода 2" onChange={() => {}} />
</form>
);
if (isConstrainedTabbing) {
form = <ConstrainedTabbing>{form}</ConstrainedTabbing>;
}
const toggleConstrain = () => {
setIsConstrainedTabbing((state) => !state);
};
return (
<div>
{form}
<Button variant="secondary" onClick={toggleConstrain}>
{isConstrainedTabbing ? 'Отключить' : 'Включить'} ограничение табуляции
</Button>
</div>
);
};
Параметры и настройки withConstrainedTabbing
В компоненте withConstrainedTabbing нет сложных параметров — он лишь оборачивает дочерние элементы, чтобы ограничить их фокусировку. Однако рассмотрим ключевые моменты реализации этого ограничения:
- Управление состоянием: Переменная
isConstrainedTabbingхранит состояние, ограничена ли табуляция. Это состояние можно изменять с помощью функцииtoggleConstrain. - Использование
withConstrainedTabbingдля дочерних элементов: Когда ограничение активно, содержимое оборачивается компонентомConstrainedTabbing, что предотвращает фокусировку на элементах вне этой области.
Пример с модальным окном
Одним из частых применений withConstrainedTabbing является модальное окно, где пользователи должны оставаться в рамках окна до его закрытия. В этом примере показано, как создать простое модальное окно с ограничением табуляции и кнопкой для его закрытия.
import { useState } from 'react';
import { withConstrainedTabbing, TextControl, Button } from '@wordpress/components';
const ConstrainedTabbing = withConstrainedTabbing(({ children }) => children);
const ModalWithConstrainedTabbing = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);
return (
<div>
<Button onClick={openModal}>Открыть модальное окно</Button>
{isModalOpen && (
<div role="dialog" aria-modal="true" className="modal">
<ConstrainedTabbing>
<h2>Модальное окно</h2>
<TextControl label="Поле ввода внутри модального окна" onChange={() => {}} />
<Button onClick={closeModal}>Закрыть</Button>
</ConstrainedTabbing>
</div>
)}
</div>
);
};
Ключевые моменты реализации в модальном окне
- Роль
dialog: Атрибутrole="dialog"указывает на то, что данный элемент является диалоговым окном. Это улучшает доступность для пользователей экранных читалок. - Атрибут
aria-modal="true": Гарантирует, что фокусировка останется в модальном окне до его закрытия. - Компонент
ConstrainedTabbingдля ограничения фокусировки: Ограничивает фокусировку на элементах внутри модального окна, пока окно активно.
Ограничение табуляции в боковой панели
Еще один сценарий для withConstrainedTabbing — боковая панель с ограниченной навигацией. Этот метод помогает пользователю сосредоточиться на элементах в боковой панели, предотвращая случайную фокусировку на основной части контента.
const SidebarWithConstrainedTabbing = () => {
const [isSidebarActive, setIsSidebarActive] = useState(false);
const toggleSidebar = () => setIsSidebarActive((state) => !state);
return (
<div>
<Button onClick={toggleSidebar}>Переключить боковую панель</Button>
{isSidebarActive && (
<ConstrainedTabbing>
<aside className="sidebar" role="complementary">
<h2>Боковая панель</h2>
<TextControl label="Фильтр" onChange={() => {}} />
<Button onClick={toggleSidebar}>Закрыть боковую панель</Button>
</aside>
</ConstrainedTabbing>
)}
</div>
);
};
Рекомендации по применению
- Не забывайте о доступности: Всегда включайте методы для выхода из ограниченной области. Использование кнопок закрытия или Escape для модальных окон и боковых панелей — хороший способ улучшить доступность.
- Сфокусируйтесь на нужных областях: Применяйте ограничение табуляции только в тех компонентах, где важно сосредоточить пользователя, например, в диалогах, модальных окнах, или при сложных пользовательских взаимодействиях.
- Соблюдайте модерацию: Не злоупотребляйте
withConstrainedTabbingдля интерфейсов, где пользователи ожидают свободную навигацию.
Заключение
Компонент withConstrainedTabbing — полезный инструмент для создания доступных интерфейсов в WordPress, позволяющий управлять навигацией в сложных компонентах, таких как модальные окна и боковые панели. Его применение повышает удобство использования для всех пользователей, особенно для тех, кто полагается на клавиатуру или вспомогательные технологии.