الحل: مكتبة مكونات سهلة الوصول وقابلة للتخصيص

حل

إليكم تطبيق تحدي مكتبة المكونات القابلة للوصول والتخصيص. يتميز بنظام تخصيص قائم على الرموز يتم تطبيقه فيdocument الجذر، وهو موفر لغة يدير حل الرسائل، والجمع، والاستيفاء، بالإضافة إلى اتجاه الكتابة من اليمين إلى اليسار عبرdir="rtl" كما يتضمن ذلك حالة إمكانية الوصولBanner يتم تحديثها من خلال منطقة بث مباشر مهذبة (role="status" معaria-live="polite" ) دون إعادة تركيب DOM الهيكلي، وبدون رأسDropdown تم بناؤها باستخدام مكونات مركبة تعرض لوحة المفاتيح ومنطق التركيز من خلال أدوات جلب الخصائص مثلgetTriggerProps() وgetItemProps(index) ، مع الحفاظ على إمكانية تخصيص الترميز والتصميم بشكل كامل.

توضيح

إليكم شرح الكود أعلاه:

• فيApp.js ملف:

  • الأسطر من 1 إلى 5: تستورد "شرائح المكتبة" الثلاث المستخدمة في العرض التوضيحي: السمات (ThemeProvider/useTheme ), i18n (I18nProvider/useI18n ) متاحBanner وشخص بلا رأسDropdown .

  • الأسطر 7-28:Controls عنصر:

    • السطران 8-9: يقرأ الموضوع النشط والمكان بالإضافة إلى المترجمt() .

    • الأسطر من 12 إلى 26: يعرض زرين تبديل داخل مجموعة يسهل الوصول إليها (role="group" يتم تحديد موقع تسمية المجموعة عبرt("controls.label") .

    • الأسطر 13-18: تبديل السمة بين"dark" و"light" ويعرض اسم السمة الحالية.

    • الأسطر 20-25: مفتاح تبديل اللغة يتنقل بين"en" و"ar" ويعرض اللغة الحالية بأحرف كبيرة.

  • الأسطر 30-76:MenuDemo عنصر:

    • السطران 31-32: عمليات السحبt() للحصول على تسميات قوائم محلية.

    • الأسطر من 34 إلى 75: تقوم بعرض قائمة منسدلة باستخدام المكونات المركبة وخصائص العرض:

      • الأسطر 36-42:Dropdown.Trigger يحقنtriggerProps (ARIA + لوحة المفاتيح + معالجات النقر) في زر منسق.

      • الأسطر 44-72:Dropdown.Menu يحقنmenuProps (الدور/التسمية/معالجة لوحة المفاتيح/الرؤية) في حاوية القائمة.

      • الأسطر 47-69: ...