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

Stimulus — легковесный JavaScript-фреймворк, ориентированный на улучшение HTML-структуры с минимальным вмешательством в DOM. Тестирование доступности в контексте Stimulus сосредоточено на проверке корректной работы интерактивных элементов, управления состояниями и соответствия стандартам ARIA.

Подключение тестовой среды

Для тестирования компонентов Stimulus удобно использовать сочетание Jest и Testing Library. Основная цель — изолированная проверка контроллеров без необходимости запуска полноценного браузера.

Пример установки:

npm install --save-dev jest @testing-library/dom @testing-library/jest-dom

И подключение к проекту:

import { fireEvent, getByText, screen } from '@testing-library/dom';
import '@testing-library/jest-dom';
import { Application } from '@hotwired/stimulus';
import ExampleController from './controllers/example_controller';

Инициализация Stimulus для тестов

Stimulus-контроллеры необходимо инициализировать в DOM-тестах, чтобы проверить реакции на пользовательские события.

document.body.innerHTML = `
  <div data-controller="example">
    <button data-action="click->example#toggle">Toggle</button>
    <div data-example-target="panel" hidden>Content</div>
  </div>
`;

const application = Application.start();
application.register("example", ExampleController);

Проверка интерактивных элементов

Ключевой аспект доступности — возможность управлять элементами с клавиатуры и корректное обновление ARIA-атрибутов.

Пример теста кнопки, открывающей панель:

test('панель открывается и закрывается с клавиатуры', () => {
  const button = screen.getByText('Toggle');
  const panel = screen.getByText('Content');

  expect(panel).toHaveAttribute('hidden');

  fireEvent.click(button);
  expect(panel).not.toHaveAttribute('hidden');
  expect(button).toHaveAttribute('aria-expanded', 'true');

  fireEvent.click(button);
  expect(panel).toHaveAttribute('hidden');
  expect(button).toHaveAttribute('aria-expanded', 'false');
});

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

Stimulus активно используется для управления состояниями видимости и динамических интерфейсных компонентов. Корректное использование ARIA-атрибутов — основное требование доступности:

  • aria-expanded для раскрывающихся элементов
  • aria-hidden для скрытых панелей
  • aria-controls для связывания кнопок с элементами

Пример автоматической проверки ARIA:

test('кнопка имеет корректные ARIA-атрибуты', () => {
  const button = screen.getByText('Toggle');
  expect(button).toHaveAttribute('aria-expanded', 'false');
  expect(button).toHaveAttribute('aria-controls', 'panel');
});

Навигация с клавиатуры

Тестирование доступности включает проверку навигации с клавиатуры:

  • Табуляция между интерактивными элементами
  • Активирование элементов через клавиши Enter и Space
  • Поддержка фокуса и управления фокусом

Пример имитации клавиши:

fireEvent.keyDown(button, { key: 'Enter', code: 'Enter', charCode: 13 });
expect(panel).not.toHaveAttribute('hidden');

Автоматические линтеры доступности

Для Stimulus можно интегрировать axe-core или eslint-plugin-jsx-a11y, что позволяет проверять компоненты на раннем этапе разработки.

import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('компонент не содержит нарушений доступности', async () => {
  const results = await axe(document.body);
  expect(results).toHaveNoViolations();
});

Тестирование динамического контента

Stimulus часто управляет элементами, создаваемыми или изменяемыми в DOM. Важно проверять:

  • Добавление новых интерактивных элементов
  • Обновление состояний ARIA
  • Сохранение доступности после динамических изменений

Пример теста:

test('новая кнопка доступна после рендера', () => {
  const container = screen.getByTestId('dynamic-container');
  const newButton = document.createElement('button');
  newButton.textContent = 'New';
  newButton.setAttribute('data-action', 'click->example#activate');
  container.appendChild(newButton);

  fireEvent.click(newButton);
  expect(newButton).toBeEnabled();
});

Интеграция с CI/CD

Тесты доступности рекомендуется включать в процесс CI/CD для постоянной проверки. Любые изменения в Stimulus-контроллерах должны автоматически проверяться на наличие нарушений ARIA и доступности клавиатурной навигации.

  • Jest можно запускать через npm test
  • axe-core позволяет генерировать отчёты о нарушениях

Тестирование доступности в Stimulus обеспечивает соответствие стандартам WCAG и гарантирует, что динамические элементы интерфейса остаются управляемыми всеми пользователями.

Оглавление