फ़्रंटएंड इंटरव्यू: आप एक एक्सेसिबल ड्रैग-एंड-ड्रॉप सॉर्टेबल लिस्ट कैसे बनाते हैं?

प्रॉम्प्ट और लागू संदर्भ

एक टास्क लिस्ट बनाएं जिसके आइटम्स को पुन: व्यवस्थित किया जा सके। माउस और टच उपयोगकर्ता किसी आइटम को ड्रैग कर सकते हैं, लेकिन प्रत्येक रीऑर्डर कीबोर्ड से और ऐसे क्लिक या टैप से भी संभव होना चाहिए जिनमें ड्रैगिंग मूवमेंट की आवश्यकता न हो। स्क्रीन-रीडर उपयोगकर्ता को यह पता चलना चाहिए कि कौन सा आइटम स्थानांतरित हुआ और उसकी नई स्थिति क्या है। डिज़ाइन को फ़ोकस बनाए रखना चाहिए, कैंसिलेशन का समर्थन करना चाहिए, आइटम्स के खोने या डुप्लिकेट होने से बचना चाहिए, और दृश्य क्रम को अस्पष्ट छोड़े बिना विफल सेव को संभालना चाहिए।

मान लें कि बेस लिस्ट पूरी तरह से रेंडर की गई है, प्रत्येक आइटम की एक स्टेबल यूनिक ID है, और एक समय में केवल एक ही आइटम चलता है। वर्चुअलाइज़्ड लिस्ट के भीतर रीऑर्डर करना, कई चयनित आइटम्स को स्थानांतरित करना, और समवर्ती संपादनों (concurrent edits) को हल करना फ़ॉलो-अप प्रश्न हैं। फ़्रेमवर्क मुख्य निर्णय नहीं है: React व्यू को रेंडर कर सकता है, लेकिन साक्षात्कार इनपुट मॉडलिंग, एक्सेसिबल सेमेंटिक्स, स्टेट ओनरशिप और सत्यापन का परीक्षण करता है।

ड्रैगिंग एक संवर्द्धन (enhancement) है, व्यावसायिक संचालन (business operation) नहीं। व्यावसायिक संचालन है "आइटम X को अंतिम स्थिति Y पर ले जाना।" पॉइंटर ड्रैग, कीबोर्ड कमांड्स और दृश्यमान मूव कंट्रोल्स सभी को उसी समान ऑपरेशन को इनवोक करना चाहिए। यह अलगाव तीन इनपुट पाथ्स को तीन सूक्ष्म रूप से भिन्न क्रम उत्पन्न करने से रोकता है।

इंटरव्यूअर क्या मूल्यांकन करता है

पहला संकेत यह है कि क्या उम्मीदवार पहचान (identity) को स्थिति (position) से अलग करता है। ऐरे इंडेक्स अस्थायी स्थितियां हैं, इसलिए वे React कीज़ या पर्सिस्टेंट आइटम पहचान नहीं होने चाहिए। एक स्टेबल आइटम ID चुनती है कि क्या स्थानांतरित होता है; एक अंतिम इंडेक्स या पड़ोसी स्टेबल ID चुनती है कि यह कहाँ स्थानांतरित होता है।

दूसरा संकेत एक्सेसिबिलिटी की सटीकता है। WCAG कीबोर्ड ऑपरेशन और WCAG 2.2 ड्रैगिंग-मूवमेंट आवश्यकता संबंधित हैं लेकिन स्वतंत्र हैं। केवल-कीबोर्ड शॉर्टकट अपने आप में ऐसे उपयोगकर्ता को सिंगल-पॉइंटर विकल्प नहीं देता है जो क्लिक या टैप तो कर सकता है लेकिन होल्ड और ड्रैग नहीं कर सकता। दृश्यमान Move up, Move down, या Move to कंट्रोल्स दोनों इनपुट पाथ्स को संतुष्ट कर सकते हैं।

तीसरा संकेत इंटरैक्शन-स्टेट अनुशासन है। एक मजबूत उत्तर idle, active reorder, commit, और cancel के बीच अंतर करता है; रोलबैक के लिए मूल क्रम को बरकरार रखता है; pointercancel, Escape, और एक अमान्य ड्रॉप को संभालता है; और प्रत्येक होवर स्थिति को व्यावसायिक अपडेट के रूप में पर्सिस्ट नहीं करता है।

