با div دکمه نسازید! (یا جلوی merge شدن چنین کدی را بگیرید)

اضافه کردن یک رویداد کلیک به یک DIV بسیار ساده است — شاید زیادی ساده! و همین باعث می‌شود این اشتباه بارها و بارها تکرار شود. مشکل اینجاست که DIVها عناصر تعاملی نیستند، بنابراین برای قابل دسترس کردن آن‌ها باید موارد زیادی را دستی اضافه کنید. در حالی که می‌توانستید به‌راحتی از یک عنصر <button> استفاده کنید و کار را تمام کنید.

برای اینکه یک DIV را به دکمه‌ای accessible تبدیل کنید، باید کارهای زیر را انجام دهید:

const Submit = () => {
  const handleKeyDown = (event) => {
    if (event.code === "Space" || event.code === "Enter") {
      // do click stuff
    }
  };

  return (
    <div
      onClick={handleClick}
      onKeyDown={handleKeyDown} // Add functionality for keyboard users
      role="button" // Tell the screen readers that it's a button (it's NOT!)
      tabIndex="0" // Make it focusable!
    >
      Submit
    </div>
  );
};

در key handler باید به‌طور شرطی منطق مورد نظر را هنگام فشردن کلید Space یا Enter اجرا کنید. و اگر دکمه‌ شما آیکونی است یا محتوای متنی ندارد، فراموش نکنید که یک نام قابل دسترس (احتمالاً با aria-label) به آن اختصاص دهید.

استفاده از عنصر button بسیار ساده‌تر است. برای رسیدن به همان عملکرد و سطح دسترسی، تنها کافی است بگوییم:

<button onClick={handleClick}>Submit</button>

همین! نیازی به تعیین role صریح، tabIndex، یا key handler نداریم (چون دکمه‌ها به‌صورت پیش‌فرض از طریق کیبورد فعال می‌شوند، بر خلاف DIVها).

مراقب دکمه‌های DIV باشید

این یکی از ساده‌ترین مشکلاتی است که می‌توان در بازبینی کدها شناسایی کرد: رویداد کلیک روی یک DIV (یا listitem یا سایر عناصر غیرتعاملی). معمولاً اعضای تیم تلاش خود را می‌کنند و role و tabIndex را اضافه می‌کنند، اما اغلب key handler را فراموش می‌کنند، چون تست با کیبورد بخشی از فرآیند کاری روزمره‌ آن‌ها نیست.

تست با کیبورد را به بخشی از جریان کاری منظم خود تبدیل کنید و از دکمه‌های HTML استفاده کنید! مشکل به‌سادگی حل خواهد شد.