JavaScript ছাড়া ইন্টারঅ্যাকটিভ HTML — details, dialog আর popover

১ · নিজস্ব element কেন জেতে — div-এর “বাটন” আসলে কতটা অসম্পূর্ণ

একটি অনলাইন দোকানের কথা ভাবুন। পণ্যের পাতায় “সাধারণ প্রশ্ন” অংশে প্রশ্নে চাপ দিলে উত্তর খোলে। “অর্ডার বাতিল” চাপলে মাঝখানে একটি বাক্স আসে — “আপনি কি নিশ্চিত?” আর ওপরের কোণের “⋮” চাপলে একটি ছোট মেনু ভেসে ওঠে। এই তিনটি জিনিসকে বলে ইন্টারঅ্যাকটিভ (interactive) অংশ — পাঠকের কাজে সাড়া দেয়।

বহু বছর ধরে এগুলো বানানো হতো <div> আর JavaScript দিয়ে: একটি div, তাতে onclick, আর কিছু কোড যা অন্য div দেখায় বা লুকায়। মাউস দিয়ে চাপলে কাজ করে, দেখতেও ঠিক লাগে। তাহলে সমস্যা কোথায়?

সমস্যা হলো, সবাই মাউস ব্যবহার করেন না। কেউ শুধু কি-বোর্ড চালান — হাতে ব্যথা, ভাঙা মাউস, অথবা দ্রুত কাজের অভ্যাস। কেউ screen reader শোনেন। কেউ ফোনে বড় লেখা আর সুইচ ডিভাইস ব্যবহার করেন। এঁদের সবার জন্য ব্রাউজার একটি নিয়ম মানে: কোন element-এ focus যাবে (Tab চাপলে কোনটি “সক্রিয়” হবে), কোন key চাপলে কী হবে, আর screen reader-কে কী নাম ও ভূমিকা জানাতে হবে। <button> লিখলে এর সবই আপনা-আপনি আসে। <div onclick> লিখলে কিছুই আসে না।

নিচের স্টেপারে দেখুন, একটি div-কে সত্যিকারের বাটনের সমান করতে ধাপে ধাপে কী কী যোগ করতে হয় — আর কোডের শেষে <button> কেমন এক লাইনে সব করে দেয়।

<div class="btn" onclick="save()">সংরক্ষণ</div>

<div class="btn" tabindex="0" onclick="save()">সংরক্ষণ</div>

<div class="btn" tabindex="0" role="button"
     onclick="save()">সংরক্ষণ</div>

el.addEventListener('keydown', e => {
  if (e.key === 'Enter') save();
  if (e.key === ' ') { e.preventDefault(); save(); }
});
// (আসল বাটন Space ছাড়ার সময় চলে — সেটাও মেলাতে হয়)
// + disabled অবস্থা, focus-এর দাগ, ফর্মে জমা…

<button type="button">সংরক্ষণ</button>

শিরোনামে “JavaScript ছাড়া” লেখা আছে, তবে সেটা পুরো সত্য নয় — আর সৎ থাকা ভালো। details আর popover সত্যিই কোনো স্ক্রিপ্ট ছাড়া চলে। modal dialog খুলতে এতদিন এক লাইন JavaScript লাগত; নতুন invoker commands সেটাও HTML-এ নিয়ে এসেছে, তবে পুরোনো ব্রাউজারের জন্য ছোট একটি fallback রাখতে হয়। এই পর্বে প্রতিটির সাপোর্ট-অবস্থা Baseline শব্দে স্পষ্ট বলা থাকবে।

২ · details আর summary — খোলা-বন্ধের নিজস্ব বাক্স

পরীক্ষার খাতার শেষে “সংক্ষিপ্ত উত্তর” ভাঁজ করে রাখা কাগজের কথা ভাবুন — ওপরে প্রশ্ন দেখা যায়, ভাঁজ খুললে উত্তর। HTML-এ এটাই disclosure widget, যা দুটি element দিয়ে বানানো:

• <details> — পুরো বাক্সটি। ভেতরের সব কিছু বন্ধ অবস্থায় লুকানো থাকে।
• <summary> — সব সময় দেখা যাওয়া শিরোনাম; এতে চাপলে বাক্স খোলে-বন্ধ হয়। এটি details-এর প্রথম সন্তান হতে হবে।

ব্রাউজার summary-কে নিজে থেকেই একটি বাটনের মতো আচরণ দেয়: Tab-এ focus আসে, Enter বা Space চাপলে খোলে, screen reader বলে “প্রসারিত” বা “সংকুচিত” (expanded/collapsed). পাশে একটি ছোট ত্রিভুজ চিহ্নও (marker) বসে, যা খোলা অবস্থায় ঘুরে নিচের দিকে তাকায়।

<h3>সাধারণ প্রশ্ন</h3>

<details>
  <summary>ডেলিভারি কত দিনে হয়?</summary>
  <p>ঢাকার ভেতরে সাধারণত দুই-তিন দিনে, বাইরে চার-পাঁচ দিনে।</p>
</details>

<details open>
  <summary>কীভাবে টাকা দেব?</summary>
  <p>ক্যাশ অন ডেলিভারি অথবা মোবাইল ব্যাংকিং।</p>
  <ul>
    <li>পণ্য হাতে পেয়ে টাকা দিতে পারবেন</li>
    <li>অগ্রিম দিলে রসিদ পাবেন</li>
  </ul>
</details>

<details>
  <summary>পণ্য ফেরত দেওয়া যায়?</summary>
  <p>হাতে পাওয়ার সাত দিনের মধ্যে, মোড়ক না খুলে থাকলে।</p>
</details>

open — attribute-ই অবস্থা

open attribute শুধু শুরুর অবস্থা নয়, এটাই বর্তমান অবস্থা। পাঠক চাপ দিয়ে খুললে ব্রাউজার নিজেই DOM-এ open যোগ করে, বন্ধ করলে সরিয়ে দেয়। তাই CSS-এ details[open] দিয়ে খোলা অবস্থার আলাদা নকশা করা যায় (পর্ব ১৭-এ attribute selector). আর প্রতিবার অবস্থা বদলালে details-এ একটি toggle ইভেন্ট ঘটে — দরকার হলে JavaScript সেটা শুনতে পারে, কিন্তু খোলা-বন্ধের জন্য JavaScript-এর কোনো দরকার নেই।

summary-র ভেতরে কী রাখবেন, কী রাখবেন না

• summary নিজেই একটি চাপার জায়গা, তাই এর ভেতরে লিংক বা বাটন রাখবেন না — একটি চাপার জিনিসের ভেতরে আরেকটি থাকলে কি-বোর্ড আর screen reader দুই-ই বিভ্রান্ত হয়।
• summary-র ভেতরে heading (<h3>) রাখা বৈধ, কিন্তু বেশিরভাগ screen reader তখন summary-কে বাটন হিসেবে পড়ে আর heading-এর ভূমিকা হারিয়ে যেতে পারে। পাতার শিরোনাম-কাঠামোয় প্রশ্নগুলো জরুরি হলে details-এর আগে আলাদা heading দিন।
• ত্রিভুজটি CSS দিয়ে বদলানো বা সরানো যায় (summary { list-style: none } আর ::marker), তবে সরালে অবশ্যই অন্য কোনো চিহ্ন (যেমন +/−) দিন, নইলে পাঠক বোঝেন না যে এটা খোলা যায়।

৩ · একটি খুললে বাকিগুলো বন্ধ — name দিয়ে exclusive accordion

কয়েকটি details পরপর সাজালে তাকে বলে accordion — হারমোনিয়ামের ভাঁজের মতো খোলে-বন্ধ হয়। অনেক নকশায় চাওয়া হয়, একসাথে একটিই খোলা থাকবে: নতুনটি খুললে আগেরটি নিজে বন্ধ হবে। এতদিন এর জন্য JavaScript লাগত। এখন আছে exclusive accordion: সবগুলো details-এ একই name দিন।