चौथा संकेत सहायक-तकनीक (assistive-technology) का व्यवहार है। नेटिव लिस्ट और बटन सेमेंटिक्स, एक स्पष्ट ड्रैग हैंडल, संक्षिप्त निर्देश, स्टेबल फ़ोकस, एक विनम्र (polite) स्टेटस घोषणा, और दृश्यमान ड्रॉप संकेतक कई ARIA विशेषताओं को जोड़ने की तुलना में अधिक मायने रखते हैं। aria-grabbed और aria-dropeffect बहिष्कृत (deprecated) हैं और इन्हें समाधान के रूप में प्रस्तुत नहीं किया जाना चाहिए।

अंत में, इंटरव्यूअर साक्ष्य-आधारित सत्यापन की तलाश करता है: शुद्ध रीऑर्डर परीक्षण, माउस और टच परीक्षण, केवल-कीबोर्ड संचालन, स्क्रीन-रीडर जांच, फ़ोकस सत्यापन, रिड्यूस्ड-मोशन और फोर्स्ड-कलर्स व्यवहार, और सेव-विफलता रिकवरी। एक स्वचालित एक्सेसिबिलिटी स्कैन यह साबित नहीं कर सकता कि बोला गया रीऑर्डर फ़्लो समझने योग्य है।

उत्तर देने से पहले स्पष्ट करने योग्य प्रश्न

• क्या रीऑर्डरिंग एक ही सूची के भीतर है या सूचियों के बीच? एक सूची को अंतिम स्थिति की आवश्यकता होती है; क्रॉस-लिस्ट मूवमेंट के लिए स्रोत और गंतव्य ओनरशिप, अनुमत ड्रॉप प्रकार और एक एटॉमिक अपडेट की भी आवश्यकता होती है।
• क्या क्रम को दूरस्थ रूप से (remotely) सहेजा जाना चाहिए? केवल-स्थानीय क्रम तुरंत कमिट हो सकता है। रिमोट पर्सिस्टेंस के लिए पेंडिंग, सफलता, विफलता, पुनः प्रयास और वर्शन-संघर्ष व्यवहार की आवश्यकता होती है।
• कौन से इनपुट दायरे में हैं? यदि टच, कीबोर्ड, स्विच, वॉयस या स्क्रीन-रीडर उपयोगकर्ताओं की आवश्यकता है तो केवल-माउस HTML ड्रैग इवेंट अपर्याप्त हैं।
• क्या क्लिक या टैप विकल्प दृश्यमान है? कीबोर्ड शॉर्टकट एक अलग आवश्यकता को पूरा करते हैं। एक गैर-आवश्यक सॉर्टेबल सूची के लिए, ऐसे नियंत्रण प्रदान करें जिन्हें पॉइंटर को पकड़े और हिलाए बिना एक पॉइंटर से सक्रिय किया जा सके।
• क्या मूवमेंट का पूर्वावलोकन तुरंत दिखाई देता है या केवल ड्रॉप करने पर? लाइव पूर्वावलोकन मजबूत दृश्य प्रतिक्रिया देता है, लेकिन कैंसिलेशन को मूल क्रम को पुनर्स्थापित करना चाहिए और घोषणाओं को प्रत्येक पॉइंटर पिक्सेल पर बोलना नहीं चाहिए।
• क्या कई आइटम्स का चयन किया जा सकता है? मल्टी-आइटम मूवमेंट मॉडल को एक आइटम ID से एक ऑर्डर्ड सेट में बदल देता है और इसके लिए मिश्रित चलने योग्य और लॉक किए गए आइटम्स के नियमों की आवश्यकता होती है।
• क्या सूची वर्चुअलाइज़्ड है? ऑफ-स्क्रीन स्थितियां DOM ड्रॉप टार्गेट्स के रूप में मौजूद नहीं होती हैं, इसलिए हिट टेस्टिंग, घोषणाएं, कुल गिनती और कीबोर्ड मूवमेंट को डेटा मॉडल पर काम करना चाहिए।
• क्या कोई अन्य क्लाइंट समवर्ती रूप से रीऑर्डर कर सकता है? यदि हाँ, तो सेव अनुबंध को एक सूची वर्शन या समकक्ष पूर्व शर्त और एक स्पष्ट संघर्ष नीति की आवश्यकता होती है।

30-सेकंड का उत्तर फ़्रेमवर्क

