`تفصیلات` پر مزید تفصیلات

او ایل کے ارد گرد بہت چہچہانا <details> اور <summary> عناصر حال ہی میں! میں نے دیکھا لی ویرو نے حال ہی میں ایک مشاہدہ ٹویٹ کیا۔ عنصر کے بارے میں display سلوک اور اس طرح لوگوں کے مزید مشاہدات اور استعمال کے نوٹوں میں تقسیم ہو گیا، بشمول a بحث کو بحال کیا موسم پر <summary> انٹرایکٹو عناصر پر مشتمل ہونے کی اجازت ہونی چاہئے یا نہیں۔

جڑنے کے لیے بہت سارے نقطے ہیں اور میں یہاں بالکل ایسا کرنے کی پوری کوشش کروں گا۔

کیا ہم عناصر کے ڈسپلے کو تبدیل کر سکتے ہیں۔ <details> عنصر؟

میں جو ایپ بنا رہا ہوں، اس میں استعمال کر رہا ہوں۔ پینلز کے لیے لیکن کچھ عجیب و غریب سائز کا سامنا کرنا پڑا۔
فلیکس باکس: https://t.co/noZvxAN35G
گرڈ: https://t.co/pis0lPjvXk
پہلے میں نے سوچا کہ یہ ایک بگ ہے، لیکن تینوں انجن متفق ہیں۔ کے لیے UA اسٹائل شیٹ میں کچھ نہیں ہے۔ اس کی وضاحت کرنے لگتا ہے.

— لی ویرو (@ لی ویرو) اگست 28، 2022

سپر عجیب! اگر ہم کھلے DevTools کو کریک کرتے ہیں، تو صارف ایجنٹ کی اسٹائل شیٹ ہمیں بتاتی ہے۔ <details> ایک بلاک عنصر کے طور پر ظاہر ہوتا ہے۔

ضرورت پر توجہ دیں۔ <summary> عنصر اور دو اضافی <div>وہاں ہے. ہم اوور رائیڈ کر سکتے ہیں۔ displayٹھیک ہے

ہم جس چیز کی توقع کر سکتے ہیں وہ ہے۔ <details> اب ایک واضح اونچائی ہے 40vh اور تین قطاریں جہاں تیسری قطار پہلے دو سے باقی بچا ہوا جگہ لے لیتی ہے۔ اس طرح:

اوہ، لیکن تیسری قطار نہیں کرتی… ایسا کرتی ہے۔

بظاہر ہم جس کے ساتھ معاملہ کر رہے ہیں وہ ایک گرڈ کنٹینر ہے جو گرڈ کے رویے کو اپنی گرڈ آئٹمز پر لاگو کرنے سے قاصر ہے۔ لیکن HTML قیاس ہمیں بتاتا ہے:

۔ details عنصر ہے ایک کے طور پر پیش کرنے کی توقع ہے۔ بلاک باکس. عنصر کے اندرونی ہونے کی بھی توقع ہے۔ سایہ دار درخت دو کے ساتھ سلاٹ.

(زور میرا)

اور تھوڑی دیر بعد:

۔ details عنصر کا دوسرا سلاٹ اس کی توقع ہے style وصف مقرر "display: block; content-visibility: hidden;"جب details عنصر میں ایک نہیں ہے۔ open وصف. جب اس کے پاس ہوتا ہے۔ open وصف، style انتساب کو دوسرے سے ہٹانے کی توقع ہے۔ سلاٹ.

(میرا زور، دوبارہ)

لہذا، قیاس دوسری سلاٹ کہتا ہے - دو اضافی <div>s مثال سے - صرف اس وقت مجبور کیا جاتا ہے جب بلاک عناصر ہوں۔ <details> بند ہے. جب یہ کھلتا ہے - <details open> — انہیں گرڈ ڈسپلے کے مطابق ہونا چاہیے جو صارف ایجنٹ کے اسٹائل کو اوور رائیڈ کرتا ہے… ٹھیک ہے؟

یہی بحث ہے۔ میں سمجھ گیا slots سیٹ کر رہے ہیں display: contents پہلے سے طے شدہ، لیکن گھریلو عناصر کو سلاٹ میں جام کرنا اور انہیں اسٹائل کرنے کی صلاحیت کو ہٹانا بند لگتا ہے۔ کیا یہ کوئی خاص مسئلہ ہے کہ مشمولات سلاٹ ہیں، یا براؤزر کا مسئلہ جسے ہم اوور رائڈ نہیں کر سکتے display اگرچہ وہ باکس کے درخت میں ہیں؟ ہوشیار لوگ مجھے روشن کر سکتے ہیں لیکن ایسا لگتا ہے کہ یہ ایک غلط عمل ہے۔