ধারণাটি পরিচিত — পর্ব ০৯-এর radio button-এর মতো। একই name-এর radio-গুলোর মধ্যে একটিই বাছা যায়; একই name-এর details-গুলোর মধ্যে একটিই খোলা থাকে। আলাদা দলের জন্য আলাদা নাম দিন (যেমন name="delivery", name="payment").

<h3>ভর্তি-সংক্রান্ত প্রশ্ন</h3>

<details name="admission" open>
  <summary>আবেদনের শেষ তারিখ কবে?</summary>
  <p>বিজ্ঞপ্তিতে দেওয়া তারিখ দেখুন (এটি একটি উদাহরণ)।</p>
</details>
<details name="admission">
  <summary>কোন কোন কাগজ লাগবে?</summary>
  <p>ছবি, মার্কশিট আর জন্মনিবন্ধন সনদের কপি।</p>
</details>
<details name="admission">
  <summary>ফি কীভাবে জমা দেব?</summary>
  <p>মোবাইল ব্যাংকিং বা ব্যাংকে।</p>
</details>

<script>
  // শুধু দেখার জন্য: কোনটি খুলল, কোনটি বন্ধ হলো
  document.addEventListener('toggle', e => {
    console.log(e.target.querySelector('summary').textContent + ' → ' + e.newState);
  }, true);
</script>

ব্রাউজার ভেতরে ঠিক কী হিসাব করে, ধাপে ধাপে দেখুন:

1<details name="faq" open>…প্রশ্ন ক…</details>2<details name="faq">…প্রশ্ন খ…</details>3<details name="faq">…প্রশ্ন গ…</details>4<details>…প্রশ্ন ঘ (name নেই)…</details>

৪ · dialog — modal আর non-modal বাক্স

bKash-এ টাকা পাঠানোর শেষ ধাপে একটি বাক্স আসে: “আপনি কি ৫০০ টাকা পাঠাতে চান?” — হ্যাঁ না বললে আর কিছু করা যায় না। এটা modal dialog: পাঠকের কাজ থামিয়ে একটি সিদ্ধান্ত চায়, আর পেছনের পাতা ততক্ষণ অচল। এর উল্টো হলো non-modal dialog — একটি ভাসমান বাক্স যা খোলা থাকলেও পেছনের পাতায় কাজ করা যায়, যেমন একটি চ্যাট-সহায়তার জানালা।

HTML-এ দুটোই একটি element দিয়ে: <dialog>. কোন রূপে খুলবে, সেটা ঠিক হয় কীভাবে খোলা হলো তা দিয়ে:

এবার একটি modal নিজে চালিয়ে দেখুন। বাক্সটি বন্ধ করার কোনো JavaScript নেই — ভেতরের ফর্মে method="dialog" আছে। এমন ফর্ম জমা দিলে কোথাও পাঠানো হয় না; ব্রাউজার শুধু dialog বন্ধ করে আর যে বাটন চাপা হলো তার value রেখে দেয় returnValue-তে।

<style>
  body { min-height: 300px; }
  dialog::backdrop { background: rgb(0 0 0 / 0.55); }
</style>
<button type="button" id="send">৫০০ টাকা পাঠান</button>
<button type="button" id="peek">non-modal হিসেবে খুলুন</button>
<p>পেছনের লেখা — modal খোলা থাকলে এটি বাছাই করা যায় না।</p>

<dialog id="confirm" aria-labelledby="confirm-title">
  <h2 id="confirm-title">আপনি কি নিশ্চিত?</h2>
  <p>প্রাপক: ০১৭XX-XXXXXX, পরিমাণ: ৫০০ টাকা (উদাহরণ)</p>
  <form method="dialog">
    <button value="cancel">বাতিল</button>
    <button value="ok">হ্যাঁ, পাঠান</button>
  </form>