"मैं रीऑर्डर को एक शुद्ध कमांड के रूप में मॉडल करूँगा: एक स्टेबल आइटम ID को अंतिम इंडेक्स पर ले जाना। पॉइंटर ड्रैग, कीबोर्ड क्रियाएं और दृश्यमान Move बटन सभी इसे कॉल करते हैं। मैं नेटिव लिस्ट और बटन सेमेंटिक्स का उपयोग करूँगा, स्थानांतरित हैंडल पर फ़ोकस बनाए रखूँगा, और इसकी नई स्थिति की घोषणा करूँगा। सत्र मूल क्रम को संग्रहीत करता है, इसलिए Escape, pointercancel, एक अमान्य ड्रॉप, या एक सेव विफलता इसे पुनर्स्थापित कर सकती है। फिर मैं क्रमपरिवर्तन अपरिवर्तनीय (permutation invariant) को सत्यापित करूँगा और माउस, टच, केवल-क्लिक, कीबोर्ड, स्क्रीन-रीडर, फ़ोकस और विफलता फ़्लो का परीक्षण करूँगा।"

स्टेप-बाय-स्टेप डीप डाइव

एक कैनोनिकल डेटा ऑपरेशन के साथ शुरुआत करें। इनपुट एक स्टेबल ID और एक शून्य-आधारित (zero-based) अंतिम इंडेक्स का उपयोग करता है; आउटपुट एक नया क्रम है। ऑपरेशन को प्रत्येक ID को ठीक एक बार संरक्षित करना चाहिए और इनपुट ऐरे को अछूता छोड़ना चाहिए।

interface SortableItem {
  id: string
  label: string
}

function moveItem(
  items: ReadonlyArray<SortableItem>,
  itemId: string,
  targetIndex: number,
): ReadonlyArray<SortableItem> {
  const fromIndex = items.findIndex((item) => item.id === itemId)

  if (fromIndex === -1 || items.length < 2) return items

  const finalIndex = Math.max(0, Math.min(targetIndex, items.length - 1))

  if (fromIndex === finalIndex) return items

  const next = [...items]
  const [movedItem] = next.splice(fromIndex, 1)

  if (!movedItem) return items

  next.splice(finalIndex, 0, movedItem)
  return next
}

इस कमांड में O(n) समय और O(n) स्पेस की लागत आती है क्योंकि ऐरे निष्कासन, सम्मिलन और प्रतिलिपि आइटम्स को स्थानांतरित करते हैं। यह एक सामान्य पूरी तरह से रेंडर की गई टास्क लिस्ट के लिए उपयुक्त है। एक बहुत बड़ी वर्चुअलाइज़्ड सूची सॉर्टेबल रैंक कीज़ को स्टोर कर सकती है या पड़ोसी IDs द्वारा सर्वर-साइड मूवमेंट लागू कर सकती है, लेकिन उस अतिरिक्त जटिलता को स्केल आवश्यकता से साक्ष्य की आवश्यकता होती है।

React कीज़ के रूप में स्टेबल IDs का उपयोग करें। key={item.id} के साथ, React एक नए इंडेक्स को एक नई पहचान के रूप में मानने के बजाय मौजूदा आइटम नोड को स्थानांतरित कर सकता है। यह फ़ोकस किए गए हैंडल और स्थानीय आइटम स्थिति को संरक्षित करने में मदद करता है। यदि कोई एसिंक्रोनस अपडेट अभी भी फ़ोकस खो देता है, तो आइटम ID द्वारा कीड (keyed) रेफ़्स रखें और कमिटेड रेंडर के बाद उसी हैंडल पर फ़ोकस पुनर्स्थापित करें। फ़ोकस को सूची की शुरुआत में न भेजें, और पॉइंटर उपयोगकर्ताओं के लिए फ़ोकस परिवर्तन बाध्य न करें।

बेस मार्कअप को ड्रैग के बिना समझने योग्य बनाएं। एक ऑर्डर्ड लिस्ट और लिस्ट आइटम्स संग्रह संरचना को उजागर करते हैं। प्रत्येक आइटम में एक नेटिव बटन होता है जिसका नाम, उदाहरण के लिए, "Reorder Review" होता है। प्रत्येक एक्सेसिबल नाम में आइटम नाम के साथ दृश्यमान Move up और Move down बटन, या एक Move to स्थिति क्रिया प्रदान करें। एक असंभव सीमा क्रिया (boundary action) को अक्षम करें। ये नियंत्रण क्लिक, टैप और कीबोर्ड सक्रियण द्वारा काम करते हैं, इसलिए वे एक खोजने योग्य विकल्प और ड्रैग विफल होने पर एक सरल रिकवरी पाथ दोनों हैं।

