Фокусировка элементов

Библиотека iziToast предоставляет гибкий и удобный способ отображения уведомлений в веб-приложениях. Она позволяет создавать всплывающие сообщения различного типа: информационные, успешные, предупреждения и ошибки. Уведомления могут автоматически исчезать через заданное время, быть закреплёнными на странице и иметь настраиваемое поведение при взаимодействии пользователя.

Создание базового уведомления

Для создания простого уведомления используется метод iziToast.show() или сокращённые методы iziToast.success(), iziToast.error(), iziToast.info(), iziToast.warning(). Основные параметры:

iziToast.show({
    title: 'Успех',
    message: 'Операция выполнена успешно',
    position: 'topRight',
    timeout: 5000,
});
  • title – заголовок уведомления.
  • message – основной текст.
  • position – положение уведомления на экране (topRight, topLeft, bottomRight, bottomLeft, center).
  • timeout – время отображения в миллисекундах; если указано false, уведомление будет закреплено до закрытия пользователем.

Фокусировка элементов

Одной из ключевых особенностей iziToast является возможность управлять фокусом на уведомлении. Это позволяет пользователю взаимодействовать с элементами уведомления через клавиатуру или направлять внимание на конкретное сообщение при множественных уведомлениях на странице.

Автоматическая фокусировка

По умолчанию уведомление не получает фокус. Для его активации используется параметр:

iziToast.show({
    title: 'Внимание',
    message: 'Проверьте введённые данные',
    focus: true
});
  • focus: true – автоматически ставит фокус на уведомление при его появлении.
  • Уведомление становится активным элементом для клавиатуры (например, стрелки, Enter).

Управление последовательностью фокуса

При появлении нескольких уведомлений можно задавать очередность фокуса с помощью метода iziToast.show() и параметра onOpening:

iziToast.show({
    title: 'Первое уведомление',
    message: 'Это первое сообщение',
    onOpening: function(instance, toast){
        toast.querySelector('button').focus();
    }
});

iziToast.show({
    title: 'Второе уведомление',
    message: 'Это второе сообщение',
    onOpening: function(instance, toast){
        toast.querySelector('button').focus();
    }
});
  • onOpening – событие, вызываемое при анимации появления уведомления.
  • Позволяет устанавливать фокус на определённые интерактивные элементы внутри уведомления (кнопки, ссылки).

Фокус на кнопках

Уведомления могут содержать интерактивные кнопки:

iziToast.show({
    title: 'Подтверждение',
    message: 'Вы уверены?',
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            instance.hide({transitionOut: 'fadeOut'});
        }],
        ['<button>Нет</button>', function (instance, toast) {
            instance.hide({transitionOut: 'fadeOut'});
        }]
    ],
    focus: true
});
  • Кнопки создаются массивом, где каждый элемент – массив с HTML-кнопкой и колбэком.
  • Фокус автоматически устанавливается на первую кнопку при открытии уведомления.
  • Это повышает доступность и позволяет управлять уведомлением с клавиатуры без мыши.

Навигация по уведомлениям с клавиатуры

iziToast поддерживает клавиатурную навигацию:

  • Tab – переход между кнопками внутри уведомления.
  • Enter – активирует выделенную кнопку.
  • Esc – закрывает уведомление.

Для управления этим используется параметр focus и события onOpening/onClosed. Пример установки фокуса на последний элемент:

iziToast.show({
    title: 'Фокус на последнем',
    message: 'Навигация клавиатурой',
    buttons: [
        ['<button>Пропустить</button>', function(instance, toast){ instance.hide(); }],
        ['<button>Далее</button>', function(instance, toast){ instance.hide(); }]
    ],
    onOpening: function(instance, toast){
        const buttons = toast.querySelectorAll('button');
        buttons[buttons.length - 1].focus();
    }
});

Дополнительные методы управления фокусом

  • instance.focus() – программная установка фокуса на уведомление.
  • instance.hide() – скрытие уведомления; фокус автоматически возвращается к предыдущему элементу страницы, если уведомление было в фокусе.
  • focusInput – для уведомлений с полями ввода, позволяет устанавливать фокус на текстовое поле внутри toast.
iziToast.show({
    title: 'Ввод данных',
    message: 'Введите ваш email',
    inputs: [
        ['<input type="email" placeholder="Email">', function (instance, toast, input, e) {
            console.log(input.value);
        }]
    ],
    focus: true
});

Параметры доступности и фокусировки

  • aria-live – уведомления используют aria-live="polite" или assertive для оповещения скринридеров.
  • tabindex – каждый toast получает tabindex для возможности фокусировки.
  • focus – основное средство управления фокусом при появлении.

Эти параметры делают iziToast совместимым с требованиями доступности (WCAG), позволяя создавать интерфейсы, удобные для пользователей с клавиатурной навигацией или вспомогательными технологиями.

Итоговая структура фокусируемого уведомления

  1. Создание уведомления с параметром focus: true.
  2. Использование onOpening для точной установки фокуса на кнопку или input.
  3. Поддержка клавиатурной навигации внутри toast.
  4. Автоматическое возвращение фокуса на предыдущий элемент при закрытии.

Такой подход обеспечивает максимально гибкое управление вниманием пользователя и повышает интерактивность интерфейса.

Оглавление