withSpokenMessages — это высокоуровневый компонент (Higher-Order Component) в WordPress, позволяющий добавить в компонент возможность произнесения сообщений с помощью функции speak. Этот компонент помогает улучшить доступность, обеспечивая звуковую обратную связь для пользователей.
Основные свойства и функции withSpokenMessages
При оборачивании компонента с помощью withSpokenMessages добавляются следующие функции:
- speak — позволяет произнести текст немедленно.
- debouncedSpeak — позволяет произнести текст с задержкой. Полезно для предотвращения произнесения сообщений при слишком частых событиях, например, при вводе текста.
Эти функции позволяют передавать текстовые сообщения, которые будут озвучены пользователю.
Шаг 1: Импорт необходимых компонентов
Для начала импортируем компонент withSpokenMessages и кнопку Button для управления.
import { withSpokenMessages, Button } from '@wordpress/components';
Шаг 2: Создаем компонент с использованием withSpokenMessages
В этом примере создадим компонент, который озвучивает два типа сообщений: одно мгновенно, а другое — с задержкой.
const MyComponentWithSpokenMessages = withSpokenMessages(({ speak, debouncedSpeak }) => (
<div>
<Button
variant="secondary"
onClick={() => speak('Это мгновенное сообщение')}
>
Произнести сообщение
</Button>
<Button
variant="secondary"
onClick={() => debouncedSpeak('Это отложенное сообщение')}
>
Произнести отложенное сообщение
</Button>
</div>
));
В этом примере:
- При нажатии на кнопку «Произнести сообщение» функция
speakсразу озвучивает текст «Это мгновенное сообщение». - При нажатии на кнопку «Произнести отложенное сообщение» функция
debouncedSpeakпроизносит текст с небольшой задержкой, что предотвращает излишние повторения при быстром нажатии.
Пример 2: Динамическое озвучивание сообщений на основе состояния
Можно добавить состояние в компонент и озвучивать его изменения для пользователя.
import { useState } from 'react';
const StatefulComponentWithSpokenMessages = withSpokenMessages(({ speak }) => {
const [count, setCount] = useState(0);
const incrementCount = () => {
const newCount = count + 1;
setCount(newCount);
speak(`Счетчик увеличен до ${newCount}`);
};
return (
<div>
<p>Текущий счетчик: {count}</p>
<Button
variant="secondary"
onClick={incrementCount}
>
Увеличить счетчик
</Button>
</div>
);
});
В этом примере:
- Каждое нажатие на кнопку увеличивает значение счетчика.
- Функция
speakозвучивает текущее значение счетчика, сообщая пользователю о его изменении.
Пример 3: Использование debouncedSpeak для произнесения динамических сообщений
Здесь мы добавим компонент с вводом текста, в котором debouncedSpeak будет использоваться для озвучивания изменяющегося текста с задержкой, чтобы избегать озвучивания каждого ввода символа.
import { useState } from 'react';
import { TextControl } from '@wordpress/components';
const InputWithDebouncedSpeech = withSpokenMessages(({ debouncedSpeak }) => {
const [text, setText] = useState('');
const handleChange = (value) => {
setText(value);
debouncedSpeak(`Вы ввели: ${value}`);
};
return (
<div>
<TextControl
label="Введите текст"
value={text}
onChange={handleChange}
/>
</div>
);
});
В этом примере:
- Пользователь вводит текст, и функция
debouncedSpeakпроизносит текст с задержкой. - Это удобно, чтобы не отвлекать пользователя слишком частым озвучиванием, особенно при быстром вводе текста.
Заключение
withSpokenMessages — полезный компонент для повышения доступности. Он позволяет добавлять в интерфейс озвучивание сообщений, делая его удобнее для людей с особыми потребностями, особенно в компонентах, где требуется звуковая обратная связь.