दो एक्सेसिबिलिटी आवश्यकताओं के बीच का अंतर डिज़ाइन को बदलता है। कीबोर्ड ऑपरेशन का अर्थ है कि पूरा रीऑर्डर पॉइंटिंग डिवाइस के बिना किया जा सकता है। अलग से, ड्रैगिंग मूवमेंट में एक सिंगल-पॉइंटर विधि होनी चाहिए जिसमें पॉइंटर को होल्ड और मूव करने की आवश्यकता न हो जब ड्रैगिंग आवश्यक न हो। एरो-की ड्रैग मोड कीबोर्ड उपयोगकर्ताओं को संतुष्ट कर सकता है लेकिन दूसरी आवश्यकता को तब तक नहीं जब तक कि इसके नियंत्रण क्लिक या टैप द्वारा भी संचालित न हों। दृश्यमान मूवमेंट बटन दोनों को संतुष्ट करते हैं।

एक वैकल्पिक कॉम्पैक्ट कीबोर्ड ड्रैग मोड बार-बार Tab दबाने को कम कर सकता है। ड्रैग हैंडल पर फ़ोकस करें और शुरू करने के लिए Enter या Space दबाएं; Arrow Up और Arrow Down उम्मीदवार स्थिति बदलते हैं; Enter या Space कमिट करता है; Escape रद्द करता है और स्नैपशॉट को पुनर्स्थापित करता है। इन निर्देशों को हैंडल द्वारा संदर्भित टेक्स्ट में रखें ताकि उपयोगकर्ता उन्हें खोज सकें। यदि आइटम चयन का भी समर्थन करता है, तो चयन और रीऑर्डर कमांड को अलग रखें ताकि Space का एक ही फ़ोकस लक्ष्य पर दो अर्थ न हों।

इंटरैक्शन को एक अल्पकालिक (short-lived) सत्र के रूप में प्रस्तुत करें। शुरुआत में, itemId, इनपुट प्रकार, मूल क्रम और वर्तमान उम्मीदवार इंडेक्स संग्रहीत करें। पॉइंटर या कीबोर्ड मूवमेंट केवल moveItem के माध्यम से उम्मीदवार को अपडेट करता है। कमिट एक पर्सिस्टेंस अनुरोध और एक घोषणा उत्पन्न करता है। रद्द करना मूल क्रम को पुनर्स्थापित करता है और कैंसिलेशन की घोषणा करता है। एक नए सर्वर रिस्पॉन्स को केवल इसलिए एक नए सत्र को ओवरराइट करने की अनुमति नहीं दी जानी चाहिए क्योंकि उसका अनुरोध बाद में समाप्त हुआ था।

पॉइंटर इनपुट के लिए, पूरी पंक्ति को ड्रैग करने योग्य बनाने के बजाय एक स्पष्ट हैंडल का उपयोग करें। यह ड्रैग को लिंक, चेकबॉक्स, टेक्स्ट चयन या स्क्रॉलिंग से क्लिक छीनने से रोकता है। यदि Pointer Events के साथ इन-पेज सॉर्टिंग लागू कर रहे हैं, तो एक छोटे मूवमेंट थ्रेशोल्ड की प्रतीक्षा करें, पॉइंटर को कैप्चर करें, आइटम मिडपॉइंट्स से उम्मीदवार स्थिति की गणना करें, एक गैर-रंग-केवल सम्मिलन संकेतक को उजागर करें, और pointerup, pointercancel, खोए हुए कैप्चर, स्क्रॉलिंग और सूची के बाहर एक ड्रॉप को संभालें। जब टच सेंसर, ऑटो-स्क्रॉल, टकराव का पता लगाना (collision detection), नेस्टेड स्क्रॉल कंटेनर और सहायक-तकनीक व्यवहार सभी आवश्यकताएं हों तो एक परीक्षण की गई ड्रैग लाइब्रेरी बेहतर होती है।

