تخطّي إلى المحتوى الرئيسي

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

يشارك @lh-ui/react باقي مكتبات العائلة عقد إمكانية الوصول ذاته: الوسوم الدلالية وسمات ARIA وتفاعل لوحة المفاتيح معرَّفة بالكامل داخل @lh-ui/share/core، وتُنفَّذ بشكل متطابق في كل الأطراف. وتضيف هذه المكتبة ضمانًا بعدم ظهور فخاخ a11y الشائعة في منظومة React.

الدلالة و ARIA​

  • LhSwitch يُعرَض <div role="switch" aria-checked> بدلًا من checkbox مُموَّه بصريًا
  • LhSelect المُشغِّل role="combobox"، واللوحة المنسدلة role="listbox"، والخيارات role="option"، مع مزامنة الإبراز عبر aria-activedescendant
  • LhDialog يحمل role="dialog" aria-modal، ويوفِّر العنوان aria-label احتياطيًا مع ربط دقيق عبر aria-labelledby
  • LhTooltip يربط التلميح بالمُشغِّل عبر aria-describedby
  • LhTag عند إمكانية النقر عليه يترقَّى إلى role="button" ويستجيب لـ Enter / Space
  • LhFormItem عند فشل التحقّق يُعرَض خطأ role="alert" ويضبط aria-invalid

تفاعل لوحة المفاتيح​

المكوّنالأزرار
LhButton / LhTagEnter / Space لتشغيل النقر
LhSwitchEnter / Space للتبديل
LhSelectArrowUp / ArrowDown لإبراز الخيارات، Enter للتحديد، Escape للطي
LhDialogEscape للإغلاق (يستجيب فقط الطبقة العلوية)
LhTooltipEscape للإغلاق

عند تكدُّس عدة طبقات منبثقة يُدار ترتيب الفتح عبر useLhOverlayStack، فيُغلق Escape الطبقة العلوية فقط لتفادي إغلاق جميع الطبقات بضغطة واحدة.

إدارة التركيز​

  • LhDialog عند الفتح يحدُّ useLhFocusTrap التركيز داخل مربع الحوار (لا يهرب Tab / Shift+Tab)، وبعد الإغلاق يُعاد التركيز إلى المُشغِّل
  • LhFormItem عند النقر على label يركِّز على أول عنصر قابل للتركيز في منطقة المحتوى (focusControl)، إذ إن سلوك label الأصلي المغلِّف غير موثوق مع العناصر المركَّبة

الأيقونات الزخرفية​

يكون LhIcon افتراضيًا decorative: يُخرِج aria-hidden="true" فلا يظهر لقارئ الشاشة. وعند الحاجة إلى دلالة مرِّر decorative={false} + ariaLabel:

<LhIcon name="search" decorative={false} ariaLabel="بحث" />

عندها يُعرَض <svg role="img" aria-label="بحث">.

أمان StrictMode​

جميع المكوّنات آمنة تحت React StrictMode: تُعامَل تنظيفات effect والتركيب المتكرَّر معاملة مُكرَّرة (idempotent) — تسجيل/إزالة رصة الطبقات المنبثقة، والتحقق من حامل قفل التمرير، وتحرير focus trap.

اتساق العائلة​

سُجِّل سلوك إمكانية الوصول في docs/设计语言基线.md (خط أساس لغة التصميم)، وهو عقد موحَّد للسلالتين (web / أصلية). وتنفِّذ الأطراف المنطق نفسه من @lh-ui/share/core، فتتطابق سمات aria ودلالات الأزرار.