0Pricing
Vue Academy · Урок

Дополнения Storybook и тестирование доступности

@storybook/addon-a11y, дополнение viewport и дополнение docs для автоматической документации

«Дополнения Storybook и тестирование доступности» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Расширение Storybook с помощью дополнений

Дополнения подключают к Storybook дополнительные панели и инструменты. Помимо элементов управления и действий, дополнения поддерживают проверку доступности, адаптивные области просмотра и автоматическую генерацию документации.

Дополнение для проверки доступности

@storybook/addon-a11y запускает движок axe-core для каждой истории и сообщает о нарушениях WCAG — проблемах с контрастом, отсутствующих метках и неправильных ролях — прямо на панели.

// terminal
// npm install -D @storybook/addon-a11y

Регистрация дополнения

Добавьте дополнение в массив addons файла .storybook/main.ts. Перезапустите Storybook, чтобы загрузить его.

// .storybook/main.ts
const config = {
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
}

Работа с панелью a11y

Откройте историю и перейдите на вкладку доступности. Каждый результат относится к одной из групп: Нарушения (необходимо исправить), Успешные проверки и Неполные результаты (требуют ручной проверки). При нажатии на нарушение соответствующий элемент подсвечивается.

Распространённые нарушения, которые обнаруживаются

  • Недостаточный контраст цвета текста и фона.
  • Кнопки или ссылки без доступных названий.
  • Изображения без текста alt.
  • Поля формы без связанных с ними меток.

Обнаружить такие проблемы в изоляции гораздо дешевле, чем после выпуска.

Настройка a11y для отдельной истории

Вы можете настраивать правила для каждой истории с помощью параметров — например, отключить правило, которое обрабатывается в другом месте, или указать элементы, которые нужно пропустить.

export const NoContrastCheck = {
  parameters: {
    a11y: {
      config: {
        rules: [{ id: "color-contrast", enabled: false }],
      },
    },
  },
}

Дополнение viewport

Дополнение viewport (входящее в набор основных дополнений) позволяет просматривать историю при разных размерах устройств — мобильных, планшетных и настольных — и проверять адаптивные контрольные точки.

Выбор области просмотра

Раскрывающийся список на панели инструментов переключает canvas на стандартные рамки устройств. Также можно задать область просмотра по умолчанию для каждой истории.

export const Mobile = {
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
}

Пользовательские области просмотра

Определите собственные контрольные точки в preview.ts, чтобы они соответствовали точным размерам Вашей системы дизайна.

// .storybook/preview.ts
const preview = {
  parameters: {
    viewport: {
      viewports: {
        tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
      },
    },
  },
}

Дополнение Docs

@storybook/addon-docs отвечает за автоматическую генерацию документации. Вместе с tags: ["autodocs"] оно создаёт страницу Docs для каждого компонента на основе его свойств и историй.

export default {
  component: Card,
  tags: ["autodocs"],
}

Документация, которая всегда актуальна

Поскольку документация создаётся на основе реальных компонентов и историй, она не устаревает. Таблицы свойств отражают фактические определения свойств, а примеры являются интерактивными историями.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете дополнения Storybook.

Итоги

Вы изучили основные дополнения Storybook:

  • @storybook/addon-a11y сообщает о нарушениях WCAG для каждой истории (контраст, метки и роли), а правила можно настраивать для отдельных историй.
  • Дополнение viewport позволяет просматривать адаптивные контрольные точки со стандартными или пользовательскими размерами.
  • @storybook/addon-docs вместе с tags: ["autodocs"] автоматически создаёт всегда актуальную документацию на основе свойств и историй.
  • Регистрируйте дополнения в массиве addons файла main.ts.

Часто задаваемые вопросы

Урок «Дополнения Storybook и тестирование доступности» бесплатный?

Да — полный текст урока «Дополнения Storybook и тестирование доступности» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Дополнения Storybook и тестирование доступности»?

@storybook/addon-a11y, дополнение viewport и дополнение docs для автоматической документации Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Дополнения Storybook и тестирование доступности»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка Storybook для Vue 3
  2. Написание историй компонентов
  3. Элементы управления, действия и аргументы
  4. Дополнения Storybook и тестирование доступности
← Назад к Vue Academy