Is <details> ایک کنٹینر یا ایک انٹرایکٹو عنصر؟

بہت سارے لوگ ہیں۔ کا استعمال کرتے ہوئے <details> مینو ٹوگل کرنے کے لیے کھلا اور بند. یہ ایک مشق ہے۔ GitHub کی طرف سے مقبول.

معقول لگتا ہے۔ قیاس یقینی طور پر اس کی اجازت دیتا ہے:

۔ details عنصر کی نمائندگی کرتا ہے ایک انکشاف ویجیٹ جس سے صارف اضافی معلومات حاصل کر سکتا ہے۔ یا کنٹرول.

(زور میرا)

ٹھیک ہے، تو ہم اس کی توقع کر سکتے ہیں۔ <details> کنٹینر ہے (اس میں ایک ہے۔ ضمیر role=group) اور <summary> ایک انٹرایکٹو عنصر ہے جو کنٹینر کا تعین کرتا ہے۔ open حالت. تب سے سمجھ میں آتا ہے۔ <summary> ایک مضمر ہے button کردار کچھ سیاق و سباق میں (لیکن کوئی متعلقہ WAI-ARIA کردار نہیں)۔

لیکن میلانیا سمنر نے کچھ کھدائی کی۔ جو نہ صرف اس سے متصادم معلوم ہوتا ہے، بلکہ اس نتیجے پر پہنچتا ہے کہ استعمال کرنا <details> ایک مینو کے طور پر شاید سب سے اچھی چیز نہیں ہے۔ دیکھیں کب کیا ہوتا ہے۔ <details> کے بغیر پیش کیا جاتا ہے۔ <summary> عنصر:

یہ بالکل وہی کرتا ہے جو قیاس کی تجویز کرتا ہے جب اس میں a غائب ہو۔ <summary> - یہ اپنا بناتا ہے:

سب سے پہلے summary عنصر کا بچہ، اگر کوئی, کی نمائندگی کرتا ہے تفصیلات کا خلاصہ یا افسانہ۔ اگر کوئی بچہ نہ ہو۔ summary عنصر، صارف ایجنٹ کو اپنا لیجنڈ فراہم کرنا چاہیے (مثلاً "تفصیلات")۔

(زور میرا)

میلانیا نے اسے ایک HTML توثیق کار کے ذریعے چلایا اور - حیرت! - یہ غلط ہے:

تو <details> کی ضرورت ہے <summary>. اور کب <summary> لاپتہ ہے، <details> اس کا اپنا بناتا ہے، حالانکہ اسے غلط مارک اپ کے طور پر پیش کیا جاتا ہے۔ یہ سب ہنکی ڈوری اور درست ہے جب <summary> وہاں ہے:

یہ سب ایک نئے سوال کی طرف لے جاتے ہیں: کیوں ہے <summary> ایک مضمر دیا button کردار جب <details> کیا انٹرایکٹو عنصر ظاہر ہوتا ہے؟ شاید یہ ایک اور معاملہ ہے جہاں براؤزر کا نفاذ غلط ہے؟ پھر، قیاس دونوں کو درجہ بندی کرتا ہے۔ انٹرایکٹو عناصر. آپ دیکھ سکتے ہیں کہ یہ سب کتنا الجھتا ہے۔

بہر حال، میلانیا کا حتمی نتیجہ کہ ہمیں استعمال کرنے سے گریز کرنا چاہیے۔ <details> مینو کے لیے اس بات پر مبنی ہے کہ کس طرح معاون ٹیک پڑھتی اور اعلان کرتی ہے۔ <details> جس میں انٹرایکٹو عناصر ہوتے ہیں۔ عنصر کا اعلان کیا گیا ہے، لیکن اس سے آگے انٹرایکٹو کنٹرولز کا کوئی ذکر نہیں ہے جب تک کہ آپ، er، بات چیت ساتھ <details>. اس کے بعد ہی کچھ لنکس کی فہرست کا اعلان کیا جائے گا۔

اس کے علاوہ، ایک منہدم اندر مواد <details> صفحہ میں تلاش سے خارج ہے (سوائے Chromium براؤزرز کے، جو تحریر کے وقت منہدم مواد تک رسائی حاصل کر سکتے ہیں)، چیزوں کو تلاش کرنا مزید مشکل بنا دیتا ہے۔