</dialog>

<script>
  const box = document.getElementById('confirm');
  document.getElementById('send').addEventListener('click', () => box.showModal());
  document.getElementById('peek').addEventListener('click', () => { if (!box.open) box.show(); });
  box.addEventListener('close', () => console.log('বন্ধ হলো — returnValue: ' + box.returnValue));</script>

focus কোথায় যায় — আর কেন এটা গুরুত্বপূর্ণ

modal খোলার পর পাঠক যদি জানতেই না পারেন যে একটি বাক্স এসেছে, তাহলে বাক্সের কোনো অর্থ নেই। দৃষ্টিপ্রতিবন্ধী একজন ব্যবহারকারীর কাছে “জানা” মানে focus বাক্সের ভেতরে আসা আর screen reader-এর ঘোষণা শোনা। showModal() এই কাজগুলো নিজে করে। নিচের স্টেপারে পুরো জীবনচক্র দেখুন:

৫ · Invoker commands — modal খুলতেও আর JavaScript নয়

ওপরের উদাহরণে বাক্স বন্ধ করার জন্য JavaScript লাগেনি, কিন্তু খোলার জন্য একটি লাইন লেগেছিল: box.showModal(). এই শেষ ফাঁকটি পূরণ করেছে invoker commands — বাটনে দুটি attribute:

• commandfor="id" — কোন element-কে নির্দেশ দেবে (dialog বা popover-এর id).
• command="…" — কী নির্দেশ: show-modal (modal খোলো), close (বন্ধ করো), popover-এর জন্য toggle-popover, show-popover, hide-popover. নিজের কাজের জন্য -- দিয়ে শুরু হওয়া নামও দেওয়া যায় (যেমন --rotate), যা JavaScript-এ command ইভেন্ট হয়ে আসে।

নিচের OTP বাক্সটি খোলা-বন্ধ পুরোপুরি HTML-এ। স্ক্রিপ্ট অংশটি শুধু fallback — যে ব্রাউজার এখনো commandfor চেনে না, সেখানে একই কাজ JavaScript দিয়ে করে।

<style>
  body { min-height: 300px; }
  dialog::backdrop { background: rgb(0 0 0 / 0.5); }
</style>
<button type="button" command="show-modal" commandfor="otp">OTP যাচাই করুন</button>

<dialog id="otp" aria-labelledby="otp-title">
  <h2 id="otp-title">কোড পাঠানো হয়েছে</h2>
  <label>ফোনে আসা ৬ অঙ্কের কোড
    <input inputmode="numeric" autocomplete="one-time-code" autofocus>
  </label>
  <p><button type="button" command="close" commandfor="otp">বন্ধ করুন</button></p>
</dialog>

<script>
  const native = 'commandForElement' in HTMLButtonElement.prototype;
  console.log('invoker commands নিজে থেকে চলে? ' + native);
  if (!native) {                       // পুরোনো ব্রাউজারের জন্য fallback
    document.addEventListener('click', e => {
      const btn = e.target.closest('button[commandfor]');
      if (!btn) return;
      const target = document.getElementById(btn.getAttribute('commandfor'));
      const cmd = btn.getAttribute('command');
      if (cmd === 'show-modal' && !target.open) target.showModal();
      if (cmd === 'close') target.close();
    });
  }
</script>

৬ · popover — মেনু, টিপস আর নোটিফিকেশনের ভাসমান স্তর

সব ভাসমান অংশ পাঠককে থামায় না। প্রোফাইল-ছবিতে চাপলে আসা ছোট মেনু, একটি শব্দের পাশে “?” চাপলে আসা ব্যাখ্যা, বা “কার্টে যোগ হয়েছে” লেখা ছোট বার্তা — এগুলো ক্ষণিকের, পাঠক চাইলে উপেক্ষা করে কাজ চালিয়ে যান। এর জন্য HTML-এর নিজস্ব সমাধান popover attribute. এটি যেকোনো element-এ বসানো যায়:

