Работа с Angular

Библиотека Axe-core предназначена для автоматической проверки доступности веб-приложений и компонентов. В контексте Angular она используется для обеспечения соответствия стандартам WCAG и улучшения опыта пользователей с ограниченными возможностями.

Для работы с Angular чаще всего применяются подходы через unit-тесты, end-to-end тесты и интеграцию с компонентами.

Установка и настройка

Axe-core может быть установлена через npm:

npm install axe-core --save-dev

Для использования в тестах с Angular обычно подключают пакет @axe-core/angular или используют Axe через Protractor или Cypress. Пример для Protractor:

npm install protractor-axe-html-report-plugin --save-dev

Настройка в protractor.conf.js может выглядеть так:

const AxeProtractorPlugin = require('protractor-axe-html-report-plugin');

exports.config = {
  plugins: [{
    package: 'protractor-axe-html-report-plugin',
    options: {
      outputPath: 'accessibility-reports'
    }
  }]
};

Это позволяет интегрировать проверки доступности прямо в процесс e2e-тестирования Angular.

Использование Axe-core в unit-тестах Angular

Для unit-тестов компонентов Angular удобно применять Axe через Jasmine и TestBed.

Пример:

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AxeBuilder } from 'axe-core';
import { MyComponent } from './my.component';

describe('MyComponent Accessibility', () => {
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    fixture.detectChanges();
  });

  it('should have no accessibility violations', async () => {
    const results = await new AxeBuilder({ element: fixture.nativeElement }).analyze();
    expect(results.violations.length).toBe(0);
  });
});

Ключевые моменты:

  • fixture.nativeElement указывает на корневой DOM-компонент.
  • violations содержит список найденных нарушений стандартов доступности.
  • Анализ можно интегрировать в CI/CD, чтобы каждый коммит проверял доступность компонентов.

End-to-End тестирование с Axe-core

Для полноценного тестирования приложения в браузере используют Cypress или Protractor.

Пример интеграции с Cypress:

  1. Установить необходимые пакеты:
npm install cypress-axe --save-dev
  1. Настроить Cypress для работы с Axe:
// cypress/support/commands.js
import 'cypress-axe';

Cypress.Commands.add('checkAccessibility', () => {
  cy.injectAxe();
  cy.checkA11y(null, {
    runOnly: {
      type: 'tag',
      values: ['wcag2aa']
    }
  });
});
  1. Применение в тесте:
describe('Accessibility test', () => {
  it('Home page should be accessible', () => {
    cy.visit('/');
    cy.checkAccessibility();
  });
});

Особенности:

  • injectAxe() внедряет скрипт Axe в DOM.
  • checkA11y() выполняет проверку доступности и может выдавать отчет в консоль или файл.
  • Можно настраивать проверки по тегам (например, wcag2a, wcag2aa).

Конфигурация правил и исключений

Axe-core поддерживает детальную настройку правил:

const builder = new AxeBuilder({ element: fixture.nativeElement })
  .disableRules(['color-contrast'])
  .withRules({
    'label': { enabled: true },
    'image-alt': { enabled: true }
  });
  • disableRules — отключает правила, которые временно не применяются.
  • withRules — включает или настраивает определённые правила.
  • Можно создавать профили для разных страниц или компонентов.

Работа с динамическими компонентами Angular

Angular активно использует динамические компоненты, что может создавать трудности при тестировании доступности.

Подходы:

  1. В unit-тестах после fixture.detectChanges() и fixture.whenStable() гарантировать, что все асинхронные изменения завершены:
await fixture.whenStable();
const results = await new AxeBuilder({ element: fixture.nativeElement }).analyze();
  1. Для lazy-loaded модулей и route-based компонентов проверка выполняется после навигации в e2e-тестах:
cy.visit('/lazy-page');
cy.checkAccessibility();
  1. Использовать MutationObserver в сложных интерактивных компонентах для повторного анализа после изменения DOM.

Генерация отчетов и интеграция с CI/CD

Axe-core позволяет формировать отчёты для удобного анализа:

  • JSON — для автоматической обработки.
  • HTML — для визуального просмотра нарушений.

Пример генерации HTML отчета в Protractor:

const AxeProtractorPlugin = require('protractor-axe-html-report-plugin');

plugins: [{
  package: 'protractor-axe-html-report-plugin',
  options: {
    outputPath: 'accessibility-reports',
    reportFileName: 'home-page-report.html'
  }
}]

В CI/CD можно настроить автоматическое прерывание сборки при найденных нарушениях, что гарантирует постоянное соблюдение стандартов доступности.

Оптимизация проверок

  • Проверки можно ограничивать определённой областью DOM: AxeBuilder({ element: fixture.nativeElement.querySelector('#main') }).
  • Использовать фильтры по тегам (wcag2a, wcag2aa) для ускорения анализа.
  • Комбинировать unit-тесты с e2e для охвата как статических, так и динамических компонентов.

Взаимодействие с Angular Material и другими библиотеками UI

Компоненты UI-библиотек, таких как Angular Material, часто имеют встроенную доступность, но проверка с Axe помогает:

  • Проверять собственные кастомные стили и шаблоны.
  • Выявлять случаи, когда разработчик изменил DOM, нарушив стандарт.
  • Составлять отчёты для команды и интегрировать исправления в workflow.

Поддержка TypeScript и типов

При использовании Axe-core в Angular с TypeScript важно подключить типы:

npm install --save-dev @types/axe-core

Типизация позволяет:

  • Использовать автодополнение для правил и конфигурации.
  • Исключить ошибки при передаче параметров в AxeBuilder.
  • Обеспечить совместимость с современными стандартами Angular и RxJS.
Оглавление