नेटिव HTML ड्रैग एंड ड्रॉप डेस्कटॉप या क्रॉस-एप्लिकेशन डेटा ट्रांसफर के लिए उचित हो सकता है, लेकिन यह कीबोर्ड या स्क्रीन-रीडर रीऑर्डर वर्कफ़्लो की आपूर्ति नहीं करता है। इसका इवेंट मॉडल स्पष्ट वैध ड्रॉप लक्ष्यों की भी मांग करता है और ड्रैग के दौरान अन्य डिवाइस इनपुट इवेंट्स को दबा देता है। इसे चुनने से मूव कंट्रोल्स, फ़ोकस व्यवहार, घोषणाओं या टच सत्यापन की आवश्यकता समाप्त नहीं होती है।

दृश्य और सेमेंटिक्स दोनों के माध्यम से परिणामों को संप्रेषित करें। उम्मीदवार सम्मिलन बिंदु को रंग के साथ-साथ आकार या बॉर्डर के साथ दिखाएं, एक दृश्यमान फ़ोकस संकेतक रखें, और रिड्यूस्ड-मोशन प्राथमिकताओं का सम्मान करें। जानबूझकर कीबोर्ड चाल, कमिट, रद्द करने और विफलताओं के बाद छोटे संदेशों के लिए एक पर्सिस्टेंट विनम्र (polite) स्टेटस क्षेत्र का उपयोग करें। "Moved Review to position 2 of 5" जैसा संदेश आइटम, परिणाम, स्थिति और कुल संख्या को वहन करता है। प्रत्येक पॉइंटर होवर की घोषणा न करें, और लाइव क्षेत्र को उसके संदेश के समान समय पर फिर से न बनाएं।

अप्रचलित ड्रैग सेमेंटिक्स से बचें। WAI-ARIA 1.2 ने aria-grabbed और aria-dropeffect को बहिष्कृत (deprecated) के रूप में चिह्नित किया है। नेटिव तत्व, एक्सेसिबल नाम, वर्णनात्मक निर्देश, टेक्स्ट में व्यक्त की गई वर्तमान स्थिति और परीक्षण की गई घोषणाएं अधिक विश्वसनीय अनुबंध प्रदान करते हैं। ARIA गायब कीबोर्ड व्यवहार या गायब क्लिक विकल्प को नहीं जोड़ता है।

रिमोट पर्सिस्टेंस के लिए, स्टेबल ऑर्डर्ड IDs या एक मूव कमांड के साथ वह वर्शन भेजें जिसे क्लाइंट ने संपादित किया था। परिणाम का आशावादी रूप से (optimistically) पूर्वावलोकन करें, कीबोर्ड फ़ोकस को अवरुद्ध किए बिना सेविंग स्थिति को उजागर करें, और केवल चुनी गई उत्पाद नीति के तहत घोषणा को कमिट करें। नेटवर्क विफलता पर, या तो Retry के साथ स्थानीय पेंडिंग क्रम को बनाए रखें या स्नैपशॉट पर वापस रोल करें और रोलबैक की घोषणा करें। वर्शन संघर्ष पर, वर्तमान क्रम प्राप्त करें और उपयोगकर्ता से पुनः प्रयास करने या एक परिभाषित मर्ज लागू करने के लिए कहें; किसी अन्य क्लाइंट के क्रम को चुपचाप ओवरराइट करना कोई रिकवरी रणनीति नहीं है।

सत्यापन शुद्ध कमांड से शुरू होता है। पहले, अंतिम, आसन्न (adjacent), समान-स्थिति, अज्ञात-ID, और सीमा से बाहर (out-of-range) चालों का परीक्षण करें। उत्पन्न इनपुट के लिए, दावा करें कि आउटपुट में समान संख्या के साथ समान IDs हैं और केवल अनुरोधित सापेक्ष आंदोलन है। फिर एक इंटरैक्शन मैट्रिक्स चलाएं:

• माउस ड्रैग, टच ड्रैग, केवल-क्लिक नियंत्रण, और सूची के बाहर एक ड्रॉप;
• केवल-कीबोर्ड चाल, कमिट, सीमा क्रिया, और Escape कैंसिलेशन;
• प्रत्येक रेंडर और रोलबैक के बाद स्थानांतरित आइटम के हैंडल पर फ़ोकस बना रहना;
• Safari के साथ VoiceOver और Firefox या Chrome के साथ NVDA आइटम, निर्देश, नई स्थिति, कैंसिलेशन और सेव विफलता की एक बार घोषणा करते हुए;
• 200% ज़ूम, फोर्स्ड कलर्स, उच्च कंट्रास्ट, रिड्यूस्ड मोशन, लंबे लेबल, स्क्रॉलिंग और RTL लेआउट;
• विलंबित सफलता, अनुरोध रीऑर्डरिंग, ऑफ़लाइन विफलता, पुनः प्रयास और वर्शन संघर्ष।

