בשביל לבנות אתרים נגישים אנחנו צריכים להוסיף אינדיקציה ויזואלית כשכפתור נכנס לפוקוס, כדי שמשתמשים יוכלו לנווט בין הכפתורים של האתר בעזרת לחיצה על Tab.

הבעיה שגם לחיצה עם העכבר על כפתור מכניסה את הכפתור לפוקוס, אפילו שמשתמשים יודעים על מה הם לחצו ולא צריכים את האינדיקציה הזו. אפשר לראות את הבעיה בקודפן הבא, פשוט לחצו על הכפתור ותראו את הריבוע הכחול שמופיע סביבו:

https://codepen.io/ynonp/pen/LYMrbzw

מה עושים? פיתרון קל הוא להוסיף קצת JavaScript שיזהה לחיצות עכבר ויוסיף קלאס מיוחד ל body. בלחיצה על טאב נוריד את הקלאס הזה. ב CSS נציג את האינדיקציה הויזואלית לפוקוס רק אם הקלאס לא נמצא על ה body. קוד? ברור:

document.body.addEventListener("mousedown", () => {
  document.body.classList.add("using-mouse");
});
document.body.addEventListener("keydown", ({ key }) => { 
  if (key === "Tab") { 
    document.body.classList.remove("using-mouse"); 
  } 
});

ובקודפן:

https://codepen.io/ynonp/pen/LYMmmEd