Тестирование доступности

Chakra UI — библиотека компонентов для React, ориентированная на создание интерфейсов с высокой доступностью (accessibility, a11y) из коробки. Каждый компонент построен с учетом стандартов WAI-ARIA, поддерживает клавиатурную навигацию и предоставляет семантические HTML-элементы. Тестирование доступности в Chakra UI предполагает как проверку встроенных возможностей компонентов, так и использование внешних инструментов и библиотек.

Проверка семантики и ARIA-атрибутов

Большинство компонентов Chakra UI автоматически добавляют корректные ARIA-атрибуты. Например, Modal управляет aria-modal, aria-labelledby и aria-describedby, а Tooltip добавляет role="tooltip" и связывает контент через aria-describedby.

Пример: проверка модального окна

import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from "@chakra-ui/react";

<Modal isOpen={isOpen} onCl ose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Заголовок модального окна</ModalHeader>
    <ModalBody>
      Контент модального окна
    </ModalBody>
    <ModalFooter>
      <Button onCl ick={onClose}>Закрыть</Button>
    </ModalFooter>
  </ModalContent>
</Modal>

При рендере ARIA-атрибуты устанавливаются автоматически, что обеспечивает корректное восприятие модального окна экранными читалками.

Использование инструментов для тестирования доступности

1. @testing-library/react с jest-axe

jest-axe интегрируется с @testing-library/react и позволяет обнаруживать ошибки доступности в компонентах Chakra UI.

import { render } from "@testing-library/react";
import { axe, toHaveNoViolations } from "jest-axe";
import { Button } from "@chakra-ui/react";

expect.extend(toHaveNoViolations);

test("кнопка Chakra UI не имеет проблем с доступностью", async () => {
  const { container } = render(<Button>Нажми меня</Button>);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Такой подход позволяет интегрировать проверку доступности непосредственно в unit-тесты.

2. Инструменты браузера

  • Lighthouse: встроен в Chrome DevTools, генерирует отчет о доступности всей страницы.
  • axe DevTools: расширение для браузера, которое детализирует проблемы и указывает на конкретные элементы.
  • Accessibility Insights: инструмент от Microsoft для анализа интерфейсов.

Использование этих инструментов совместно с Chakra UI помогает выявлять потенциальные нарушения, несмотря на встроенную поддержку ARIA.

Тестирование клавиатурной навигации

Chakra UI обеспечивает управление фокусом через компоненты FocusLock, Portal и контекст useFocusEffect. Важно проверять:

  1. Доступность всех интерактивных элементов с клавиатуры
  2. Логичный порядок табуляции
  3. Возврат фокуса после закрытия модальных окон или тултипов

Пример теста фокуса для модального окна:

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from "@chakra-ui/react";

test("фокус возвращается на кнопку после закрытия модального окна", async () => {
  const user = userEvent.setup();
  render(<App />); // App содержит кнопку, открывающую модальное окно

  const openButton = screen.getByText("Открыть модалку");
  await user.click(openButton);

  const closeButton = screen.getByText("Закрыть");
  await user.tab();
  expect(document.activeElement).toBe(closeButton);

  await user.click(closeButton);
  expect(document.activeElement).toBe(openButton);
});

Проверка контрастности и цветовой доступности

Chakra UI позволяет легко настраивать темы через объект theme, включая цвета текста, фона и интерактивных элементов. Для соответствия стандартам WCAG важно проверять контрастность:

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  colors: {
    brand: {
      500: "#1a202c", // темный оттенок
      100: "#f7fafc", // светлый фон
    },
  },
});

Использование контрастных цветов для текста и элементов управления обеспечивает читаемость интерфейса для пользователей с нарушениями зрения. Тестировать это можно через инструменты вроде axe DevTools или Contrast Checker.

Интеграция с Storybook

Chakra UI компоненты удобно тестировать в Storybook, подключив аддоны для доступности (@storybook/addon-a11y). Это позволяет:

  • Проверять ARIA-атрибуты в изоляции
  • Тестировать интерактивные состояния (hover, focus, active)
  • Выявлять проблемы до интеграции в приложение
export const PrimaryButton = () => <Button colorScheme="blue">Нажми меня</Button>;

PrimaryButton.parameters = {
  a11y: { element: '#root' }
};

Автоматизация тестирования

  • Unit-тесты с jest-axe проверяют отдельные компоненты
  • E2E-тесты с Cypress + cypress-axe позволяют симулировать пользовательские сценарии и выявлять нарушения доступности на уровне страниц
  • CI/CD интеграция с axe позволяет автоматически блокировать деплой при критических проблемах доступности

Особенности Chakra UI при тестировании доступности

  1. Focus Management — встроенная поддержка правильного фокуса в модальных окнах, аккордеонах и вкладках
  2. ARIA roles и свойства — большинство компонентов автоматически присваивают корректные role, aria-label, aria-describedby
  3. Темизация и контрастность — упрощенная настройка цветов для соблюдения стандартов WCAG
  4. Keyboard-first design — все интерактивные компоненты полностью управляются с клавиатуры

Эти особенности делают Chakra UI библиотекой с высокой встроенной доступностью, но требуют тестирования в конкретном контексте приложения для проверки интеграционных сценариев.

Оглавление