स्वचालित एक्सेसिबिलिटी उपकरण गायब नाम, अमान्य विशेषताओं और कुछ फ़ोकसबिलिटी समस्याओं को पकड़ सकते हैं। वे यह निर्णय नहीं ले सकते कि कीबोर्ड मॉडल खोजने योग्य है या नहीं, बोला गया क्रम सुसंगत है या नहीं, या टच-स्क्रीन रीडर कार्य पूरा कर सकता है या नहीं। उनके लिए मैन्युअल उपयोग की आवश्यकता होती है।

उच्च-गुणवत्ता वाला नमूना उत्तर

"मैं आइटम पहचान को ऐरे स्थिति से स्वतंत्र रखूँगा। रिड्यूसर एक आइटम ID और एक अंतिम इंडेक्स स्वीकार करता है, एक नया क्रमपरिवर्तन लौटाता है, और क्रम बदलने की अनुमति वाला एकमात्र कोड है। पॉइंटर ड्रैग, Move up या Move down बटन, और कोई भी कीबोर्ड ड्रैग मोड सभी उसी समान कमांड को डिस्पैच करते हैं।

सेमेंटिक बेसलाइन नेटिव बटनों के साथ एक ऑर्डर्ड लिस्ट होगी। प्रत्येक पंक्ति में एक स्पष्ट रीऑर्डर हैंडल और दृश्यमान मूवमेंट नियंत्रण होते हैं जिनके एक्सेसिबल नामों में आइटम लेबल शामिल होता है। मूवमेंट नियंत्रण मायने रखते हैं क्योंकि कीबोर्ड समर्थन और ड्रैगिंग के लिए एक क्लिक-या-टैप विकल्प अलग-अलग आवश्यकताएं हैं। मैं aria-grabbed या aria-dropeffect पर निर्भर नहीं रहूँगा; दोनों बहिष्कृत हैं।

जब कोई रीऑर्डर शुरू होता है, तो मैं मूल क्रम और सक्रिय आइटम ID रखता हूँ। पॉइंटर हिट टेस्टिंग या एरो कीज़ केवल एक उम्मीदवार स्थिति को अपडेट करती हैं। कमिट एक सेव भेजता है और घोषणा करता है, उदाहरण के लिए, 'Moved Review to position 2 of 5.' Escape, pointercancel, एक अमान्य ड्रॉप, या चुना गया सेव-विफलता नियम स्नैपशॉट को पुनर्स्थापित करता है। DOM क्रम बदलने के बाद स्टेबल React कीज़ उसी हैंडल को फ़ोकस में रखती हैं।

पॉइंटर सॉर्टिंग के लिए मैं एक समर्पित हैंडल, मूवमेंट थ्रेशोल्ड, पॉइंटर कैप्चर, स्पष्ट इंसर्शन इंडिकेटर, ऑटो-स्क्रॉल व्यवहार और कैंसिलेशन क्लीनअप का उपयोग करूँगा। यदि टच, नेस्टेड स्क्रॉलिंग और क्रॉस-ब्राउज़र टकराव से निपटने की आवश्यकता है, तो मैं केवल इसके कीबोर्ड और स्क्रीन-रीडर व्यवहार की जांच करने के बाद ही एक परीक्षण की गई लाइब्रेरी चुनूंगा; केवल माउस डेमो पर्याप्त नहीं है।

मैं क्रमपरिवर्तन अपरिवर्तनीय का यूनिट-परीक्षण करूँगा और फिर माउस, टच, कीबोर्ड, केवल-क्लिक नियंत्रण, VoiceOver और NVDA द्वारा कार्य को मैन्युअल रूप से पूरा करूँगा। मैं फ़ोकस, Escape, ड्रॉप आउटसाइड, रिड्यूस्ड मोशन, फोर्स्ड कलर्स, विलंबित सेव, पुराने रिस्पॉन्स और वर्शन संघर्षों का भी परीक्षण करूँगा। यह वास्तविक इंटरैक्शन अनुबंध को सत्यापित करता है; अकेले एक स्वचालित स्कैन अपर्याप्त है।"

सामान्य गलतियाँ