• popover (বা popover="auto") — element-টি শুরুতে লুকানো; খুললে top layer-এ ভেসে ওঠে।
• popovertarget="id" — একটি <button>-এ বসালে সেটি ওই popover খোলে-বন্ধ করে, কোনো স্ক্রিপ্ট ছাড়া।
• popovertargetaction — বাটনটি কী করবে: toggle (ডিফল্ট, খোলা-বন্ধ দুই-ই), show (শুধু খোলে), hide (শুধু বন্ধ করে)।

auto বনাম manual

<style>
  body { min-height: 280px; }
  #toast { inset: auto 1rem 1rem auto; margin: 0; }
</style>
<button popovertarget="menu">আমার অ্যাকাউন্ট ▾</button>
<div id="menu" popover>
  <ul>
    <li><a href="#orders">আমার অর্ডার</a></li>
    <li><a href="#settings">সেটিংস</a></li>
  </ul>
</div>

<button popovertarget="toast" popovertargetaction="show">কার্টে যোগ করুন</button>
<div id="toast" popover="manual">
  <p>পণ্যটি কার্টে যোগ হয়েছে।</p>
  <button popovertarget="toast" popovertargetaction="hide">ঠিক আছে</button>
</div>

<script>
  // শুধু দেখার জন্য: কোন popover কখন খুলল বা বন্ধ হলো
  for (const p of document.querySelectorAll('[popover]')) {
    p.addEventListener('toggle', e => console.log(p.id + ': ' + e.oldState + ' → ' + e.newState));
  }
</script>

popovertarget-ওয়ালা বাটন কিছু accessibility-র কাজও নিজে করে: screen reader-কে জানায় বাটনটি একটি অংশ খোলে-বন্ধ করে আর বর্তমানে খোলা না বন্ধ (aria-expanded-এর সমান তথ্য), আর light dismiss-এ বন্ধ হলে focus ভেতরে থাকলে বাটনে ফিরিয়ে আনে। তবে মনে রাখুন, popover একটি আচরণ, অর্থ নয় — এটি নিজে কোনো ভূমিকা (role) যোগ করে না। মেনুর ভেতরে লিংকের তালিকা হলে তালিকাই লিখুন, যেমন ওপরে <ul>; আর popover-কে modal-এর কাজে লাগাবেন না — এটি পেছনের পাতা অচল করে না, focus-ও আটকায় না।

ডিফল্টে popover পর্দার মাঝখানে বসে। বাটনের ঠিক নিচে বসাতে চাইলে CSS-এর নতুন anchor positioning লাগে — সেটা পর্ব ৩৭-এ। আর খোলা অবস্থার নকশার জন্য আছে :popover-open pseudo-class (পর্ব ৩৪)।

৭ · details, dialog না popover — কখন কোনটি

তিনটিই “কিছু একটা দেখা যায়, আবার লুকায়” — তাই গুলিয়ে ফেলা সহজ। প্রশ্ন একটি দিয়ে শুরু করুন: লুকানো অংশটি খুললে পাঠককে কি থামতে হবে? হ্যাঁ হলে modal dialog. না হলে আবার জিজ্ঞেস করুন: অংশটি কি পাতার লেখার প্রবাহের মধ্যেই খুলবে, নাকি ওপরে ভাসবে? প্রবাহের মধ্যে হলে details, ওপরে ভাসলে popover.

দুটি সূক্ষ্ম কথা। এক, dialog আর popover একসাথেও চলে — <dialog popover> লিখলে dialog-এর অর্থ (role) আর popover-এর light dismiss দুটোই পাওয়া যায়, যেমন একটি non-modal সহায়তার বাক্স। তবে popover দেওয়া element-এ showModal() ডাকবেন না — দুটি আলাদা খোলার পদ্ধতি। দুই, “পর্দার একপাশ থেকে আসা মোবাইল মেনু” (drawer) যদি পেছনের পাতা অচল করে, তাহলে আসলে সেটি modal dialog — CSS দিয়ে বাক্সটিকে পাশে বসিয়ে দিলেই হলো।

