`বিস্তারিত` বিষয়ে আরো বিস্তারিত

চারপাশে অনেক বকাবকি <details> এবং <summary> উপাদান ইদানীং! আমি দেখেছিলাম Lea Verou সম্প্রতি একটি পর্যবেক্ষণ টুইট উপাদান সম্পর্কে display আচরণ এবং সেই ধরণেরটি আরও বেশি পর্যবেক্ষণ এবং ব্যবহারের নোটে বিভক্ত হয়েছে, যার মধ্যে একটি পুনরুজ্জীবিত আলোচনা কিনা <summary> ইন্টারেক্টিভ উপাদান ধারণ করার অনুমতি দেওয়া উচিত বা না।

সংযোগ করার জন্য অনেকগুলি বিন্দু আছে এবং আমি এখানে আমার যথাসাধ্য চেষ্টা করব।

আমরা কি নেস্ট করা উপাদানগুলির প্রদর্শন পরিবর্তন করতে পারি? <details> উপাদান?

আমি যে অ্যাপটি তৈরি করছি, আমি ব্যবহার করছি প্যানেলের জন্য কিন্তু কিছু আকারের অদ্ভুততার মধ্যে পড়েছিল।
flexbox: https://t.co/noZvxAN35G
গ্রিড: https://t.co/pis0lPjvXk
প্রথমে আমি ভেবেছিলাম এটি একটি বাগ, কিন্তু তিনটি ইঞ্জিনই একমত। এর জন্য UA স্টাইলশীটে কিছুই নেই এটা ব্যাখ্যা মনে হয়.

— Lea Verou (@LeaVerou) আগস্ট 28, 2022

সুপার অদ্ভুত! যদি আমরা DevTools ওপেন ক্র্যাক করি, ব্যবহারকারী এজেন্ট স্টাইলশীট আমাদের বলে <details> একটি ব্লক উপাদান হিসাবে প্রদর্শিত হয়.

প্রয়োজনীয় লক্ষ্য করুন <summary> উপাদান এবং দুটি অতিরিক্ত <div>সেখানে আছে। আমরা ওভাররাইড করতে পারেন displayঠিক আছে?

আমরা কি আশা করতে পারে যে <details> এখন একটি সুস্পষ্ট উচ্চতা আছে 40vh এবং তিনটি সারি যেখানে তৃতীয় সারি প্রথম দুটি থেকে অবশিষ্ট অবশিষ্ট স্থান গ্রহণ করে। এটার মত:

উফ, কিন্তু তৃতীয় সারিটি করে না... তা...

স্পষ্টতই আমরা যা নিয়ে কাজ করছি তা হল একটি গ্রিড ধারক যা তার গ্রিড আইটেমগুলিতে গ্রিড আচরণ প্রয়োগ করতে অক্ষম। কিন্তু এইচটিএমএল স্পেক আমাদের বলে:

সার্জারির  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> উপাদান:

এটি অনুপস্থিত একটি অনুপস্থিত যখন বৈশিষ্ট প্রস্তাবিত ঠিক কি করে <summary> - এটি তার নিজের তৈরি করে:

প্রথম summary উপাদানের শিশু, যদি কোন, প্রতিনিধিত্ব করে বিবরণের সারাংশ বা কিংবদন্তি। যদি সন্তান না থাকে summary উপাদান, ব্যবহারকারী এজেন্টকে তার নিজস্ব কিংবদন্তি প্রদান করা উচিত (যেমন "বিশদ বিবরণ")।

(জোর আমার)

মেলানিয়া একটি এইচটিএমএল ভ্যালিডেটরের মাধ্যমে এটি চালিয়েছিলেন এবং - অবাক! - এটা অবৈধ:

সুতরাং, <details> প্রয়োজন <summary>. এবং কখন <summary> অনুপস্থিত, <details> এটি নিজের তৈরি করে, যদিও এটি অবৈধ মার্কআপ হিসাবে রিলে করা হয়েছে। এটা সব hunky-dory এবং বৈধ যখন <summary> আছে:

যার সবই একটি নতুন প্রশ্নের দিকে নিয়ে যায়: কেন <summary> একটি অন্তর্নিহিত দেওয়া button ভূমিকা যখন <details> কি ইন্টারেক্টিভ উপাদান বলে মনে হচ্ছে? সম্ভবত এটি অন্য ক্ষেত্রে যেখানে ব্রাউজার বাস্তবায়ন ভুল? তারপর আবার, বৈশিষ্ট উভয় হিসাবে শ্রেণীবদ্ধ না ইন্টারেক্টিভ উপাদান. আপনি দেখতে পাচ্ছেন যে এই সমস্তটি কতটা বিভ্রান্তিকর হয়ে উঠেছে।

যেভাবেই হোক, মেলানিয়ার চূড়ান্ত উপসংহার যে আমাদের ব্যবহার করা এড়ানো উচিত <details> মেনুর জন্য সহায়ক প্রযুক্তি কীভাবে পড়ে এবং ঘোষণা করে তার উপর ভিত্তি করে <details> যা ইন্টারেক্টিভ উপাদান ধারণ করে। উপাদানটি ঘোষণা করা হয়েছে, তবে এর বাইরে ইন্টারেক্টিভ নিয়ন্ত্রণের কোন উল্লেখ নেই যতক্ষণ না আপনি, এর, গর্ভনাটিকা সঙ্গে <details>. তবেই লিঙ্কের তালিকার মতো কিছু ঘোষণা করা হবে।

এছাড়াও, একটি ধসে ভিতরে বিষয়বস্তু <details> ইন-পেজ অনুসন্ধান থেকে বাদ দেওয়া হয়েছে (ক্রোমিয়াম ব্রাউজারগুলি ছাড়া, যা লেখার সময় ভেঙে পড়া সামগ্রী অ্যাক্সেস করতে পারে), জিনিসগুলি খুঁজে পাওয়া আরও কঠিন করে তোলে৷

উচিত <summary> ইন্টারেক্টিভ উপাদান অনুমতি?

যে প্রশ্ন করা হয় এই খোলা থ্রেড. ধারণা হল এই মত কিছু অবৈধ হবে:

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

<!-- or -->

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

স্কট ও'হারা সুন্দরভাবে যোগ করা কেন এই একটি সমস্যা:

ভার্চুয়াল কার্সার দিয়ে নেভিগেট করার সময় লিঙ্কটি JAWS-এ মোটেও আবিষ্কারযোগ্য নয়। ট্যাব কী এর মাধ্যমে সারাংশ উপাদানে নেভিগেট করলে, JAWS উপাদানটির নাম এবং ভূমিকা হিসাবে "উদাহরণ পাঠ, বোতাম" ঘোষণা করে। যদি আবার ট্যাব কী টিপে, JAWS আবার "উদাহরণ পাঠ, বোতাম" ঘোষণা করে যদিও কীবোর্ড ফোকাস লিঙ্কটিতে থাকে।

[...]

সারাংশের জন্য বিষয়বস্তু মডেলের সাথে বিভিন্ন AT-এর বিভিন্ন সমস্যা নিয়ে আমি আরও অনেক কিছু নিয়ে যেতে পারি… তবে এটি এই মন্তব্যটিকে প্রয়োজনীয়তার বাইরে বাড়িয়ে দেবে। tldr; সারাংশ কন্টেন্ট মডেল AT ব্যবহার করা লোকেদের জন্য খুব অসংলগ্ন এবং কখনও কখনও কেবল ভাঙা অভিজ্ঞতা তৈরি করে।

এই আচরণ সংশোধন করার জন্য স্কট টিকিট খুলেছিলেন ক্রৌমিয়াম এবং ওয়েবকিট. ধন্যবাদ, স্কট!

তবুও, এটি বৈধ HTML:

স্কট আরো যায় ক পৃথক ব্লগ পোস্ট. উদাহরণস্বরূপ, তিনি ব্যাখ্যা করেন কিভাবে থাপ্পড় role=button on <summary> সহায়ক প্রযুক্তি দ্বারা ধারাবাহিকভাবে ঘোষণা করা হয়েছে তা নিশ্চিত করার জন্য এটি একটি যুক্তিসঙ্গত সমাধান বলে মনে হতে পারে। সেটা নিয়েও বিতর্ক মিটবে কিনা <summary> ইন্টারেক্টিভ উপাদান অনুমতি দেওয়া উচিত কারণ বোতামে ইন্টারেক্টিভ উপাদান থাকতে পারে না. একমাত্র সমস্যা সাফারি তখন চিকিৎসা করে <summary> একটি আদর্শ বোতাম হিসাবে, যা তার হারায় expanded এবং collapsed রাজ্যগুলি তাই সঠিক ভূমিকা ঘোষণা করলেও এখন তার রাজ্য নেই। 🙃

যেখানে আমরা এখন যান?

আপনি ব্যবহার করতে ভয় পান <details>/<summary> এই সমস্যা এবং অসঙ্গতি সব সঙ্গে? আমি নিশ্চিত, তবে কেবলমাত্র নিশ্চিত করার জন্য যে এতে যা আছে তা ব্যবহারকারীদের জন্য সঠিক ধরণের অভিজ্ঞতা এবং প্রত্যাশা সরবরাহ করে।

আমি আনন্দিত যে এই কথোপকথনগুলি ঘটছে এবং সেগুলি খোলামেলা হচ্ছে৷ যে কারণে, আপনি কন্টেন্ট মডেল কিভাবে জন্য স্কটের তিনটি প্রস্তাবিত সমাধান মন্তব্য করতে পারেন <summary> সংজ্ঞায়িত করা হয়েছে, তার টিকিট আপভোট করুন, এবং আপনার নিজের সমস্যাগুলি রিপোর্ট করুন এবং আপনি এটিতে থাকাকালীন কেসগুলি ব্যবহার করুন৷ আশা করি, উপাদানগুলি কীভাবে ব্যবহার করা হয় এবং আমরা সেগুলি কী আশা করি তা আমরা যত ভালভাবে বুঝতে পারি, ততই ভালভাবে প্রয়োগ করা হয়।