• ऐरे इंडेक्स को कीज़ के रूप में उपयोग करना → रीऑर्डर करने से पहचान, फ़ोकस और आइटम-स्थानीय स्थिति बदल जाती है → कीज़ और कमांड्स के लिए स्टेबल आइटम IDs का उपयोग करें।
• ड्रैग को एकमात्र इंटरैक्शन बनाना → जो उपयोगकर्ता पॉइंटर को पकड़ और हिला नहीं सकते वे रीऑर्डर नहीं कर सकते → समान परिणामों के साथ दृश्यमान क्लिक या टैप नियंत्रण प्रदान करें।
• एरो कीज़ जोड़ना और दावा करना कि सभी आवश्यकताएं पूरी हो गई हैं → केवल कीबोर्ड समानता में अभी भी गैर-ड्रैगिंग सिंगल-पॉइंटर विधि की कमी हो सकती है → कीबोर्ड और ड्रैगिंग-मूवमेंट आवश्यकताओं का स्वतंत्र रूप से आकलन करें।
• पूरी पंक्ति में ड्रैग लिसनर्स संलग्न करना → लिंक, चयन, चेकबॉक्स और स्क्रॉलिंग रीऑर्डर के साथ संघर्ष करते हैं → एक स्पष्ट फ़ोकसेबल हैंडल का उपयोग करें।
• प्रत्येक इनपुट के लिए अलग-अलग रीऑर्डर एल्गोरिदम लागू करना → माउस, टच और कीबोर्ड अलग-अलग एज केस उत्पन्न करते हैं → प्रत्येक इनपुट को एक स्टेबल-ID कमांड पर रूट करें।
• ऐरे या DOM को सीधे म्यूटेट करना → रेंडर की गई स्थिति और सहेजी गई स्थिति भिन्न हो जाती है → स्टेट ओनर से एक नया क्रमपरिवर्तन लौटाएं।
• एक्सेसिबिलिटी योजना के रूप में aria-grabbed और aria-dropeffect का उपयोग करना → विशेषताएँ बहिष्कृत हैं और कोई इंटरैक्शन नहीं जोड़ती हैं → नेटिव नियंत्रण, निर्देश, स्थिति, फ़ोकस और परीक्षण की गई घोषणाओं का उपयोग करें।
• प्रत्येक पॉइंटर मूवमेंट की घोषणा करना → लाइव क्षेत्र शोरगुल वाला और विलंबित हो जाता है → जानबूझकर कीबोर्ड चरणों और अंतिम परिणामों की घोषणा करें, पॉइंटर पिक्सेल की नहीं।
• रीऑर्डर के बाद फ़ोकस को सूची की शुरुआत में ले जाना → उपयोगकर्ता अपना स्थान खो देते हैं → स्टेबल आइटम ID द्वारा फ़ोकस बनाए रखें या पुनर्स्थापित करें।
• प्रत्येक होवर स्थिति को सहेजना → नेटवर्क रेस पुरानी मध्यवर्ती स्थितियों को लागू कर सकती है → वर्शन पूर्व शर्त के साथ एक कमिटेड चाल को पर्सिस्ट करें।
• केवल स्वचालित ऑडिट पर भरोसा करना → यह बोले गए निर्देशों या संपूर्ण इनपुट फ़्लो को मान्य नहीं कर सकता → वास्तविक कीबोर्ड, टच और स्क्रीन रीडर्स के साथ परीक्षण करें।

फ़ॉलो-अप प्रश्न और उत्तर

फ़ॉलो-अप 1: जब सूची वर्चुअलाइज़्ड हो तो क्या बदलता है?

माउंटेड DOM पंक्तियों को संपूर्ण संग्रह न मानें। डेटा मॉडल में मूवमेंट, कुल गिनती और उम्मीदवार स्थिति रखें। गंतव्य ऑफ-स्क्रीन होने पर भी कीबोर्ड कमांड तार्किक इंडेक्स द्वारा स्थानांतरित हो सकते हैं, फिर स्थानांतरित आइटम को उसके फ़ोकस लक्ष्य को खोए बिना दृश्य में स्क्रॉल करें। पॉइंटर मूवमेंट के लिए मॉडल-अवेयर हिट टेस्टिंग और ऑटो-स्क्रॉल की आवश्यकता होती है। यदि लाइब्रेरी वर्चुअलाइज़ेशन के माध्यम से सटीक संग्रह सेमेंटिक्स या स्टेबल फ़ोकस को उजागर नहीं कर सकती है, तो मापे गए पैमाने पर एक गैर-वर्चुअलाइज़्ड एक्सेसिबल मोड सुरक्षित समझौता हो सकता है।

