Treegrid والأنماط المتقدمة الأخرى

بعض عناصر الواجهة معقّدة فعلًا: تجمع treegrids والشبكات والأشجار بين الصفوف والأعمدة والعُقد القابلة للتوسيع في الوقت نفسه. 🌳

‏treegrid هي شبكة يمكن توسيع صفوفها وطيّها مثل الشجرة، وهي مناسبة لعرض ملفات يحتوي على مجلدات متداخلة وأعمدة للتفاصيل.

استخدم role="treegrid" للحاوية، وrole="row" لكل صف، وrole="gridcell" للخلايا. تعكس البنية بنية شبكة حقيقية.

يحمل الصف الذي يمكن فتحه السمة aria-expanded، فتكون قيمتها true عند ظهور العناصر الفرعية، وfalse عند طيّها. أما صفوف الأوراق فتحذف هذه السمة تمامًا.

استخدم aria-level لإخبار المستخدمين بمدى عمق الصف داخل الشجرة. المستوى 1 هو المستوى الأعلى، وكل صف متداخل يزيد المستوى بمقدار واحد.

في treegrid، تتحرك مفاتيح الأسهم على كلا المحورين: يغيّر السهمان لأعلى ولأسفل الصفوف، بينما يتنقل السهمان لليسار ولليمين بين الخلايا أو يطويانها ويوسعانها.

في صف رئيسي، يوسّعه Right Arrow ويطويه Left Arrow. وهذا يطابق الطريقة التي عملت بها أشجار الملفات على أجهزة سطح المكتب دائمًا.

تُعدّ treegrid بأكملها موضع توقف واحدًا لزر Tab. ينقل roving tabindex التركيز الفعلي بين الخلايا، فيبدو عنصر الواجهة كأنه تحكم مركب واحد.

بالنسبة إلى الصفوف الديناميكية أو الافتراضية، استخدم aria-setsize وaria-posinset لكي يسمع المستخدمون أعداد المواضع حتى عندما لا تُعرض جميع الصفوف.

تضيف الشبكات المتقدمة مفتاحَي Home وEnd للانتقال إلى الخلية الأولى أو الأخيرة، واستخدام Ctrl مع Home أو End للانتقال إلى بداية البيانات أو نهايتها تمامًا.

هذه الأنماط لا تتسامح مع الأخطاء، لذا اتبع مثال APG بدقة واختبر باستخدام قارئ شاشة حقيقي. فالأخطاء الصغيرة قد تعطل عنصر الواجهة بأكمله.

تجمع treegrid بين الشبكة والشجرة: صفوفًا تحتوي على aria-expanded وaria-level، ومفاتيح أسهم على محورين، وموضع توقف واحدًا لزر Tab عبر roving tabindex. اعتمد على APG واختبرها بدقة. ✅