إمكانية الوصول
يشارك @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-activedescendantLhDialogيحملrole="dialog" aria-modal، ويوفِّر العنوانaria-labelاحتياطيًا مع ربط دقيق عبرaria-labelledbyLhTooltipيربط التلميح بالمُشغِّل عبرaria-describedbyLhTagعند إمكانية النقر عليه يترقَّى إلىrole="button"ويستجيب لـ Enter / SpaceLhFormItemعند فشل التحقّق يُعرَض خطأrole="alert"ويضبطaria-invalid
تفاعل لوحة المفاتيح
| المكوّن | الأزرار |
|---|---|
LhButton / LhTag | Enter / Space لتشغيل النقر |
LhSwitch | Enter / Space للتبديل |
LhSelect | ArrowUp / ArrowDown لإبراز الخيارات، Enter للتحديد، Escape للطي |
LhDialog | Escape للإغلاق (يستجيب فقط الطبقة العلوية) |
LhTooltip | Escape للإغلاق |
عند تكدُّس عدة طبقات منبثقة يُدار ترتيب الفتح عبر 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 ودلالات الأزرار.