Vue Academy · Pelajaran

Addon Storybook dan Ujian Kebolehcapaian

@storybook/addon-a11y, addon viewport, addon docs untuk dokumentasi automatik.

Pelajaran 4 daripada 413 langkah

Addon Storybook dan Ujian Kebolehcapaian ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Melanjutkan Storybook dengan Alat Tambah

Alat tambah memasukkan panel dan alat tambahan ke dalam Storybook. Selain Kawalan dan Tindakan, alat tambah meliputi kebolehcapaian, ruang pandang responsif dan dokumentasi yang dijana secara automatik.

Alat Tambah Kebolehcapaian

@storybook/addon-a11y menjalankan enjin axe-core pada setiap cerita dan melaporkan pelanggaran WCAG — masalah kontras, label yang tiada dan peranan yang salah — terus dalam panel.

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

Mendaftarkan Alat Tambah

Tambahkan alat tambah itu pada tatasusunan addons dalam .storybook/main.ts. Mulakan semula Storybook untuk memuatkannya.

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

Membaca Panel Kebolehcapaian

Buka satu cerita dan semak tab Kebolehcapaian. Setiap hasil dikumpulkan: Pelanggaran (mesti dibaiki), Lulus dan Tidak lengkap (memerlukan semakan manual). Mengklik satu pelanggaran akan menyerlahkan elemennya.

Pelanggaran Lazim yang Dikesan

Kontras warna yang tidak mencukupi antara teks dengan latar belakang.
Butang atau pautan tanpa nama yang boleh diakses.
Imej tanpa teks alt.
Masukan borang tanpa label yang berkaitan.

Mengesan perkara ini secara berasingan jauh lebih murah berbanding mengesannya selepas keluaran.

Konfigurasi Kebolehcapaian Setiap Cerita

Anda boleh melaraskan peraturan bagi setiap cerita melalui parameter — contohnya, melumpuhkan peraturan yang dikendalikan di tempat lain atau menandakan elemen untuk dilangkau.

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

Alat Tambah Ruang Pandang

Alat tambah ruang pandang (sebahagian daripada alat asas) membolehkan anda melihat pratonton cerita pada saiz peranti yang berbeza — mudah alih, tablet dan desktop — untuk mengesahkan titik henti responsif.

Memilih Ruang Pandang

Menu lungsur bar alat menukar canvas kepada bingkai peranti pratetap. Anda juga boleh menetapkan ruang pandang lalai bagi setiap cerita.

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

Ruang Pandang Tersuai

Takrifkan titik henti anda sendiri dalam preview.ts supaya sepadan dengan lebar tepat sistem reka bentuk anda.

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

Alat Tambah Dokumentasi

@storybook/addon-docs menggerakkan dokumentasi yang dijana secara automatik. Apabila digabungkan dengan tags: ["autodocs"], ia menghasilkan halaman dokumentasi bagi setiap komponen berdasarkan sifat dan cerita.

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

Dokumentasi yang Sentiasa Terkini

Oleh sebab dokumentasi dijana daripada komponen dan cerita sebenar, kandungannya tidak boleh ketinggalan zaman. Jadual sifat mencerminkan takrifan sifat sebenar, manakala contoh ialah cerita langsung.

Semakan Pantas

Semak pemahaman anda tentang alat tambah Storybook.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari alat tambah utama Storybook:

@storybook/addon-a11y melaporkan pelanggaran WCAG bagi setiap cerita (kontras, label dan peranan) serta boleh dilaraskan bagi setiap cerita.
Alat tambah ruang pandang memaparkan pratonton titik henti responsif dengan saiz pratetap atau tersuai.
@storybook/addon-docs dengan tags: ["autodocs"] menjana dokumentasi yang sentiasa terkini secara automatik daripada sifat dan cerita.
Daftarkan alat tambah dalam tatasusunan addons dalam main.ts.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Addon Storybook dan Ujian Kebolehcapaian” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Addon Storybook dan Ujian Kebolehcapaian”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Addon Storybook dan Ujian Kebolehcapaian”?

@storybook/addon-a11y, addon viewport, addon docs untuk dokumentasi automatik. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Addon Storybook dan Ujian Kebolehcapaian” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Menyediakan Storybook untuk Vue 3
Menulis Cerita Komponen
Kawalan, Tindakan dan Argumen
Addon Storybook dan Ujian Kebolehcapaian

← Kembali ke Vue Academy