ہونا چاہئے <summary> انٹرایکٹو عناصر کی اجازت دیں؟

یہی سوال سامنے آیا ہے۔ یہ کھلا دھاگہ. خیال یہ ہے کہ اس طرح کچھ غلط ہوگا:

<details>
  <summary><a href="...">Link element</a></summary>
</details>

<!-- or -->

<details>
  <summary><input></summary>
</details>

سکاٹ اوہارا اچھی طرح سے خلاصہ یہ ایک مسئلہ کیوں ہے:

لنک اپنے ورچوئل کرسر کے ساتھ نیویگیٹ کرتے وقت JAWS کے لیے بالکل بھی قابل دریافت نہیں ہوتا ہے۔ اگر ٹیب کلید کے ذریعے سمری عنصر پر جا رہے ہیں، تو JAWS عنصر کے نام اور کردار کے طور پر "مثال کے متن، بٹن" کا اعلان کرتا ہے۔ اگر ٹیب کی کو دوبارہ دباتے ہیں، تو JAWS دوبارہ "مثال کے متن، بٹن" کا اعلان کرتا ہے حالانکہ کی بورڈ کی توجہ لنک پر ہے۔

[...]

خلاصہ کے لیے مواد کے ماڈل کے ساتھ مختلف اے ٹی کو درپیش مختلف مسائل کے بارے میں میں مزید بہت کچھ کرسکتا ہوں… لیکن اس سے اس تبصرے کو ضرورت سے زیادہ بڑھا دیا جائے گا۔ tldr خلاصہ مواد کا ماڈل AT کا استعمال کرنے والے لوگوں کے لیے بہت متضاد اور بعض اوقات محض ٹوٹے ہوئے تجربات پیدا کرتا ہے۔

سکاٹ نے اس رویے کو درست کرنے کے لیے ٹکٹ کھولے۔ کرومیم اور ویب کٹ. شکریہ، سکاٹ!

پھر بھی، یہ درست HTML ہے:

اسکاٹ مزید آگے جاتا ہے۔ علیحدہ بلاگ پوسٹ۔. مثال کے طور پر، وہ بتاتا ہے کہ کس طرح تھپڑ مارنا ہے۔ role=button on <summary> یہ یقینی بنانے کے لیے ایک معقول حل کی طرح معلوم ہو سکتا ہے کہ معاون ٹیک کے ذریعے اس کا مسلسل اعلان کیا جائے۔ اس سے یہ بحث بھی ختم ہو جائے گی کہ آیا <summary> انٹرایکٹو عناصر کی اجازت دینی چاہئے کیونکہ بٹنوں میں انٹرایکٹو عناصر شامل نہیں ہوسکتے ہیں۔. مسئلہ صرف یہ ہے کہ سفاری پھر علاج کرتا ہے۔ <summary> ایک معیاری بٹن کے طور پر، جو اپنا کھو جاتا ہے۔ expanded اور collapsed ریاستوں لہٰذا، صحیح کردار کا اعلان کیا جاتا ہے، لیکن اب اس کی حالت نہیں ہے۔ 🙃

اب ہم کہاں جائیں؟

کیا آپ استعمال کرنے سے ڈرتے ہیں؟ <details>/<summary> ان تمام مسائل اور تضادات کے ساتھ؟ مجھے یقین ہے، لیکن صرف اتنا ہی یقینی بنانا ہے کہ اس میں جو کچھ ہے وہ صارفین کے لیے صحیح قسم کا تجربہ اور توقعات فراہم کرتا ہے۔

مجھے خوشی ہے کہ یہ بات چیت ہو رہی ہے اور یہ کھلے عام ہو رہی ہے۔ اس کی وجہ سے، آپ اسکاٹ کے تین مجوزہ حلوں پر تبصرہ کر سکتے ہیں کہ کس طرح مواد کا ماڈل <summary> کی تعریف کی گئی ہے، اس کے ٹکٹوں کو ووٹ دیں، اور اپنے مسائل کی اطلاع دیں اور کیسز استعمال کریں جب آپ اس پر ہوں۔ امید ہے کہ ہم جتنا بہتر سمجھیں گے کہ عناصر کس طرح استعمال کیے جاتے ہیں اور ہم ان سے کیا کرنے کی توقع رکھتے ہیں، اتنا ہی بہتر ان پر عمل درآمد کیا جاتا ہے۔