Настраивает jest-axe, Playwright + axe и порог Lighthouse CI, чтобы регрессии доступности ловились до релиза.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — инженер по качеству, специализирующийся на доступности. Настрой автоматические проверки доступности в проекте. Входные данные: - Стек: [React + Vite / Next.js / Vue] - Тестовый фреймворк: [Jest / Vitest / Playwright] - CI: [GitHub Actions / GitLab CI] - Компоненты и страницы для покрытия: [список] - Минимальный балл Lighthouse Accessibility: [90] Что сделать: 1. Юнит-уровень: подключи jest-axe (или vitest-axe), добавь матчер toHaveNoViolations и напиши тест-шаблон, который рендерит компонент и проверяет результат axe. Покажи, как проверять разные состояния: открытая модалка, ошибка формы, раскрытое меню. 2. E2E-уровень: Playwright + @axe-core/playwright, сканирование ключевых страниц с тегами wcag2a, wcag2aa, wcag22aa, исключение сторонних виджетов через exclude с комментарием в тикете, а не в коде. 3. Lighthouse CI: lighthouserc с assertion categories:accessibility не ниже [порог] и падением сборки при нарушении. 4. Линтер: eslint-plugin-jsx-a11y (или аналог для Vue) с рекомендованным набором правил. 5. CI: отдельный job, артефакт с отчётом, понятное сообщение об ошибке со ссылкой на правило axe. 6. Честно обозначь предел: автоматика ловит около 30–40% проблем. Добавь короткий ручной чек-лист для PR: Tab по изменённому экрану, видимый фокус, проверка скринридером новых контролов, контраст новых цветов. Формат ответа: список файлов с полным кодом каждого, команды установки и раздел «как читать отчёт и чинить типовые нарушения» (пустая кнопка, поле без label, контраст, неверная ARIA).
```text Ты — инженер по качеству, специализирующийся на доступности. Настрой автоматические проверки доступности в проекте. Входные данные: - Стек: [React + Vite / Next.js / Vue] - Тестовый фреймворк: [Jest / Vitest / Playwright] - CI: [GitHub Actions / GitLab CI] - Компоненты и страницы для покрытия: [список] - Минимальный балл Lighthouse Accessibility: [90] Что сделать: 1. Юнит-уровень: подключи jest-axe (или vitest-axe), добавь матчер toHaveNoViolations и напиши тест-шаблон, который рендерит компонент и проверяет результат axe. Покажи, как проверять разные состояния: открытая модалка, ошибка формы, раскрытое меню. 2. E2E-уровень: Playwright + @axe-core/playwright, сканирование ключевых страниц с тегами wcag2a, wcag2aa, wcag22aa, исключение сторонних виджетов через exclude с комментарием в тикете, а не в коде. 3. Lighthouse CI: lighthouserc с assertion categories:accessibility не ниже [порог] и падением сборки при нарушении. 4. Линтер: eslint-plugin-jsx-a11y (или аналог для Vue) с рекомендованным набором правил. 5. CI: отдельный job, артефакт с отчётом, понятное сообщение об ошибке со ссылкой на правило axe. 6. Честно обозначь предел: автоматика ловит около 30–40% проблем. Добавь короткий ручной чек-лист для PR: Tab по изменённому экрану, видимый фокус, проверка скринридером новых контролов, контраст новых цветов. Формат ответа: список файлов с полным кодом каждого, команды установки и раздел «как читать отчёт и чинить типовые нарушения» (пустая кнопка, поле без label, контраст, неверная ARIA). ```
{
"messages": [
{
"role": "user",
"content": "Ты — инженер по качеству, специализирующийся на доступности. Настрой автоматические проверки доступности в проекте.\n\nВходные данные:\n- Стек: [React + Vite / Next.js / Vue]\n- Тестовый фреймворк: [Jest / Vitest / Playwright]\n- CI: [GitHub Actions / GitLab CI]\n- Компоненты и страницы для покрытия: [список]\n- Минимальный балл Lighthouse Accessibility: [90]\n\nЧто сделать:\n1. Юнит-уровень: подключи jest-axe (или vitest-axe), добавь матчер toHaveNoViolations и напиши тест-шаблон, который рендерит компонент и проверяет результат axe. Покажи, как проверять разные состояния: открытая модалка, ошибка формы, раскрытое меню.\n2. E2E-уровень: Playwright + @axe-core/playwright, сканирование ключевых страниц с тегами wcag2a, wcag2aa, wcag22aa, исключение сторонних виджетов через exclude с комментарием в тикете, а не в коде.\n3. Lighthouse CI: lighthouserc с assertion categories:accessibility не ниже [порог] и падением сборки при нарушении.\n4. Линтер: eslint-plugin-jsx-a11y (или аналог для Vue) с рекомендованным набором правил.\n5. CI: отдельный job, артефакт с отчётом, понятное сообщение об ошибке со ссылкой на правило axe.\n6. Честно обозначь предел: автоматика ловит около 30–40% проблем. Добавь короткий ручной чек-лист для PR: Tab по изменённому экрану, видимый фокус, проверка скринридером новых контролов, контраст новых цветов.\n\nФормат ответа: список файлов с полным кодом каждого, команды установки и раздел «как читать отчёт и чинить типовые нарушения» (пустая кнопка, поле без label, контраст, неверная ARIA)."
}
]
}