Компонент withFocusReturn — это высокоуровневый компонент (Higher-Order Component) в WordPress, который позволяет автоматически возвращать фокус к элементу, вызвавшему появление временного UI-компонента (например, модального окна или выпадающего меню) после его скрытия. Это особенно удобно для повышения удобства использования и доступности интерфейсов, так как пользователю не нужно вручную восстанавливать фокус.
Основные особенности withFocusReturn
Этот компонент можно использовать для оборачивания любого UI-компонента, который будет временно присутствовать на странице. При его размонтировании (удалении из DOM) фокус автоматически вернется к элементу, с которого он был изначально переключен.
Пример 1: Автоматическое восстановление фокуса после закрытия модального окна
В данном примере создадим компонент, который откроет текстовое поле при наборе текста, а также кнопку для скрытия этого поля. После закрытия фокус вернется к исходному полю ввода.
Шаг 1: Импорт необходимых компонентов
import { useState } from 'react';
import { withFocusReturn, TextControl, Button } from '@wordpress/components';
Шаг 2: Создаем компонент с восстановлением фокуса
Оборачиваем текстовое поле компонентом withFocusReturn, чтобы фокус автоматически возвращался к предыдущему элементу после его закрытия.
const EnhancedInputWithFocusReturn = withFocusReturn(() => (
<div>
<p>Фокус вернется к предыдущему полю при закрытии этого компонента.</p>
<TextControl autoFocus={true} placeholder="Введите текст" />
</div>
));
Шаг 3: Управляем отображением и скрытием компонента с помощью основного компонента
В основном компоненте будет отображаться текстовое поле и кнопка для удаления временного элемента.
const MyComponentWithFocusReturn = () => {
const [text, setText] = useState('');
const hideInputField = () => setText('');
return (
<div>
<TextControl
placeholder="Введите что-нибудь"
value={text}
onChange={(value) => setText(value)}
/>
{text && <EnhancedInputWithFocusReturn />}
{text && (
<Button variant="secondary" onClick={hideInputField}>
Скрыть
</Button>
)}
</div>
);
};
Пример 2: Использование параметра onFocusReturn для настройки поведения
Вы можете настроить поведение восстановления фокуса, передав параметр onFocusReturn в withFocusReturn. Этот параметр позволяет указать, к какому элементу следует возвращать фокус при скрытии компонента.
Шаг 1: Создаем компонент с пользовательской логикой восстановления фокуса
В этом примере фокус при скрытии временного элемента будет перенаправлен к другому элементу, указанному через onFocusReturn.
function MyCustomComponent() {
return <textarea placeholder="Это другое текстовое поле" />;
}
const EnhancedComponentWithCustomFocusReturn = withFocusReturn({
onFocusReturn() {
const targetElement = document.getElementById('target-input');
if (targetElement) {
targetElement.focus();
}
return false; // Возвращаем false, чтобы отключить стандартное поведение
},
})(MyCustomComponent);
Шаг 2: Используем компонент с пользовательской настройкой восстановления фокуса
function App() {
return (
<div>
<TextControl id="target-input" placeholder="Целевой элемент для восстановления фокуса" />
<EnhancedComponentWithCustomFocusReturn />
</div>
);
}
В этом примере фокус будет перенесен на элемент с ID target-input при скрытии компонента.
Параметры withFocusReturn
withFocusReturn принимает объект с опциями, позволяя разработчику настраивать поведение восстановления фокуса. На данный момент поддерживается следующий параметр:
- onFocusReturn (опционально): функция, которая позволяет настроить логику восстановления фокуса. Возвращаемое значение
falseотключает стандартное поведение восстановления фокуса. Эта функция дает возможность разработчику указать любой элемент для фокусировки при удалении временного элемента.
Пример 3: Применение onFocusReturn для переключения фокуса на другую кнопку
В этом примере фокус будет возвращен к другой кнопке, когда временный компонент будет удален.
import { withFocusReturn, Button } from '@wordpress/components';
import React from 'react';
function TempComponent() {
return <p>Это временный компонент</p>;
}
const EnhancedTempComponent = withFocusReturn({
onFocusReturn() {
const buttonToFocus = document.getElementById('return-focus-button');
if (buttonToFocus) {
buttonToFocus.focus();
}
return false;
},
})(TempComponent);
function App() {
const [showTempComponent, setShowTempComponent] = React.useState(false);
const toggleTempComponent = () => setShowTempComponent(!showTempComponent);
return (
<div>
<Button onClick={toggleTempComponent}>
Показать временный компонент
</Button>
{showTempComponent && <EnhancedTempComponent />}
<Button id="return-focus-button">
Кнопка для возвращения фокуса
</Button>
</div>
);
}
Заключение
withFocusReturn в WordPress — полезный компонент для улучшения доступности, позволяющий пользователю автоматически возвращаться к предыдущему элементу после закрытия временного UI-компонента. Использование опции onFocusReturn позволяет гибко управлять фокусом и применять компонент в различных сценариях, таких как модальные окна, выпадающие списки и прочие временные элементы интерфейса.