Vue Academy · درس

إضافات Storybook واختبار سهولة الوصول

‏@storybook/addon-a11y وإضافة viewport وإضافة docs للتوثيق التلقائي

إضافات Storybook واختبار سهولة الوصول درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

توسيع Storybook باستخدام الإضافات

تضيف الإضافات لوحات وأدوات إضافية إلى Storybook. وإلى جانب Controls وActions، تغطي الإضافات إمكانية الوصول، وإطارات العرض المتجاوبة، والتوثيق المُنشأ تلقائيًا.

إضافة إمكانية الوصول

تشغّل @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، وهي جزء من essentials، معاينة القصة بأحجام أجهزة مختلفة — الهاتف المحمول، والجهاز اللوحي، وسطح المكتب — للتحقق من نقاط التوقف المتجاوبة.

اختيار viewport

تبدّل قائمة منسدلة في شريط الأدوات مساحة العرض إلى إطارات أجهزة معدّة مسبقًا. ويمكنكم أيضًا تعيين viewport افتراضي لكل قصة.

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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy