Настройка линтеров для доступности

Основные цели линтинга доступности

Линтеры помогают выявлять потенциальные проблемы с доступностью на раннем этапе разработки интерфейсов. В экосистеме React Aria линтеры обеспечивают:

  • Автоматическую проверку компонентов на соответствие стандартам WAI-ARIA.
  • Подсказки по семантической разметке и правильному использованию атрибутов role, aria-*.
  • Предупреждения о нарушениях контрастности текста, интерактивных элементов и фокусируемых областей.
  • Интеграцию с CI/CD для предотвращения деплоя недоступного интерфейса.

Установка и настройка ESLint для доступности

Для работы с линтерами доступности в проектах React чаще всего используется плагин eslint-plugin-jsx-a11y. Он интегрируется с ESLint и проверяет JSX-разметку на соответствие лучшим практикам доступности.

  1. Установка зависимостей:
npm install eslint eslint-plugin-jsx-a11y --save-dev
  1. Конфигурация .eslintrc.js:
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended'
  ],
  plugins: ['jsx-a11y'],
  rules: {
    'jsx-a11y/anchor-is-valid': 'warn',
    'jsx-a11y/alt-text': 'error',
    'jsx-a11y/no-noninteractive-tabindex': 'warn'
  },
  settings: {
    react: {
      version: 'detect'
    }
  }
};

Ключевые моменты конфигурации:

  • extends: 'plugin:jsx-a11y/recommended' активирует рекомендуемый набор правил доступности.
  • rules позволяет включать строгие проверки для критических элементов, таких как изображения (alt-text) или интерактивные элементы (anchor-is-valid).
  • Использование warn вместо error позволяет не блокировать сборку, но предупреждает о потенциальных проблемах.

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

Для поддержания единообразного кода и совместимости линтинга с форматированием Prettier рекомендуется:

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
module.exports = {
  extends: [
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error']
  }
};

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

  • Добавить команду линтинга в package.json:
"scripts": {
  "lint": "eslint src/**/*.jsx"
}
  • Настроить проверку на CI (GitHub Actions, GitLab CI) для блокировки пулл-реквестов с нарушениями доступности:
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm install
      - run: npm run lint

Настройка линтера для React Aria компонентов

React Aria предоставляет низкоуровневые хелперы для управления фокусом, клавиатурными событиями и ролями. Для их корректной проверки следует:

  • Использовать role и aria-* атрибуты явно в JSX.
  • Проверять элементы с useButton, useMenu, useListBox на соответствие рекомендациям jsx-a11y.
  • Игнорировать предупреждения, если компонент управляет доступностью программно (например, виртуализированные списки), используя правило ESLint:
rules: {
  'jsx-a11y/no-noninteractive-element-interactions': ['off', {
    handlers: ['onClick', 'onKeyDown', 'onKeyUp', 'onKeyPress']
  }]
}

Советы по расширенной проверке доступности

  1. Добавление кастомных правил: Можно создавать собственные ESLint правила для специфических компонентов библиотеки React Aria, например, проверку корректного использования useFocusRing или useOverlayTrigger.

  2. Комбинация с axe-core: Для динамических проверок на этапе тестирования интегрировать eslint-plugin-jsx-a11y с @axe-core/react:

import { axe } from '@axe-core/react';

if (process.env.NODE_ENV !== 'production') {
  axe(React, ReactDOM, 1000);
}

Это позволяет выявлять проблемы, которые не покрываются статическим анализом.

  1. Автоматизация исправлений: ESLint поддерживает --fix для многих правил. Например:
npx eslint src/**/*.jsx --fix
  1. Визуальная проверка: Интеграция линтера с Storybook помогает обнаруживать проблемы доступности на уровне компонентов. Storybook имеет аддон @storybook/addon-a11y, который визуализирует нарушения и подсвечивает элементы.

Итоговое управление правилами

  • Правила делятся на обязательные (error) и рекомендованные (warn), чтобы сбалансировать строгий контроль и удобство разработки.
  • Необходимо регулярно обновлять версии eslint-plugin-jsx-a11y, так как React Aria обновляется и появляются новые рекомендации по атрибутам aria-*.
  • Для крупных проектов полезно создавать базовый конфиг линтера, который наследуют все подмодули, чтобы стандартизировать доступность на уровне всей кодовой базы.
Оглавление