DismissButton для скринридеров

DismissButton — это специализированный компонент из библиотеки React Aria, предназначенный для обеспечения доступности интерактивных элементов, которые можно закрыть или скрыть. Он особенно актуален для модальных окон, уведомлений, всплывающих панелей и других компонентов интерфейса, где важно обеспечить корректное взаимодействие для пользователей со скринридерами.

Основная концепция

Компонент DismissButton не отображается визуально в интерфейсе. Его основная задача — предоставить пользователю возможность закрыть текущий контекст с помощью клавиатуры и вспомогательных технологий.

Ключевые принципы:

  • Невидимость на экране, но доступность для скринридеров.
  • События закрытия интегрируются с существующей логикой компонентов (например, закрытие модального окна через onClose).
  • Фокусируемость: элемент можно достичь с клавиатуры, даже если он не виден визуально.

Использование DismissButton

Импорт компонента производится из @react-aria/overlays:

import { DismissButton } from '@react-aria/overlays';

Простейший пример интеграции в модальный компонент:

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div role="dialog" aria-modal="true" className="modal">
      <DismissButton onDism iss={onClose} />
      {children}
      <DismissButton onDism iss={onClose} />
    </div>
  );
}

Здесь DismissButton размещён в начале и конце модального окна, что обеспечивает:

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

Свойства компонента

DismissButton поддерживает несколько ключевых свойств:

Свойство Тип Описание
onDismiss (event: Event) => void Функция, вызываемая при попытке закрытия компонента.
children ReactNode Опционально, редко используется, так как элемент обычно невидим.
ref RefObject<HTMLElement> Позволяет управлять фокусом или ссылаться на DOM-элемент.

Основное свойство — onDismiss. Его реализация должна обеспечивать корректное обновление состояния родительского компонента, например, скрытие модального окна или панели уведомлений.

Особенности взаимодействия со скринридерами

DismissButton предназначен для улучшения доступности:

  • Скринридеры воспринимают его как элемент, который можно “закрыть”.
  • Позволяет пользователю перемещаться по интерактивной области и завершать её корректно.
  • Работает с role="dialog" и другими семантическими контейнерами, где нужно управлять фокусом.

Важно помнить: даже если элемент невидим, он должен быть логически присутствующим в DOM, чтобы вспомогательные технологии могли с ним взаимодействовать.

Практические рекомендации

  1. Размещать в начале и конце контейнера, чтобы обеспечить доступ к функции закрытия с любого конца интерактивного блока.
  2. Использовать с onDismiss, который корректно обновляет состояние компонента.
  3. Не дублировать визуальные кнопки закрытия, если уже есть видимый элемент с аналогичной функцией — DismissButton служит именно для скринридеров и клавиатурной навигации.
  4. Комбинировать с Overlay и Modal компонентах библиотеки React Aria для полного контроля фокуса и управления доступностью.

Пример с Overlay

import { Overlay, DismissButton } from '@react-aria/overlays';

function Tooltip({ isOpen, onClose, children }) {
  return (
    <Overlay>
      {isOpen && (
        <div role="tooltip" className="tooltip">
          <DismissButton onDism iss={onClose} />
          {children}
          <DismissButton onDism iss={onClose} />
        </div>
      )}
    </Overlay>
  );
}

Такое использование обеспечивает:

  • Корректное завершение диалогового контекста для пользователей со скринридерами.
  • Поддержку клавиатурной навигации через Tab и Shift+Tab.
  • Интеграцию с другими компонентами библиотеки, такими как FocusScope и Modal.

Итоговая роль DismissButton

DismissButton — инструмент обеспечения доступности и предсказуемости пользовательского интерфейса для людей с ограниченными возможностями. Он позволяет:

  • Завершать интерактивные контексты без визуального вмешательства.
  • Поддерживать логическую структуру диалогов и уведомлений.
  • Интегрироваться с другими элементами React Aria для управления фокусом и поведением оверлеев.

Использование DismissButton является лучшей практикой для модальных окон, уведомлений и всплывающих компонентов, когда важно обеспечить полную доступность интерфейса.

Оглавление