الدرس 5 من 8
أسئلة قابلة للطيّ
- 14 دقيقة
- 6 فحوص
- 3 تلميحات
- إلى المطلوب
هدف الدرس
زرّ يعلن ما يفتحه
الشرح
القائمة القابلة للطيّ (accordion) عناوين تضغط أحدها فتظهر تحته لوحة أو تختفي، والعنوان هنا زرّ داخل وسم عنوان وليس div عليه مستمع، لأنّ الزرّ يصل إليه Tab، ويعمل بـ Enter وبمفتاح المسافة، ويعرّفه قارئ الشاشة على أنه زرّ دون أن تكتب سطرًا إضافيًّا.
ويبقى على الزرّ أن يعلن أمرين، الأول هل لوحته مفتوحة، ويعلنه بـ aria-expanded، والثاني أيّ لوحة يتحكّم فيها، ويعلنه بـ aria-controls مع معرّف اللوحة. وأضف hidden إلى اللوحة المطويّة لتخرج من شجرة إمكانية الوصول أيضًا.
انتبه: قيمة aria-expanded نصّ وليست قيمة منطقية، والنصّ 'false' ليس فارغًا، فيكون الشرط if (button.getAttribute('aria-expanded')) صحيحًا دائمًا، لذلك قارن القيمة بـ === 'true'.
المطلوب
أعطِ كل زرّ في #faq الخاصية aria-controls بمعرّف لوحته، والخاصية aria-expanded="false"، ثم اجعل الضغط على الزرّ يبدّل aria-expanded وhidden لوحته معًا، بحيث يتحكّم كل زرّ في لوحته وحدها.
الفحوص
6 فحوص- كل زرّ مربوط بلوحته عبر aria-controls
- اللوحات مطويّة والأزرار تعلن ذلك
- الضغط على الزرّ يفتح لوحته
- الزرّ يعلن أنّ لوحته مفتوحة
- الضغطة الثانية تطوي اللوحة
- كل زرّ يتحكّم في لوحته وحدها