৮ · সাধারণ ভুল — দেখতে ঠিক, ব্যবহারে ভাঙা

নিচের প্রিভিউতে দুটি ভুল আর একটি ঠিক জিনিস আছে। মাউস দিয়ে সবই “কাজ করে” — তাই ভুলগুলো ধরতে হলে কি-বোর্ড দিয়ে পরীক্ষা করতে হবে।

<style>
  .fake { display: inline-block; padding: 4px 12px; background: #2563eb;
          color: #fff; border-radius: 6px; cursor: pointer; }
</style>
<p>প্রিভিউতে চেপে Tab দিন — focus কোথায় কোথায় যায়?</p>

<div class="fake" id="fake">নকল বাটন (div)</div>
<button type="button" id="real">আসল বাটন</button>

<details>
  <p>এই details-এ summary নেই।</p>
</details>

<script>
  for (const b of [document.getElementById('fake'), document.getElementById('real')]) {
    b.addEventListener('click', () => console.log(b.textContent + ' — চাপা হলো'));
  }
</script>

আরও কিছু ভুল যা প্রায়ই দেখা যায়

সবচেয়ে বড় শিক্ষা: নিজের কাজ কি-বোর্ডে পরীক্ষা করুন। মাউস সরিয়ে রেখে শুধু Tab, Shift+Tab, Enter, Space আর Esc দিয়ে পুরো পাতা চালিয়ে দেখুন। যা কি-বোর্ডে চলে না, তা অনেক মানুষের জন্য চলেই না। (WCAG 2.2-এর ২.১.১ নিয়ম — Keyboard — ঠিক এটাই চায়; পর্ব ১২-এ বিস্তারিত।)

৯ · AI-এর যুগে — AI-এর বানানো মেনু আর modal যাচাই

“একটা modal বানিয়ে দাও”, “একটা FAQ accordion বানাও” — AI কয়েক সেকেন্ডে কোড দেবে। কিন্তু AI শিখেছে ইন্টারনেটের বিশাল পুরোনো কোড থেকে, যেখানে ২০১০-এর দশকের jQuery আর div-ভিত্তিক modal ভরা। তাই প্রায়ই পাবেন ৫০ লাইনের JavaScript, z-index: 9999, হাতে লেখা focus-ফাঁদ — যেখানে কয়েক লাইনের <dialog>-ই যথেষ্ট ছিল। আবার উল্টোটাও ঘটে: AI একেবারে নতুন attribute দেয় কিন্তু সাপোর্টের কথা বলে না।

AI-এর দেওয়া ইন্টারঅ্যাকটিভ কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• মাউস সরিয়ে শুধু Tab, Enter, Space আর Esc দিয়ে সব খুলেছি-বন্ধ করেছি; modal বন্ধ হলে focus আগের বাটনে ফিরেছে
• validator.w3.org-এ কোড পরীক্ষা করেছি — summary প্রথম সন্তান, অচল বা ভুল attribute নেই
• DevTools-এর Elements প্যানেলে দেখেছি — modal-এর পাশে top-layer চিহ্ন, আর Accessibility অংশে বাটনের role button, dialog-এর নাম আছে
• Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি; নতুন attribute (commandfor, name, popover, closedby) MDN আর Can I use-এ মিলিয়ে Baseline অবস্থা দেখেছি
• Newly available বা Baseline-নয় এমন ফিচারের জন্য fallback আছে, অথবা না থাকলেও মূল কাজ (তথ্য পড়া, ফর্ম জমা) হারায় না
• দরকার নেই এমন JavaScript লাইব্রেরি বা লম্বা স্ক্রিপ্ট সরিয়ে নিজস্ব element দিয়ে বদলেছি