फ़ॉलो-अप 2: आप कई चयनित आइटम्स को कैसे स्थानांतरित करेंगे?

स्टेबल IDs का एक ऑर्डर्ड सेट स्टोर करें, उनके सापेक्ष क्रम को सुरक्षित रखें, उन्हें एक समूह के रूप में हटाएं, और समूह को एक अंतिम सीमा पर डालें। घोषणा में आइटमों की संख्या और गंतव्य शामिल हैं। चयन और ड्रैग हैंडल को अलग-अलग कमांड की आवश्यकता होती है, खासकर जब Space पहले से ही चयन को टॉगल करता है। लॉक किए गए आइटम्स वाले मिश्रित चयन को अस्वीकार करें या ठीक से परिभाषित करें कि कौन से आइटम रहते हैं; चयन के केवल एक हिस्से को चुपचाप स्थानांतरित करना अस्पष्ट है।

फ़ॉलो-अप 3: क्या होगा यदि दो क्लाइंट एक ही सूची को समवर्ती रूप से रीऑर्डर करते हैं?

मूव अनुरोध के साथ एक सूची वर्शन या ETag संलग्न करें। सर्वर चाल को केवल तभी स्वीकार करता है जब वर्शन मेल खाता हो। संघर्ष पर, वर्तमान क्रम प्राप्त करें, संदर्भ के रूप में उपयोगकर्ता के इच्छित आइटम और गंतव्य को बनाए रखें, और पुनः प्रयास की पेशकश करें या एक प्रलेखित मर्ज नियम लागू करें। लास्ट-राइट-विन्स (Last-write-wins) केवल तभी स्वीकार्य है जब उत्पाद स्पष्ट रूप से किसी अन्य उपयोगकर्ता के ऑर्डरिंग निर्णय को खोना स्वीकार करता है।

फ़ॉलो-अप 4: क्या आप नेटिव HTML ड्रैग एंड ड्रॉप, Pointer Events, या किसी लाइब्रेरी का उपयोग करेंगे?

नेटिव ड्रैग एंड ड्रॉप डेस्कटॉप और बाहरी डेटा ट्रांसफर के लिए उपयोगी है, लेकिन यह पूर्ण कीबोर्ड और सहायक-तकनीक वर्कफ़्लो प्रदान नहीं करता है। Pointer Events इन-पेज टच और माउस सॉर्टिंग के लिए नियंत्रण प्रदान करते हैं लेकिन इसके लिए टकराव का पता लगाने, कैप्चर, ऑटो-स्क्रॉल और क्लीनअप की आवश्यकता होती है। एक लाइब्रेरी सबसे अच्छा विकल्प है जब वे व्यवहार पहले से ही परीक्षण किए गए हों, बशर्ते इसका वास्तविक कीबोर्ड, टच-स्क्रीन रीडर, फ़ोकस और DOM सेमेंटिक्स उत्पाद के सत्यापन मैट्रिक्स को पास करते हों। सेंसर की पसंद के बावजूद मूवमेंट नियंत्रण और कैनोनिकल रीऑर्डर कमांड बने रहते हैं।

फ़ॉलो-अप 5: क्या होगा यदि उपयोगकर्ता के काम जारी रखने के बाद सेव विफल हो जाता है?

प्रत्येक कमिटेड रीऑर्डर को क्लाइंट अनुक्रम और सर्वर वर्शन के साथ टैग करें जिस पर वह आधारित था। एक देर से हुई विफलता केवल उस अनुरोध से प्राप्त स्थिति को वापस रोल कर सकती है; इसे पुराने स्नैपशॉट के साथ एक नए पुष्ट क्रम को प्रतिस्थापित नहीं करना चाहिए। सबसे सरल सुरक्षित नीति सेव को क्रमबद्ध (serialize) करना, एक स्पष्ट पेंडिंग क्रम रखना, और फ़ोकस और पढ़ने की अनुमति देते हुए दूसरे कमिट को ब्लॉक करना है। अधिक प्रतिक्रियाशील कतार को उचित ठहराने से पहले रीबेस और संघर्ष परीक्षणों की आवश्यकता होती है।